Animated effects of Tween.js

Third party animation Tween.js

Used to achieve easing effects

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 2 . Quad two-time side easing effect 3. Cubic three-time side easing effect 4. Quart four-time side easing effect 5. Quint five-time side easing effect 6. Sine  sinusoidal easing effect 7. Expo  Index easing effect 8. CIRC  Circular easing function 9. Elastic exponential attenuation sine curve easing function ten. Back  over the range of the three-square easing function one at a time .  The easing function of rebound curve of Bounce exponential attenuation

Each easing function is made up of three effects:

1.easeIn  Acceleration 2.easeOut deceleration 3.easeInOut  first acceleration after deceleration

　　

code example: Click on the navigation bar to jump to the corresponding position, where the easing code

function Animate (time) {requestanimationframe (animate);        Tween.update (time);                } requestanimationframe (animate); varcoords = {Y:currenttop};//Initial value        varT=math.abs ((s/ -)* -)        if(t> +) {T= -        }        varTween =NewTWEEN. Tween (coords) to ({y:targettop}, T)//target value-time. Easing (TWEEN. Easing.Quadratic.InOut)//slow animation, effect name, ease effect. OnUpdate (function () {Window.scrollto (0, Coords.y)})//The tween is executed after each update. Start (); }

Animated effects of Tween.js