基于Vue過渡狀態(tài)實例講解

更新時間：2017年09月14日 08:20:34 作者：小火柴的藍色理想

下面小編就為大家?guī)硪黄赩ue過渡狀態(tài)實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前面的話

Vue 的過渡系統(tǒng)提供了非常多簡單的方法設置進入、離開和列表的動效。那么對于數(shù)據(jù)元素本身的動效呢？包括數(shù)字和運算、顏色的顯示、SVG 節(jié)點的位置、元素的大小和其他的屬性等。所有的原始數(shù)字都被事先存儲起來，可以直接轉(zhuǎn)換到數(shù)字。做到這一步，我們就可以結(jié)合 Vue 的響應式和組件系統(tǒng)，使用第三方庫來實現(xiàn)切換元素的過渡狀態(tài)

狀態(tài)動畫

通過watcher，能監(jiān)聽到任何數(shù)值屬性的數(shù)值更新

<div id="animated-number-demo">
 <input v-model.number="number" type="number" step="20">
 <p>{{ animatedNumber }}</p>
</div>
<script src="Tween.js"></script>
<script src="vue.js"></script> 
<script>
new Vue({
 el: '#animated-number-demo',
 data: {
 number: 0,
 animatedNumber: 0
 },
 watch: {
 number: function(newValue, 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>

當把數(shù)值更新時，就會觸發(fā)動畫。這個是一個不錯的演示，但是對于不能直接像數(shù)字一樣存儲的值，比如 CSS 中的 color 的值，通過下面的例子來通過 Color.js 實現(xiàn)一個例子：

<div id="example">
 <input v-model="colorQuery" @keyup.enter="updateColor" placeholder="Enter a color">
 <button @click="updateColor">Update</button>
 <p>Preview:</p>
 <span :style="{ backgroundColor: tweenedCSSColor }" style="display: inline-block;width: 50px;height: 50px;"></span>
 <p>{{ tweenedCSSColor }}</p>
</div>
<script src="Tween.js"></script>
<script src="vue.js"></script> 
<script src="color.js"></script>
<script>
var Color = net.brehaut.Color
new Vue({
 el: '#example',
 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>

動態(tài)狀態(tài)轉(zhuǎn)換

就像 Vue 的過渡組件一樣，數(shù)據(jù)背后狀態(tài)轉(zhuǎn)換會實時更新，這對于原型設計十分有用。當修改一些變量，即使是一個簡單的 SVG 多邊形也可以實現(xiàn)很多難以想象的效果

<style>
svg,input[type="range"]{display:block;} 
</style>
<div id="app">
 <svg width="200" height="200">
 <polygon :points="points" fill="#41B883"></polygon>
 <circle cx="100" cy="100" r="90" fill=" transparent" stroke="#35495E"></circle>
 </svg>
 <label>Sides: {{ sides }}</label>
 <input type="range" min="3" max="500" v-model.number="sides">
 <label>Minimum Radius: {{ minRadius }}%</label>
 <input type="range" min="0" max="90" v-model.number="minRadius">
 <label>Update Interval: {{ updateInterval }} milliseconds</label>
 <input type="range" min="10" max="2000" v-model.number="updateInterval">
</div>
 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenLite.min.js"></script>
<script>
new Vue({
 el: '#app',
 data: function () {
 //默認有10條邊
 var defaultSides = 10;
 //默認地，stats = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
 var stats = Array.apply(null, { length: defaultSides })
  .map(function () { return 100 })
 return {
  stats: stats,
  points: generatePoints(stats),
  sides: defaultSides,
  minRadius: 50,
  interval: null,
  updateInterval: 500
 }
 },
 watch: {
 sides: function (newSides, oldSides) {
  //計算設置的邊數(shù)與默認的邊數(shù)的差值
  var sidesDifference = newSides - oldSides
  //如果大于默認邊數(shù)
  if (sidesDifference > 0) {
   //增加相應數(shù)量的隨機值到stats數(shù)組中
   for (var i = 1; i <= sidesDifference; i++) {
    this.stats.push(this.newRandomValue())
   }
  }else{
   //否則，計算出差值
   var absoluteSidesDifference = Math.abs(sidesDifference)
   //從stats數(shù)組末尾減少相應數(shù)量的數(shù)組值
   for (var i = 1; i <= absoluteSidesDifference; i++) {
    this.stats.shift()
   }
  }
 },
 stats: function (newStats) {
  TweenLite.to(
   this.$data, 
   this.updateInterval / 1000, 
   { points: generatePoints(newStats) }
  )
 },
 updateInterval: function () {
  this.resetInterval()
 }
 },
 mounted: function () {
 this.resetInterval()
 },
 methods: {
 //將stats里面的值都變成50-100的隨機值
 randomizeStats: function () {
  var vm = this
  this.stats = this.stats.map(function () {
  return vm.newRandomValue()
  })
 },
 newRandomValue: function () {
  //產(chǎn)生一個50-100的隨機半徑
  return Math.ceil(this.minRadius + Math.random() * (100 - this.minRadius))
 },
 //重啟定時器
 resetInterval: function () {
  var vm = this;
  clearInterval(this.interval);
  this.randomizeStats();
  this.interval = setInterval(function () { 
   vm.randomizeStats();
  }, this.updateInterval)
 }
 }
})

function valueToPoint (value, index, total) {
 var x  = 0
 var y  = -value * 0.9
 var angle = Math.PI * 2 / total * index
 var cos = Math.cos(angle)
 var sin = Math.sin(angle)
 var tx = x * cos - y * sin + 100
 var ty = x * sin + y * cos + 100
 return { x: tx, y: ty }
}
//計算polygon中的路徑點的值
function generatePoints (stats) {
 var total = stats.length
 return stats.map(function (stat, index) {
  var point = valueToPoint(stat, index, total)
  return point.x + ',' + point.y
 }).join(' ')
}
</script>

組件組織過渡

管理太多的狀態(tài)轉(zhuǎn)換會很快的增加 Vue 實例或者組件的復雜性，幸好很多的動畫可以提取到專用的子組件

<div id="example">
 <input v-model.number="firstNumber" type="number" step="20"> +
 <input v-model.number="secondNumber" type="number" step="20"> =
 {{ result }}
 <p>
 <animated-integer :value="firstNumber"></animated-integer> +
 <animated-integer :value="secondNumber"></animated-integer> =
 <animated-integer :value="result"></animated-integer>
 </p>
</div>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/vue.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/Tween.js"></script>
<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()
 }
 }
})
new Vue({
 el: '#example',
 data: {
 firstNumber: 20,
 secondNumber: 40
 },
 computed: {
 result: function () {
  return this.firstNumber + this.secondNumber
 }
 }
})
</script>

以上這篇基于Vue過渡狀態(tài)實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: