tween.js的动画效果

Posted 一路の向北

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tween.js的动画效果相关的知识,希望对你有一定的参考价值。

第三方动画  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(); 
    }

 

以上是关于tween.js的动画效果的主要内容,如果未能解决你的问题,请参考以下文章

Tween.js 动画效果

tween.js

window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

Threejs基础代码段Tweenjs补间动画

tween 缓动动画

利用tween.js算法生成缓动效果