vue中使用tween.js的全过程

djlun
1,600 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

写在前面

最近学three.js写了很多动画，但都是通过自己手写，今天发现了一个动画插件tween.js，尝试使用，以下是我在vue中使用tween.js的全过程记录。

开始使用

  1. 安装

在vue中使用npm安装tween.js

npm i @tweenjs/tween.js
  1. 引入

在vue中引入tween.js

const TWEEN = require('@tweenjs/tween.js')
  1. 创建一个tween

参数说明

  • { x: 50 } 要加动画的元素在动画开始时的属性
  • { x: 400 } 要加动画的元素在动画结束时的属性
  • 4000 动画执行持续的毫秒数
  • .delay(1000) 动画执行延时毫秒数
  • easing(TWEEN.Easing.Elastic.InOut) 动画的速度曲线
  • .onUpdate(update) 传入一个函数update，在函数中可以拿到元素当前的属性，根据这些属性进行视图的更新
  • .start() 加上这个方法才会开始动画

以下完整代码执行后target元素就会从transform = translateX(50px)移动到transform = translateX(400px)，移动的速度曲线是Elastic.InOut，移动的持续时间是3000毫秒

代码说明

{ x: 50 } 中的x可以改成其他名字，可以是y，可以是z，可以是一个html元素，可以是任何自己定义的名字，只要在update中使用的时候没用错就行。也可以有多个，比如将{ x: 50 }改成{ x: 50, y: 80 }，并且将{ x: 400 }改成{ x: 400, y: 500 }，然后在update中将代码改成

target.style.transform = `translate(${object.x}px,${object.y}px)`;

这时target就会从transform = translate(50px,80px)移动到transform = translate(400px,500px)，移动的速度曲线是Elastic.InOut，移动的持续时间是3000毫秒

完整代码

<template>
  <div class="tween_box">
    <div id="target"></div>
  </div>
</template>

<script>
const TWEEN = require("@tweenjs/tween.js");

export default {
  data() {
    return {};
  },
  mounted() {
    this.initTWEEN();
    this.animate();
  },
  methods: {
    initTWEEN() {
      let target = document.getElementById("target");

      let tween = new TWEEN.Tween({ x: 50 })
        .to({ x: 400 }, 3000)
        .easing(TWEEN.Easing.Elastic.InOut)
        .onUpdate((object) => {
          target.style.transform = "translateX(" + object.x + "px)";
        })
        .start();
    },
    animate(time) {
      requestAnimationFrame(this.animate);
      TWEEN.update(time);
    },
  },
};
</script>

<style lang="less" scoped>
.tween_box {
  position: relative;
}
#target {
  position: absolute;
  top: 80px;
  left: 40px;
  width: 50px;
  height: 50px;
  background-color: tomato;
}
</style>

速度曲线介绍

tween.js包含很多种速度曲线，具体如下

image.png

可以根据自己想要展现的动画选择不同的速度曲线，应用时只需要将TWEEN.Easing.Elastic.InOut中的Elastic.InOut改成想要的速度曲线即可

曲线整理说明

  • Linear.None 速度匀速变化
  • Quadratic.In 速度越来越快（二次曲线）
  • Quadratic.Out 速度越来越慢（二次曲线）
  • Quadratic.InOut 速度先变快又变慢（二次曲线）
  • Cubic.In 速度越来越快（三次曲线）
  • Cubic.Out 速度越来越慢（三次曲线）
  • Cubic.InOut 速度先变快又变慢（三次曲线）
  • Quartic.In 速度越来越快（四次曲线）
  • Quartic.Out 速度越来越慢（四次曲线）
  • Quartic.InOut 速度先变快又变慢（四次曲线）
  • Quintic.In 速度越来越快（五次曲线）
  • Quintic.Out 速度越来越慢（五次曲线）
  • Quintic.InOut 速度先变快又变慢（五次曲线）
  • Sinusoidal.In （正弦曲线）
  • Sinusoidal.Out （正弦曲线）
  • Sinusoidal.InOut （正弦曲线）
  • Exponential.In （指数曲线）
  • Exponential.Out （指数曲线）
  • Exponential.InOut （指数曲线）
  • Circular.In （环形曲线）
  • Circular.Out （环形曲线）
  • Circular.InOut （环形曲线）
  • Elastic.In 动画开始会回弹一下
  • Elastic.Out 动画结束会回弹一下
  • Elastic.InOut 动画开始和结束会回弹一下
  • Back.In 动画开始会回弹一下
  • Back.Out 动画结束会回弹一下
  • Back.InOut 动画开始和结束会回弹一下
  • Bounce.In 动画开始会弹三下
  • Bounce.Out 动画结束会弹三下
  • Bounce.InOut 动画开始和结束会弹三下

写在最后

以上就是tween.js的使用全过程。

avatar
文章
阅读
粉丝