tween.js--使⽤教程实例
原⽂⽹址：
简介
说明
本⽂介绍JavaScript的动画库twween.js的⽤法。
Vue 的过渡系统提供了⾮常多简单的⽅法设置进⼊、离开和列表的动画效果。
那么对于数据元素本⾝的动效呢？包括数字和运算、颜⾊的显⽰、SVG 节点的位置、元素的⼤⼩和其他的属性等。所有的原始数字都被事先存储起来，可以直接转换到数字。做到这⼀步，我们就可以结合 Vue 的响应式和组件系统，使⽤第三⽅库来实现切换元素的过渡状态
官⽹
//对应的
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',javascript说明
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) {
}
},
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 = Fixed(0)
})
.start()
animate();
}
}
}
</script>
<style scoped>
</style>
注意
不同版本Tween的onUpdate问题
@tween/tween.js：⾥边的回调函数，第⼀个参数为Tween对象。
（不能像下边tween.js那样写，否则Fixed(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 = Fixed(0) })
.start();
测试
其他⽹址

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。