国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

基于Vue過渡狀態實例講解

2019-11-19 15:27:28
字體:
來源:轉載
供稿:網友

前面的話

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.Colornew 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過渡狀態實例講解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 三明市| 华容县| 黎平县| 广西| 伊宁市| 赤城县| 湟中县| 上高县| 旅游| 崇州市| 秦皇岛市| 贞丰县| 栾川县| 海晏县| 五指山市| 沙田区| 定西市| 拉孜县| 玉溪市| 华安县| 五河县| 定南县| 乌鲁木齐县| 滨海县| 巍山| 独山县| 峨边| 密山市| 阳春市| 从江县| 仁寿县| 拉萨市| 大丰市| 化州市| 报价| 临猗县| 谢通门县| 上高县| 禹州市| 贵南县| 探索|