> 웹 프론트엔드 > H5 튜토리얼 > HTML5 Canvas 및 Rebound 애니메이션을 기반으로 한 애니메이션 특수 효과 로드

HTML5 Canvas 및 Rebound 애니메이션을 기반으로 한 애니메이션 특수 효과 로드

黄舟
풀어 주다: 2017-01-19 13:52:40
원래의
2159명이 탐색했습니다.

간단한 튜토리얼

HTML5 캔버스와 리바운드 애니메이션을 기반으로 한 로딩 애니메이션 특수 효과입니다. 로딩 애니메이션은 캔버스를 사용하여 전체 페이지를 덮고 다각형 로딩 로더를 표시하여 로딩 진행 상황을 나타냅니다.

1. SpringSystem을 생성합니다.

rree

2. 시스템에 스프링을 추가합니다.

// Create a SpringSystem.
  let springSystem = new rebound.SpringSystem();
로그인 후 복사

3. 봄을 위한 SpringListener 이벤트 모니터링을 추가합니다.

// Add a spring to the system.
  demo.spring = springSystem.createSpring(settings.tension, settings.friction);
로그인 후 복사

4. 스프링의 종료 애니메이션 값을 설정하며, 매개변수는 시작 애니메이션의 현재 값입니다.

_addSpringListener() {
 
  let ctx = this;
 
  // Add a listener to the spring. Every time the physics
  // solver updates the Spring's value onSpringUpdate will
  // be called.
  this._spring.addListener({
    // ...
  });
}
로그인 후 복사

5. onSpringUpdate 콜백 함수에서 애니메이션 진행률을 설정합니다.

this._spring.setEndValue((this._spring.getCurrentValue() === 1) ? 0 : 1);
로그인 후 복사

위 내용은 HTML5 Canvas 기반의 애니메이션 특수효과와 Rebound 애니메이션 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿