基于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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
js的一些常用方法小结
Jun 29 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
详解iframe与frame的区别
Jan 13 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
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
2019十大人气国漫
2020/03/13 国漫
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
php桥接模式应用案例分析
2019/10/23 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Django在win10下的安装并创建工程
2017/11/20 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
社区庆中秋节活动方案
2014/02/07 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
Sql Server之数据类型详解
2022/02/28 SQL Server