时间:2021-07-01 10:21:17 帮助过:3人阅读
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:线性匀速运动效果;
Quadratic:二次方的缓动(t^2);
Cubic:三次方的缓动(t^3);
Quartic:四次方的缓动(t^4);
Quintic:五次方的缓动(t^5);
Sinusoidal:正弦曲线的缓动(sin(t));
Exponential:指数曲线的缓动(2^t);
Circular:圆形曲线的缓动(sqrt(1-t^2));
Elastic:指数衰减的正弦曲线缓动;
Back:超过范围的三次方缓动((s+1)t^3 – st^2);
Bounce:指数衰减的反弹缓动。
每个效果都分三个缓动方式,分别是:
easeIn:从0开始加速的缓动,也就是先慢后快;
easeOut:减速到0的缓动,也就是先快后慢;
easeInOut:前半段从0开始加速,后半段减速到0的缓动。
Tween.js动画算法使用示意实例页面
1.
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 <= d) { // 继续运动 requestAnimationFrame(step); } else { // 动画结束 } };
2.返回顶部/setInterval
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
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实现导航条滑动_html/css_WEB-ITnose
简单的动画库封装tween.js实例教程
Tween.js动画详细介绍
以上就是js中tween.js实现动画缓慢移动的效果(实例代码)的详细内容,更多请关注Gxl网其它相关文章!