pixijs H5游戏开发入门（七）利用 tween.js 实现动画指定时间运动到指定位置

时间：

分类：

pixijs

字数：

1.1k 字

时长：

大约需要 5 分钟

次数：

0 人阅读

本系列文章

本文编写时 pixijs 版本： v7.3.2
本文编写时 tween.js 版本： v21.0.0

问题

前面文章介绍了 GSAP 实现指定时间运动到指定位置需求。但是有个问题： GSAP 需要购买版权，不能商用。

tween.js

为避免版权问题，本文介绍另一个插件 tween.js 再来实现前文中的旋转动画。

tween.js 无版权问题，版权为 MIT 开源协议。

相比于 GSAP ， tween.js 没有强大的文档介绍和示例演示（github有提供示例源码，但是未找到在线地址），需要自己去翻看源码学习使用方法。

tween.js 使用方法

github: https://github.com/tweenjs/tween.js

中文文档：https://github.com/tweenjs/tween.js/blob/main/docs/user_guide_zh-CN.md

效果：

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pixijs入门示指定时间运动到指定位置</title>
    <script src="https://pixijs.download/v7.3.2/pixi.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/tween.js/21.0.0/tween.umd.js"></script>
    <style>
      html,
      body,
      div {
        padding: 0;
        margin: 0;
      }
      body,
      canvas {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div style="margin: 15px 0;">
      <button id="stop_1">暂停动画</button>
      <button id="start_1">播放动画</button>
      <button id="restart_1">重新开始</button>
    </div>
    <script>
      async function init() {
        // 创建一个 pixi 实例
        let app = new PIXI.Application({
          antialias: true, // 消除锯齿
          width: 300,
          height: 300,
          backgroundColor: 0x223355,
        });

        // 插入到 body 中
        document.body.appendChild(app.view);

        
        let line2 = new PIXI.Graphics();
        line2.lineStyle(4, 0xFFFF00, 1);
        line2.moveTo(0, 0);
        line2.lineTo(0, 120);
        line2.position.set(app.renderer.width / 2, app.renderer.height / 2); // 设置位置偏移
        line2.pivot.set(0, line2.height / 2); // 设置中心点
        // Sprite.anchor.set(0.5, 0.5); // 精灵的旋转中心需要通过 anchor 设置
        app.stage.addChild(line2);

        
        const rotate = { angle: 0 } // 从角度0开始

        const tween = new TWEEN.Tween(rotate, false) // 创建一个补间动画
          .to({ angle: 360 * 4 }, 3000) // 3秒钟移动到指定位置
          .easing(TWEEN.Easing.Quadratic.InOut) // 使用动画曲线
          .onUpdate(() => {
            console.log('onUpdate');
            // tween.js 更新
            line2.angle = rotate.angle;
          })
          .onComplete(() => {
            console.log('end');
          })
          .start() // 立即启动

        // Setup the animation loop.
        function animate(time) {
          // 如果动画处于暂停或者未播放状态，不再轮训
          if (tween.isPaused() === true || tween.isPlaying() === false) {
            return
          }
          tween.update(time);
          requestAnimationFrame(animate)
        }
        requestAnimationFrame(animate)

        document.querySelector('#stop_1').addEventListener('click', () => {
          // 停止动画
          tween.pause()
        })

        document.querySelector('#start_1').addEventListener('click', () => {
          // 播放动画
          if (tween.isPaused() === true) {
            // 如果动画处于暂停状态，才调用继续播放函数
            tween.resume()
            requestAnimationFrame(animate)
          }
        })

        document.querySelector('#restart_1').addEventListener('click', () => {
          // 重新开始动画
          tween.start()
          requestAnimationFrame(animate)
        })
      }

      init();
    </script>
  </body>
</html>

相比于 GSAP ， tween.js 内部没实现动画循环机制，需要手动使用循环事件 requestAnimationFrame 或者 setTimeout 实现循环调用绘制动画。

tween.js easing 效果

ease 效果支持 GSAP 与 tween.js 差别不大，支持以下值：

Linear.None（默认值）
Quadratic.InQuadratic.OutQuadratic.InOut
Cubic.InCubic.OutCubic.InOut
Quartic.InQuartic.OutQuartic.InOut
Quintic.InQuintic.OutQuintic.InOut
Sinusoidal.InSinusoidal.OutSinusoidal.InOut
Exponential.InExponential.OutExponential.InOut
Circular.InCircular.OutCircular.InOut
Elastic.InElastic.OutElastic.InOut
Back.InBack.OutBack.InOut
Bounce.InBounce.OutBounce.InOut
generatePow(1).IngeneratePow(1).OutgeneratePow(1).InOut

注意：以上列出的值需要添加 TWEEN.Easing. 前缀使用。

比如： Bounce.InOut 实际使用需要这样 TWEEN.Easing.Bounce.InOut！

效果演示：

TWEEN.Easing 运动速度曲线可参考： /2023-11-29/js-pixi-tween/example-02.html

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-11-29/js-pixi-tween/

如果您觉得文章不错，可以点击文章中的广告支持一下！