Animation of tween.js

3rd party animation   tween.js

 

Used to achieve easing effect

 

Easing function query address: https://easings.net/zh-cn#

Cdn reference: https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js

Reference link: http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html

 

Easing function:

1 .linear uniform speed

2 .Quad quadratic easing
 effect3 .Cubic cubic easing
 effect4 .Quart 4th easing
 effect5 .Quint 5th easing effect

6 .Sine Sine easing effect
 7 .Expo Exponential easing effect
 8 .Circ Circular easing function

9 .Elastic exponential decay sine curve easing function
 10 .Back easing function beyond the third power of the range
 11 .Bounce exponential decay rebound curve easing function

 

Each easing function consists of three effects:

1.easeIn acceleration
2. easeOut deceleration
3.easeInOut accelerates first and then decelerates

　　

Code example: Click the navigation bar to jump gently to the corresponding position, and the easing code in it

function animate(time) {
            requestAnimationFrame(animate);
            TWEEN.update(time);
        }
        requestAnimationFrame(animate);
        
        var coords = {y:currentTop }; // initial value 
        var t=Math.abs((s/ 100 )* 500 )
         if (t> 1000 ){
            t=500
        }
        var tween = new TWEEN.Tween(coords) 
                .to({y: targetTop }, t) // target value- 
                time.easing(TWEEN.Easing.Quadratic.InOut) // easing animation, effect name, easing 
                effect.onUpdate(function() {
                    window.scrollTo( 0 ,coords.y)
                }) //Execute                 .start() after each update of tween ;

    }