基于Vue过渡状态实例讲解

前面的话

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

状态动画

通过watcher，能监听到任何数值属性的数值更新

<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>

当把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如 css 中的 color 的值，通过下面的例子来通过 color.js 实现一个例子：

<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>

动态状态转换

就像 vue 的过渡组件一样，数据背后状态转换会实时更新，这对于原型设计十分有用。当修改一些变量，即使是一个简单的 svg 多边形也可以实现很多难以想象的效果

<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) {
  //计算设置的边数与默认的边数的差值
  var sidesdifference = newsides - oldsides
  //如果大于默认边数
  if (sidesdifference > 0) {
   //增加相应数量的随机值到stats数组中
   for (var i = 1; i <= sidesdifference; i++) {
    this.stats.push(this.newrandomvalue())
   }
  }else{
   //否则，计算出差值
   var absolutesidesdifference = math.abs(sidesdifference)
   //从stats数组末尾减少相应数量的数组值
   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 () {
  //产生一个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>

组件组织过渡

管理太多的状态转换会很快的增加 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过渡状态实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。