requestanimframe兼容window.requestanimframe = (function (callback,time) { return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimaitonframe || function (callback) { window.settimeout(callback, time); };})();
tween.js参数/* * 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
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实现导航条滑动_html/css_web-itnose
简单的动画库封装tween.js实例教程
tween.js动画详细介绍
以上就是js中tween.js实现动画缓慢移动的效果（实例代码）的详细内容。