간단한 튜토리얼
HTML5 캔버스와 리바운드 애니메이션을 기반으로 한 로딩 애니메이션 특수 효과입니다. 로딩 애니메이션은 캔버스를 사용하여 전체 페이지를 덮고 다각형 로딩 로더를 표시하여 로딩 진행 상황을 나타냅니다.
1. SpringSystem을 생성합니다.
rree2. 시스템에 스프링을 추가합니다.
// 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)를 참고해주세요!