웹 애니메이션 API (JS 애니메이션 이기)

전송 문
앞 에 쓰다
이전에 CSS animation / setTimeout / setInterval / request Animation Frame 등 을 배 웠 는데 이런 것들 은 특정한 장면 에서 사용 할 수 있 는 작은 애니메이션 이 고 동 효 라 고 할 수 있다.CSS 애니메이션 군 은 강력 하지만 결함 도 많 습 니 다. 가끔 은 요 구 를 만족 시 키 지 못 할 때 가 있 습 니 다. 타 이 머 를 애니메이션 에 사용 하면 더욱 사용 하지 않 습 니 다. 그러나 requestAnimationFrame 도 강력 한 것 입 니 다. 구체 적 인 정 보 는 window. requestAnimationFrame 에서 애니메이션 에 대해 알 아야 할 requestAnimationFrame - 장 흠 욱 이 몇 편의 글 입 니 다.다음 노트 는 웹 애니메이션 API (WAAPI), 즉 js 의 애니메이션 에 관 한 것 입 니 다.
web animations API
waapi 에 대해 서 는 css animation 에 대해 더 잘 알 고 있 을 수 있 습 니 다. 다음은 css animation 의 용법 을 먼저 보 겠 습 니 다.

.item1{
    animation: rotate  4s inifite ease running;
}
@keyframes rotate{
    from{
        transform：rotate(0);
    }
    to{
        transform:rotate(360deg);
    }
}
  
@keyframes rotate{
    0%{
        transform：rotate(0);
        background-color：red;
    }
    40%{
        background-color：blue;
    }
    100%{
        transform:rotate(360deg);
        background-color:red;
    }
}

평소에 많이 사용 하 는 것 은 백분율 유형 으로 여러 개의 관건 적 인 프레임 을 정의 할 수 있다.다음은 waapi 버 전의:

var ani1 = [
        {transform:'rotate(0)',backgroundColor:'red'},
        {backgroundColor:'blue',offset:0.4},
        {transform:'rotate(360deg)',backgroundColor:'red'}
    ];
    var aniOpt1 = {
        duration:4000,
        iterations:Infinity,
        easing:'ease-in-out'
    };

    document.querySelector(".item1").animate(ani1,aniOpt1);

Element.animate() 요 소 를 호출 하면 바로 실 행 됩 니 다.css 3 애니메이션 과 비슷 하지만 작은 차이 가 많 습 니 다. 예 를 들 어:

css 3 애니메이션 에서 사용 하 는 시간 단 위 는 s 이 고, wappi 에서 사용 하 는 것 은 setTimeout 등 타이머 의 단위 와 쓰기 와 일치 합 니 다 (단 위 는 ms 이 며 생략 가능)

waapi 에서 관건 적 인 프레임 의 값 은 문자열 형식 으로 css 3 와 다 릅 니 다.

waapi 에 서 는 백분 수가 아 닌 offset 으로 키 프레임 의 위 치 를 설정 합 니 다.

css 3 애니메이션 에서 animation - duration 은 duration 으로, animation - iteration - count 는 iterations 로, 그 무한 한 값 은 문자열 'infinite' 에서 키워드 Infinity 로 바 뀌 었 다.등등 또 다른 요소 의 변화 가 있어 단어 로 볼 때 더욱 간결 해 졌 다.

duration 속성 만 설정 하면 다음 과 같은 더 간결 한 방식 을 사용 할 수 있 습 니 다.

document.querySelector(".item1").animate(ani1,4000);

document. animate () 는 CSS 애니메이션 을 사용 할 수 있 는 모든 DOM 요소 에 적용 할 수 있 습 니 다. 다음은 waapi 의 강력 한 제어 방법 입 니 다.
play (), pause (), reverse (), playbackRate 제어 재생

var rotateAni = document.querySelector(".item1").animate(ani1,aniOpt1);  
rotateAni.play() //  
rotateAni.pause() //  

주: 애니메이션 이 실 행 될 때 콘 솔 에서 rotateAni 를 인쇄 할 수 있 습 니 다. rotateAni 가 가지 고 있 는 속성 값 과 원형 상의 방법 을 볼 수 있 습 니 다 (이때 playbackRate 의 값 은 1).
그리고 위 에 있 는 이 몇 가 지 를 제외 하고 다른 속성 과 방법 이 있 는 것 을 발견 했다. 몇 가 지 를 골 라 서 말 해 보 자.

finish()  //          ，      ，         
cancel()  //      ，           
reverse() //               ,  playbackTate 1  -1

playbackRate 속성 reverse() 방법 은 playbackRate 의 값 을 변경 할 수 있 습 니 다.플레이 백 레이트 를 0 - 1 사이 의 수치 로 수 동 으로 바 꾸 면 애니메이션 을 늦 출 수 있 습 니 다.1 이상 의 값 으로 설정 하면 애니메이션 을 가속 화 할 수 있 습 니 다.
애니메이션 정 보 를 얻 는 방법 은 아직 실험 중 입 니 다. 브 라 우 저 를 지원 한 후에 사용 할 수 있 습 니 다.
wappi 사건 감청

onfinish:        ，   finish()        。
oncancel:        ，   cancel()        。

rotateAni.onfinish = function(){
    doSomething();
}
rotateAni.oncancel = function(){
    doSomething();
}

브 라 우 저 지원 도
그림 승리 선언 can i use
작은 매듭

현재 브 라 우 저 지원 도가 높 지 않 기 때문에 신중하게 사용 해 야 합 니 다.

현대 브 라 우 저 에서 wappi 를 사용 하면 멋 진 애니메이션 을 만 들 수 있 으 니 많이 시도 해 보 세 요.

본문 도 학습 노트 에 불과 하기 때문에 사내 들 의 조언 을 환영 합 니 다 ~

참고 자료

WAAPI-w3cplus

web animations-w3cplus

Web Animations API-MDN