Velocity.js和GSAP

我們需要提升程式碼質量來留住使用者。作為使用者介面的建設者，我們的工作是迅速引導和引導使用者的注意力，指導他們如何有效地使用我們的應用程式。

1. 如何提升程式碼質量

• 定向聚焦

我們可以利用動畫的力量來集中使用者的注意力。視覺對運動的敏感度是人類大腦的一個核心，作為開發人員，我們可以利用這種對視覺運動的敏感性，以便將使用者的注意力引導到我們希望他們關注的元素上，這樣他們就更有可能採取我們希望他們採取的行動。

• 無縫流

太陽不會突然的出現在天空中，一定會有一個逐漸升起的過程，這是我們所認知的世界，遵循這樣的邏輯的事物會更容易的讓人接受。

現在網站中的非邏輯推理非常常見，當元素的狀態改變時，它們直接消失或者突然閃現，頁面的更替也是如此，或者頁面顯示的資料生硬的變化。時間的推移，這會導致使用者的認知疲勞。這時如果我們看到一個無縫流的網站（這類網站以一種模仿自然的優美方式來使用運動。達到無縫過度元素狀態、切換頁面以及流動的展現資料的變化），使用者會對我們應用程式的“世界”有一種熟悉感，會覺得心情舒暢，相反的傳統的網站會讓人覺得相對“劣質”。

• 頁面觸感

在無數的應用程式中，其中許多可能是相當日常和枯燥的，如果你讓你的使用者微笑，你就得到了一個粉絲。

一個定製的載入微調器，一個解壓觸感的按鈕，會減輕那些充斥著一堆文字的頁面給使用者帶來的負擔。如果做得好，這些令人愉快的觸控將使你的應用程式更加難忘，可以使你從你的競爭對手中脫穎而出

注意：動畫就像是在菜裡新增香料。太少了，菜就淡了；太多了，菜就毀了。像任何一頓美餐一樣，一個有效的動畫介面必須是平衡的。

2. Vue的transition元件

Vue提供transition的封裝元件使我們更容易的做到上述提到的關於優化程式碼的目的。

具體的用法可以直接參考官方文件

我們直接來看兩個個簡單的例子：

Demo1

 1<template>
 2<transitionname="slide-fade"mode="out-in">
 3<router-view/>
 4</transition>
 5</template>
 6<stylelanguage="less">
 7.slide-fade{
 8&-enter{opacity:0;transform:translateX(10px);}
 9&-leave-to{opacity:0;transform:translateX(-10px);}
10&-enter-active,&-leave-active{transition:all.2sease;}
11
 
}
12</style>

每當路由頁面跳入時，就成了一個非邏輯推理。一個簡單的解決方法是隨著時間的推移將DOM淡入檢視，為它們提供關於正在更改的內容的上下文。實現一個簡單的淡入過渡。

Demo2

 1<template>
 2<transition-groupname="staggered-fade"appear:css="false"
 3@beforeEnter="staggeredFadeInit"
 4@enter="staggeredFadeIn"
 5>
 6<router-linkkey="chapter"data-index='0'to="/chapter/">router-link</router-link>
 7<router-linkkey="offline"data-index='1'to="/offline/">router-link</router-link>
 8<router-linkkey="services"data-index='2'to="/services/1005.html">router-link</router-link>
 9<router-linkkey="xuecha"data-index='3'to="/xuecha/">router-link</router-link>
10</transition-group>
11</template>
12<script>
13exportdefault{
14methods:{
15staggeredFadeInit(el){
16el.style.opacity=0
17el.style.webkitTransform='translateX(15px)'
18},
19staggeredFadeIn(el,done){
20letdelay=el.dataset.index*200
21el.style.transition='all.3sease-out'
22setTimeout(()=>{
23el.style.opacity=1
24el.style.webkitTransform='translateX(0)'
25},delay)
26done()
27}
28}
29}
30</script>

當我們的需求變得更加獨特或複雜時，單憑css不容易實現的效果，我們可以使用JavaScript鉤子。

3. Velocity.js

Velocity是一個動畫引擎。它非常流暢，並且具有彩色動畫，變換，迴圈，緩動，SVG支援和滾動功能。可以與vue中translate元件的JavaScript鉤子相結合，讓我們更容易的實現複雜的動畫。

對上面的Demo2進行改造

安裝

1npmivelocity-animate

引入使用

 1<script>
 2importVelocityfrom'velocity-animate'
 3exportdefault{
 4methods:{
 5staggeredFadeInit(el){
 6el.style.opacity=0
 7el.style.webkitTransform='translateX(15px)'
 8},
 9staggeredFadeIn(el,done){
10Velocity(el,
11{
12opacity:1,
13webkitTransform:'translateX(0)'
14},
15{
16duration:1000,
17delay:el.dataset.index*200,
18easing:'easeOut',
19complete:done
20}
21)
22}
23}
24}
25</script>

不僅僅是在書寫格式上，Velocity為我們提供了許多便利。easing屬性中提供了許多過度效果，如下圖：

更多詳情可以參考Velocity.js詳細文件

4. GSAP

這裡還想給大家介紹一個非常強大和流行的動畫庫稱為GreenSock Animation Platform (GSAP)。面向現代web的專業級JavaScript動畫

它和Velocity有什麼區別呢？這個庫是一個強力的、高效能的庫，它使您能夠對JavaScript可以觸及的任何內容進行動畫製作，並且它在預設情況下消除了瀏覽器的不一致性。

也就是說不僅僅是dom元素的動畫，還能進行資料變化過度，時間線動畫等等其他的高效的動畫效果,包括（CSS屬性、canvas庫物件、SVG、React、Vue、通用物件等等），簡單地說，GSAP是這個星球上最強大的高效能javascript動畫庫。

安裝

1npminstallgsap

直接上例子Demo3.vue：

 1<template>
 2<transtionappear:css="false"
 3@before-enter="beforeEnter"
 4@enter="enter"
 5>
 6<div></div>
 7</transtion>
 8</template>
 9<script>
10importgsapfrom'gsap'
11exportdefault{
12methods:{
13beforeEnter(el){
14el.style.opacity=0
15el.style.transform='scale(0,0)'
16},
17enter(el,done){
18gsap.to(el,{
19duration:1,
20opacity:1,
21scale:1,
22ease:'bounce.out',
23onComplete:done
24})
25}
26}
27}
28</script>

這是一個簡單的元素過度動畫，gsap提供了許多實用的API,gsap.to()使元素過度到我們設定的狀態，gsap.from()可以設定元素出現的初始狀態，然後過度到元素的css設定樣式，等等…

下一個例子Demo4.vue:

 1<template>
 2<div>
 3<div:style="{width:tweenedNumber+'px'}"class="bar">
 4<span>{{tweenedNumber}}</span>
 5</div>
 6</div>
 7</template>
 8<script>
 9importgsapfrom'gsap'
10exportdefault{
11data(){
12return{
13number:0,
14tweenedNumber:0
15}
16},
17watch:{
18number(newValue){
19gsap.to(this.$data,{
20duration:1,
21ease:'circ.out'
22tweenedNumber:newValue
23})
24//這裡的this.$data使gsap可以操控我們的資料
25}
26},
27created(){
28setInterval(this.randomNumber,1500)
29},
30methods:{
31randomNumber(){
32this.number=Math.floor(Math.random()*(800-0))
33}
34}
35}
36</script>

這個例子中gsap操作了資料的過度變化，使number值的變化不那麼生硬，從而獲得了很好的使用者體驗。

GSAP的能力十分強大，更多詳情可以參考GSAP詳細文件

長按二維碼關注公眾號