이 글의 내용은 js(예제 코드)에서 tween.js를 사용하여 애니메이션의 느린 동작 효과에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
window.requestAnimFrame = (function (callback,time) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimaitonFrame || function (callback) { window.setTimeout(callback, time); }; })();
/* * t: current time(当前时间,小于持续时间,tween返回当前时间目标的状态); * b: beginning value(初始值); * c: change in value(变化量); * d: duration(持续时间)。 */
Linear: 선형 균일 모션 효과
2차: 2차 여유(t^2);
t^3 – st ^2); .
var t = 0, b = 0, c = 100, d = 10; var step = function () { // value就是当前的位置值 // 例如我们可以设置DOM.style.left = value + 'px'实现定位 var value = Tween.Linear(t, b, c, d); t++; if (t 2. 맨 위로 돌아가기/setInterval<h4><pre class="brush:php;toolbar:false">backTop(){ var Tween = { Linear: function(t, b, c, d) { //匀速运动 return c * t / d + b; } } Math.tween = Tween; var t = 0; const b = document.documentElement.scrollTop; const c = 100; const d = 5; const setInt = setInterval(()=>{ t--; //console.log(t) if(document.documentElement.scrollTop == 0){clearInterval(setInt)} //console.log(t); const backTop = Tween.Linear(t,b,c,d); //console.log(backTop); document.documentElement.scrollTop = backTop; },5) },스터디 펀 파크, backLeft
Tweenjs 설치
npm install @tweenjs/tween.js예
var box = document.createElement('p'); box.style.setProperty('background-color', '#008800'); box.style.setProperty('width', '100px'); box.style.setProperty('height', '100px'); document.body.appendChild(box); // 动画循环 function animate(time) { requestAnimationFrame(animate); TWEEN.update(time); } requestAnimationFrame(animate); var coords = { x: 0, y: 0 }; // 开始位置 var tween = new TWEEN.Tween(coords) // 创建一个更改目标的tween .to({ x: 300, y: 200 }, 1000) // 目的位置,1s .easing(TWEEN.Easing.Quadratic.Out) // 平滑动画 .onUpdate(function() { // 目标更新后调用 // CSS translation box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)'); }) .start();
tween.js 예제 튜토리얼을 캡슐화하는 간단한 애니메이션 라이브러리
위 내용은 js의 tween.js는 애니메이션의 느린 움직임 효과를 구현합니다(예제 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!