js学习心得_一个简单的动画库封装tween.js

我来详细讲解“js学习心得_一个简单的动画库封装tween.js”的完整攻略。

1. 什么是Tween.js

Tween.js 是一个小巧、功能强大的 JavaScript 动画引擎库，封装了比较常见的动画算法，并且使用非常简单，方便开发者使用。Tween.js 可以用于所有支持 JavaScript 的平台。

2. 如何使用Tween.js

2.1 引入Tween.js

可以通过 npm 或者直接引入文件的方式使用Tween.js：

通过 npm 引入：

npm install tween.js --save
import TWEEN from 'tween.js';

直接引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/Tween.min.js"></script>
<script>
  var tween = new TWEEN.Tween(object)
    .to(target, time)
    .easing(TWEEN.Easing.Quadratic.Out) // 使用缓动函数
    .start();
</script>

2.2 创建Tween实例

创建 Tween 实例之前，需要确定 Tween 的起始值和结束值。比如要让 div 元素从 0px 移动到 200px，我们需要确定 div 元素的样式：

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: red;
}

然后在 JavaScript 中创建 Tween 实例：

var div = document.querySelector('div');
var from = { left: 0 };
var to = { left: 200 };

// 创建 Tween 实例
var tween = new TWEEN.Tween(from)
  .to(to, 1000) // 运动时间：1000ms
  .onUpdate(() => {
    div.style.left = from.left + 'px'; // 更新 left 属性
  })
  .start(); // 开始动画

2.3 缓动函数

上面的代码中用到了缓动函数，Tween.js 提供了很多缓动函数供我们使用：

TWEEN.Easing.Linear.None：线性
TWEEN.Easing.Quadratic.In/Out/InOut：二次方
TWEEN.Easing.Cubic.In/Out/InOut：三次方
TWEEN.Easing.Quartic.In/Out/InOut：四次方
TWEEN.Easing.Quintic.In/Out/InOut：五次方
TWEEN.Easing.Sinusoidal.In/Out/InOut：正弦曲线
TWEEN.Easing.Exponential.In/Out/InOut：指数曲线
TWEEN.Easing.Circular.In/Out/InOut：圆形曲线
TWEEN.Easing.Elastic.In/Out/InOut：弹性曲线
TWEEN.Easing.Back.In/Out/InOut：超过范围的三次方

2.4 动画循环

发现动画只执行了一次，通常情况下动画需要循环执行，可以使用 Tween.js 提供的循环函数：

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
}

// 循环动画
animate();

3. Tween.js 封装

上述代码是非常基础的 Tween.js 动画实例，但是 Tween.js 支持更多的实例：比如支持多种动画实例组合、缓动函数自定义等等。为了更加方便使用，我们可以将 Tween.js 封装成一个简单的动画库：

var demo = {
  init() {
    console.log('init');
  },
  to(el, target, time, callback) {
    var from = {};
    for (var key in target) {
      from[key] = el[key];
    }

    var tween = new TWEEN.Tween(from)
      .to(target, time)
      .onUpdate(() => {
        for (var key in from) {
          el.style[key] = from[key] + 'px';
        }
      })
      .onComplete(() => {
        callback && callback();
      })
      .start();

    return tween;
  },
  from(el, target, time, callback) {
    var from = {};
    for (var key in target) {
      from[key] = target[key];
    }

    var tween = new TWEEN.Tween(from)
      .to(el, time)
      .onUpdate(() => {
        for (var key in from) {
          el.style[key] = from[key] + 'px';
        }
      })
      .onComplete(() => {
        callback && callback();
      })
      .start();

    return tween;
  },
  tos(els, targets, time, callback) {
    var tweens = [];

    for (var i = 0; i < els.length; i++) {
      var el = els[i];
      var target = targets[i];

      var from = {};
      for (var key in target) {
        from[key] = el[key];
      }

      var tween = new TWEEN.Tween(from)
        .to(target, time)
        .onUpdate(() => {
          for (var key in from) {
            el.style[key] = from[key] + 'px';
          }
        })
        .onComplete(() => {
          callback && callback(i, el);
        })
        .start();

      tweens.push(tween);
    }

    return tweens;
  },
  remove(tween) {
    tween.stop();
    delete tween.from;
    delete tween.to;
    delete tween.valuesStart;
    delete tween.valuesEnd;
  }
};

使用 this.init() 方法初始化 Tween.js：

demo.init();

demo.to() 方法用于 Tween 单个元素，demo.from() 方法用于 Tween 元素到某个值，demo.tos() 方法用于 Tween 多个元素。

3.1 示例1：单个元素Tween

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo1</title>
    <style>
      div {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/Tween.min.js"></script>
    <script>
      var div = document.querySelector('div');

      demo.to(div, { left: 200 }, 1000, () => {
        demo.from(div, { left: 0 }, 1000, () => {
          console.log('动画执行完成！');
        });
      });
    </script>
  </body>
</html>

我们首先用 Tween.js 将 div 元素向右移动 200px，然后再将其移动回左侧。

3.2 示例2：多个元素Tween

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo2</title>
    <style>
      .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/Tween.min.js"></script>
    <script>
      var els = document.querySelectorAll('.box');

      var targets = [];
      for (var i = 0; i < els.length; i++) {
        var el = els[i];
        targets.push({
          left: 200,
          top: (i + 1) * 50
        });
      }

      demo.tos(els, targets, 1000, (i, el) => {
        if (i === els.length - 1) {
          demo.tos(els, targets.reverse(), 1000, () => {
            console.log('动画执行完成！');
          });
        }
      });
    </script>
  </body>
</html>

我们首先将多个 div 元素向右移动 200px，然后再将其移动回左侧并按照层级顺序依次移动到不同的 top 段落上。

以上就是关于 Tween.js 的使用和封装的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js学习心得_一个简单的动画库封装tween.js - Python技术站