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

간단한 튜토리얼

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 중국어 홈페이지(www.php.cn)를 참고해주세요!