基于Vue过渡状态实例讲解


Posted in Javascript onSeptember 14, 2017

前面的话

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过渡状态实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
js Date概念详细介绍
Nov 22 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 #Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 #Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 #Javascript
对于js垃圾回收机制的理解
Sep 14 #Javascript
使用SVG基本操作API的实例讲解
Sep 14 #Javascript
JSON 数据格式详解
Sep 13 #Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 #Javascript
You might like
php 带逗号千位符数字的处理方法
2012/01/10 PHP
解析php类的注册与自动加载
2013/07/05 PHP
php魔术变量用法实例详解
2014/11/13 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
利用Python演示数型数据结构的教程
2015/04/03 Python
Python selenium 三种等待方式解读
2016/09/15 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python实现滑雪者小游戏
2020/02/22 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
个人求职简历中英文自我评价
2013/12/16 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
公司捐书倡议书
2015/04/27 职场文书
航班延误投诉信
2015/07/02 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL