tween.js的动画效果

Posted 2020-11-03 一路の向北

第三方动画  tween.js

 

用来实现缓动效果

 

缓动函数查询地址：https://easings.net/zh-cn#

cdn的引用：https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js

参考链接：http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html

 

缓动函数:

1.linear 匀速

2.Quad 二次方缓动效果
3.Cubic 三次方缓动效果
4.Quart 四次方缓动效果
5.Quint 五次方缓动效果

6.Sine  正弦缓动效果
7.Expo  指数缓动效果
8.Circ  圆形缓动函数

9.Elastic 指数衰减正弦曲线缓动函数
10.Back  超过范围的三次方的缓动函数
11.Bounce 指数衰减的反弹曲线缓动函数

 

每种缓动函数都由三种效果:

1.easeIn  加速
2.easeOut 减速
3.easeInOut  先加速后减速

　　

代码事例：点击导航栏平缓跳动到对应的位置，其中的缓动代码

function animate(time) {
            requestAnimationFrame(animate);
            TWEEN.update(time);
        }
        requestAnimationFrame(animate);
        
        var coords = {y:currentTop }; //初始值
        var t=Math.abs((s/100)*500)
        if(t>1000){
            t=500
        }
        var tween = new TWEEN.Tween(coords) 
                .to({y: targetTop }, t) //目标值-时间
                .easing(TWEEN.Easing.Quadratic.InOut) //缓动动画，效果名，缓动效果
                .onUpdate(function() { 
                    window.scrollTo(0,coords.y)
                })//在tween每次被更新后执行
                .start(); 
    }