tween.js--使用/教程/实例

最新推荐文章于 2024-08-13 08:09:34 发布

IT利刃出鞘

最新推荐文章于 2024-08-13 08:09:34 发布

阅读量4k

点赞数 2

分类专栏： JavaScript 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/feiying0canglang/article/details/110675866

版权

JavaScript 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

原文网址：tween.js--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍JavaScript的动画库twween.js的用法。

Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动画效果。

那么对于数据元素本身的动效呢？包括数字和运算、颜色的显示、SVG 节点的位置、元素的大小和其他的属性等。所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态

官网

[翻译] tween.js 中文使用指南 //对应的英文指南

Vue+tween.js

1.安装tween.js

在工程目录下执行：
npm install @tweenjs/tween.js //这是新版，老版是：npm install tween.js

2. 导入

<script>
import Tween from "@tweenjs/tween.js"
export default {
  // xxx
}
</script>

实例(输入数字，显示渐变效果)

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/compA',
      name: 'compA',
      component: CompA
    }
  ]
})

components/CompA.vue

<template>
  <div class="compA">
    <input v-model.number="num" type="number" step="20">
    <p>{{ animatedNumber }}</p>
  </div>
</template>

<script>
import TWEEN from "@tweenjs/tween.js";

export default {
  data() {
    return {
      num: 0,
      animatedNumber: 0
    }
  },
  watch: {
    num: function (newValue, oldValue) {
      this.myTween(newValue, oldValue)
    }
  },
  methods: {
    myTween(newValue, oldValue) {
      let vm = this;
      const animate = function () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate);
        }
      }

      new TWEEN.Tween({tweeningValue: oldValue})
        .to({tweeningValue: newValue}, 500)
        .onUpdate((object) => {
          vm.animatedNumber = object.tweeningValue.toFixed(0)
        })
        .start()

      animate();
    }
  }
}
</script>

<style scoped>
</style>

注意

不同版本Tween的onUpdate问题

@tween/tween.js：里边的回调函数，第一个参数为Tween对象。
（不能像下边tween.js那样写，否则this.tweeningNumber.toFixed(0)会报错：Error in callback for watcher "num": "TypeError: Cannot read property 'toFixed' of undefined"）
//我不会告诉你，我查这个问题查了一天😂

tween.js：需要这么写：

new TWEEN.Tween({ tweeningNumber: oldValue })
	.easing(TWEEN.Easing.Quadratic.Out)
	.to({ tweeningNumber: newValue }, 500)
	.onUpdate(function () {
	  vm.animatedNumber = this.tweeningNumber.toFixed(0)
	})
	.start();

测试

访问：http://localhost:8080/#/compA