学习心得,
组件(六),
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>状态过渡</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--状态过渡-->
<!--Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。-->
<!--那么对于数据元素本身的动效呢，比如：-->
<!--数字和运算-->
<!--颜色的显示-->
<!--SVG 节点的位置-->
<!--元素的大小和其他的属性-->
<!--所有的原始数字都被事先存储起来，可以直接转换到数字。-->
<!--做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。-->
<!--状态动画与观察者-->
<!--通过观察者我们能监听到任何数值属性的数值更新。-->
<!--可能听起来很抽象，所以让我们先来看看使用 Tweenjs 一个例子：-->
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<div id="app-1">
<input v-model.number="number" type="number" step="20">
<p>{{ animatedNumber }}</p>
</div>
<hr>
<script>
var app1 = new Vue({
el:"#app-1",
data:{
number:0,
animatedNumber:0
},
watch:{
number:function(newValue ,oldValue){
console.log(newValue);
console.log(oldValue);
var vm = this
function animate(){
if(TWEEN.update()){
requestAnimationFrame(animate)
}
}
new TWEEN.Tween({tweeningNumber:oldValue})
.easing(TWEEN.Easing.Quadratic.Out)
.to({tweeningNumber: newValue},500)
.onUpdate(function(){
vm.animatedNumber = this.tweeningNumber.toFixed(0)
})
.start()
animate()
}
}
})
</script>
<!--当你把数值更新时，就会触发动画。-->
<!--这个是一个不错的演示，但是对于不能直接像数字一样存储的值，-->
<!--比如 CSS 中的 color 的值，通过下面的例子我们来通过 Color.js 实现一个例子：-->
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>
<div id="app-2">
<input
v-model="colorQuery"
v-on:keyup.enter="updateColor"
placeholder="Enter a color"
>
<button v-on:click="updateColor">Update</button>
<p>Preview:</p>
<span
v-bind:style="{ backgroundColor: tweenedCSSColor }"
class="example-7-color-preview"
></span>
<p>{{ tweenedCSSColor }}</p>
</div>
<hr>
<script>
var Color = net.brehaut.Color
new Vue({
el: '#app-2',
data: {
colorQuery: '',
color: {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
tweenedColor: {}
},
created: function () {
this.tweenedColor = Object.assign({}, this.color)
},
watch: {
color: function () {
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween(this.tweenedColor)
.to(this.color, 750)
.start()
animate()
}
},
computed: {
tweenedCSSColor: function () {
return new Color({
red: this.tweenedColor.red,
green: this.tweenedColor.green,
blue: this.tweenedColor.blue,
alpha: this.tweenedColor.alpha
}).toCSS()
}
},
methods: {
updateColor: function () {
this.color = new Color(this.colorQuery).toRGB()
this.colorQuery = ''
}
}
})
</script>
<style>
.example-7-color-preview {
display: inline-block;
width: 50px;
height: 50px;
}
</style>
<!--把过渡放到组件里-->
<!--管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。-->
<!--我们来将之前的示例改写一下：-->
<div id="app-3">
<input v-model.number="firstNumber" type="number" step="20"> +
<input v-model.number="secondNumber" type="number" step="20"> =
{{ result }}
<p>
<animated-integer v-bind:value="firstNumber"></animated-integer> +
<animated-integer v-bind:value="secondNumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div>
<hr>
<script>
// 这种复杂的补间动画逻辑可以被复用
// 任何整数都可以执行动画
// 组件化使我们的界面十分清晰
// 可以支持更多更复杂的动态过渡
// 策略。
Vue.component('animated-integer', {
template: '<span>{{ tweeningValue }}</span>',
props: {
value: {
type: Number,
required: true
}
},
data: function () {
return {
tweeningValue: 0
}
},
watch: {
value: function (newValue, oldValue) {
this.tween(oldValue, newValue)
}
},
mounted: function () {
this.tween(0, this.value)
},
methods: {
tween: function (startValue, endValue) {
var vm = this
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween({ tweeningValue: startValue })
.to({ tweeningValue: endValue }, 500)
.onUpdate(function () {
vm.tweeningValue = this.tweeningValue.toFixed(0)
})
.start()
animate()
}
}
})
// 所有的复杂度都已经从 Vue 的主实例中移除！
new Vue({
el: '#app-3',
data: {
firstNumber: 20,
secondNumber: 40
},
computed: {
result: function () {
return this.firstNumber + this.secondNumber
}
}
})
// 我们能在组件中结合使用这一节讲到各种过渡策略和 Vue 内建的过渡系统。
// 总之，对于完成各种过渡动效几乎没有阻碍。
</script>
</body>
</html>
