tween.js in js realizes the effect of slow movement of animation (example code)

The content of this article is about the slow movement effect of animation achieved by tween.js in js (example code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

requestAnimFrame compatible

window.requestAnimFrame = (function (callback,time) {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimaitonFrame ||
        function (callback) {
            window.setTimeout(callback, time);
        };
})();

tween.js

Parameters

/*
 * t: current time（当前时间,小于持续时间，tween返回当前时间目标的状态）；
 * b: beginning value（初始值）；
 * c: change in value（变化量）；
 * d: duration（持续时间）。
*/

Animation motion algorithm

1. Linear: Linear Uniform motion effect;

2. Quadratic: Quadratic easing (t^2);

3. Cubic: Cubic easing (t^2) t^3);

4. Quartic: Easing to the fourth power (t^4);

5. Quintic: Easing to the fifth power Movement (t^5);

6. Sinusoidal: Ease of sinusoidal curve (sin(t));

7. Exponential: Exponential curve Ease (2^t);

8. Circular: Ease of circular curve (sqrt(1-t^2));

9. Elastic: Exponentially decaying sinusoidal easing;

10. Back: Cubic easing out of range ((s 1)t^3 – st^ 2);

11. Bounce: exponentially decaying bounce easing.

Each effect is divided into three easing methods, which are:

• easeIn: easing that accelerates from 0, that is Slow first and then fast;

• easeOut: slow down to 0, that is, fast first and then slow;

• easeInOut: the first half starts from It starts to accelerate at 0 and slows down to 0 in the second half.

Tween.js animation algorithm usage example page

Example

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 <p>2.Back to top/setInterval</p><pre class="brush:php;toolbar:false">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)
},

Learning Paradise, backLeft

Tweenjs

Installation

npm install @tweenjs/tween.js

Example

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();

Related recommendations:

How to use tween.js to implement navigation bar sliding_html/css_WEB-ITnose

Simple animation library encapsulates tween .js example tutorial

Tween.js animation detailed introduction

The above is the detailed content of tween.js in js realizes the effect of slow movement of animation (example code). For more information, please follow other related articles on the PHP Chinese website!