241030 TIL - Math.random() / animate()

 오늘은 거의 css 숫자 노가다를 하며 보냈지만...! 그래도 짤막짤막 새로 배워 활용한 녀석들이 많다! 사전캠프 때 랜덤 장애물 생성을 위해 시도했던 math.random을 다시 만났고, 피날레로 animate메서드에 대해 공부하며 하루를 마무리 했다! 하나하나 간단히 정리해보자

 

[ Script ]

Math.random()

• Math로 시작하면 일단 수학적인 무언가인디(대문자 M임!!!), 여기서 random이 첨가되면 난수를 생성할 수 있게 됨
• 인자를 입력하지 않은 기본 상태에선 0에서 1 사이의 난수를 생성하는데, 이때 1은 포함되지 않음
• 출력값은 실수라서 범위 내의 값이 매우매우 많음!
• 만약 범위를 설정하고 싶다면 "Math.random()*n"를 해주면 된다. 이 경우 "0 <= 난수 < n"의 범위를 가짐 
• 0말고 최소값을 설정하고 싶다면 "Math.random()*n" 이후 원하는 값을 더하거나 빼주면 됨

/* 기본 구조1 : 최대값과 최소값을 모두 포함 */
Math.random() * (max - min + 1) + min

/* 기본 구조2 : 최소값만 포함 */
Math.random() * (max - min) + min

Math.random()*5 - 3; // 음수도 최소값으로 설정 가능

 

 

Math.floor()

• 인자의 숫자를 정수화시켜주는 메서드! 소수점 첫번째 자리를 버림하는 방식임 (round 반올림 / ceil 올림)
• 앞선 math.random()에 이걸 씌워주면 정수인 난수만 생성이 가능해짐

 

 

HTML 요소에 애니메이션 구현하기

 CSS로 하는 방법이 있고, Script로 하는 방법이 있는디, 나는 후자를 택해서 공부해보았다!

 hover 속성과의 연계라든지 비교적 규모가 작은 경우 CSS로, 규모가 큰 경우라면 Script로 활용하는 편이 좋다고 한다네

 

 

animate()

/* 기본 구조 */
Element.animate(keyframes, options)

 애니메이션을 구현하고 싶은 Element에 animate 메서드를 붙이는데, 매개 변수 둘을 필요로 한다!

• keyframes : 애니메이션의 움직임을 핵심적인 여러 프레임으로 나눠 정의함. 변수에 배열을 할당하는데, 이 배열은 프레임 별 변화를 보여주는 객체들로 구성됨. 마지막 프레임처럼 한 프레임에 여러 움직임을 담을 수도 있음! 또는 객체를 할당하는 형태도 가능한데, 객체의 각 프로퍼티는 움직임의 속성을 key로 갖고, value엔 프레임 변화값의 순서에 따라 인덱스가 배정된 배열을 가짐

/* Script에서의 keyframes 객체 버전 */
let keyframes = [ 
    {opacity : 0}
    , {opacity : 0.5}
    , {opacity : 1, transform : "transform(10px,10px)"}
];

/* Script에서의 keyframes 배열 버전 */
let = keyframes = {
    opacity : [0, 0.5, 1]
    , transfrom : ["translate(10px,10px)"] // 배열의 요소가 하나면 마지막 프레임으로
};

▼ CSS에서의 keyframes

/* CSS에서의 keyframes */
@keyframes animation_1 {
    from {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    to {
        opacity : 1;
        transform: translate(10px,10px);
    }
}

• options : 프레임을 설정했으면 애니메이션의 나머지 속성을 지정해줘야함! 여기엔 delay, duration, easing, iterations, fill 등이 있음. 역시 옵션의 속성을 담을 변수에 객체를 할당하는 식. keyframes와 달리 CSS와 Script 간 속성의 key와 value가 조금씩 다른 점이 있음. Script에서 시간 관련 속성은 ms기준. 대표적인 속성들을 간단히 정리해보자

/* Script에서의 options */
let options = {
    delay : 1000,
    duration : 1000,
    easing : "ease-in",
    iterations : Infinity,
    fill : "forwards"
}

 

• delay : 애니메이션 발동 트리거 후 실제 시작하기까지의 시간
• duration : 애니메이션이 동작하는 총 시간
• easing : 애니메이션의 부드러움 정도를 조절. 애니메이션 흐름 동안 "ease"는 느림~빠름~느림, "ease-in"은 보통~빠름, "ease-out"은 보통~느림, "ease-in-out"은 느림~보통~느림인 느낌
• iterations  : duration 동안의 애니메이션  반복 횟수. 숫자형태로 지정할 수도 있고, infinite하면 무한 반복
• fill : 애니메이션 종료시 요소의 상태를 설정. "none"은 상태를 따로 설정하지 않고, "forwards"는 애니메이션이 끝난 상태 그대로 있고, "backwards"는 애니메이션 시작 전 초기 상태로 돌아오고, "both"는 시작과 끝 두 상태를 조합해서 설정하고, "inherit"는 상위 요소의 상태를 상속받음.

▼ CSS에서의 options

 애니메이션을 적용할 요소에 속성들을 부여함!

/* CSS에서의 obtions */
#Element {
    animation-name : animation_1;
    animation-delay : 1s;
    animation-duration : 2s;
    animation-timing-fuction : ease-in;
    animation-iteration-count : infinite;
    animation-fill-mode : forwards;
}