Государственные переходы
Государственные переходы
Система перехода Vue предлагает нам много способов оживить вход, выход и списки, но как насчет анимации самих наших данных? Например:
- Расчеты и цифры
- отображаемые цвета
- положения узлов SVG
- размеры и другие свойства элементов
Все эти данные либо уже хранятся в виде необработанных чисел, либо их можно преобразовать в числа. Когда мы это сделаем, мы сможем анимировать эти изменения состояния с помощью сторонних библиотек для анимации состояний в сочетании с компонентами Vue и системами реактивности.
Анимация состояния с наблюдателями
Наблюдатель позволяет нам анимировать изменения любого числового свойства в другое свойство. Пример как показано:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="animated-number-demo">
<input v-model.number="number" type="number" step="20">
<p>{{ animatedNumber }}</p>
</div><p>
JS
new Vue({
el: '#animated-number-demo',
data: {
number: 0,
tweenedNumber: 0
},
computed: {
animatedNumber: function() {
return this.tweenedNumber.toFixed(0);
}
},
watch: {
number: function(newValue) {
TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
}
}
})
Всякий раз, когда мы обновляем номер, изменение будет анимировано под вводом. Для чего-то, что не хранится непосредственно в виде числа, например, для любого допустимого цвета CSS: мы можем сделать это с помощью Color.js и Tween.js.
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="example-7">
<input
v-model="colorQuery"
v-on:keyup.enter="updateColor"
placeholder="Enter a color"
>
<button v-on:click="updateColor">Update</button>
<p>Preview:</p>
<span
v-bind:style="{ backgroundColor: tweenedCSSColor }"
class="example-7-color-preview"
></span>
<p>{{ tweenedCSSColor }}</p>
</div>
JS
var Color = net.brehaut.Color
new Vue({
el: '#example-7',
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 = ''
}
}
})
CSS
.example-7-color-preview {
display: inline-block;
width: 50px;
height: 50px;
}
Динамические переходы состояний
Как и в компонентах переходов Vue, переходы состояния поддержки данных могут обновляться в режиме реального времени, что полезно для создания прототипов.
Организация переходов в компоненты
Сложность экземпляра или компонента Vue может быстро возрасти при управлении переходами между состояниями. Хорошей новостью является то, что многие анимации могут быть извлечены в выделенные дочерние компоненты, как показано ниже:
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="example-8">
<input v-model.number="firstNumber" type="number" step="20"> +
<input v-model.number="secondNumber" type="number" step="20"> =
{{ result }}
<p>
<animated-integer v-bind:value="firstNumber"></animated-integer> +
<animated-integer v-bind:value="secondNumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div>
JS
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()
}
}
})
// All complexity has now been removed from the main Vue instance!
new Vue({
el: '#example-8',
data: {
firstNumber: 20,
secondNumber: 40
},
computed: {
result: function () {
return this.firstNumber + this.secondNumber
}
}
})
Мы можем использовать любую комбинацию стратегий перехода, описанных в этой серии, в дочерних компонентах, а также те, которые предлагаются встроенной системой перехода Vue.
Реализация дизайна в жизни
Оживить означает принести что-то к жизни. Однако когда дизайнеры создают значки, логотипы и талисманы, они создаются как изображения или статические SVG. Vue может помочь нам сделать нашу страницу приветствия, уведомления и индикаторы загрузки более эмоционально привлекательными, благодаря переходу между состояниями в таких вещах, как SVG, которые являются просто данными.
Новый контент: Composer: менеджер зависимостей для PHP , R программирования