本文的內容大致與官網文檔內容相似挂谍，作者只是想自己學習記錄一下學習過程有额，加深印象朽基，敘述方式會盡可能地口頭話一點碰酝，想看官方文檔的可以點擊此處 GSAP官方文檔胀滚，完整的教程可以訪問我的個人主頁
1.GSAP簡介
GSAP（GreenSock Animation Platform）是一個專業(yè)的動畫庫趟济，可以用它完成你想要的各種效果
GSAP
2.使用方法
- 安裝GSAP
npm install gsap --save
- 在需要使用的地方引入
import {TweenMax} from 'gsap'
- GSAP的四個動畫庫
image
- 第一個案例
TweenMax()
<template>
<div>
<div class="box" ref="box"></div>
</div>
</template>
<script>
import {TweenMax} from 'gsap'
export default {
name: "test",
mounted(){
const box=this.$refs['box'];
new TweenMax(box,3,{
x:600,
alpha:0.4
})
}
}
</script>
<style lang="stylus" scoped>
.box{
width 200px
height 200px
background-color green
}
</style>
image
3.動畫結構
TweenMax.to(target,duration,vars)
**從當前狀態(tài)過渡到指定狀態(tài) vars **
target //動畫目標對象
duration //動畫持續(xù)時間，單位秒
vars //動畫參數（CSS屬性咽笼、延遲顷编、重復次數等）
new TweenMax(box,3,{ //從當前狀態(tài)過渡到右移600px并且透明度到0.4
x:600,
alpha:0.4
})
image
TweenMax.from(target,duration,vars)
從指定狀態(tài) vars 過渡到初始狀態(tài)
new TweenMax(box,3,{ //從右移600px并且透明度到0.4過渡到初始狀態(tài)
x:600,
alpha:0.4
})
image
TweenMax.fromTo(target,duration,vars1,vars2)
**從指定狀態(tài) vars1 過渡到結束以后的狀態(tài) vars2 **
- vars1 初始動畫參數（CSS屬性、延遲褐荷、重復次數等）
- vars2 結束以后的動畫參數（CSS屬性勾效、延遲、重復次數等）
new TweenMax.fromTo(box,3,{ //往右移動500px叛甫，并且透明度從0.2到1
x:0,
alpha:0.2
},{
x:500,
alpha:1
})
-
TweenMax.staggerTo(target,duration,vars,stagger,onCompleteAll,onCompleteAllParams,onCompleteAllScope)
從當前狀態(tài)過渡到指定狀態(tài) vars ,與 to() 不同的是它可以完成多個目標對象的過渡层宫，并且多了四個全新的參數
同時還有兩個類似的方法為 staggerFrom() , staggerFromTo() 同理，后面不再贅述
target //動畫目標對象其监，可以有多個萌腿，以數組方式傳入
stagger //每個動畫的起始時間間隔
onCompleteAll //當所有顯示對象都完成動畫后要調用的函數
onCompleteAllParams //onCompleteAll函數的參數，以數組形式傳入
onCompleteAllScope //onCompleteAll函數的作用域抖苦，this指向
tips:HTML中寫了多個<div class="box" ref="box"></div>
new TweenMax.staggerFromTo('.box',3,{
x:0,
alpha:0.2
},{
x:500,
alpha:1
},1)
image
-
TweenMax.delayedCall(delay,callback,params,scope,useFrames)
設置 delay 秒以后觸發(fā)一個回調函數毁菱，有點setTimeout的感覺
delay //要延遲的秒數（或幀數米死，如果設置了useFrames:true）
callback //要延遲執(zhí)行的回調函數
params //傳遞給onComplete函數的參數，以數組形式傳入
scope //函數的作用域贮庞，this的指向峦筒，默認為空
useFrames //設定延遲的時間模式是基于秒數還是幀數 ，默認false：秒
new TweenMax.delayedCall(3,(params1,params2)=>{
console.log(params1 + params2)
},['8854','jack']) //3秒以后控制臺輸出 8854jack
-
TweenMax.set(target,vars)
立即設置目標的屬性值而不產生過渡動畫窗慎，相當于0的動畫時間
new TweenMax.set('.box',{ //沒有任何過渡動畫物喷，小方塊直接變紅
backgroundColor:'red'
})
文末總結
本文大致羅列了在 vue 中如何使用 GSAP ，以及它的動畫結構遮斥，個人理解就是用的最多的基礎調用方式峦失，接下來作者還將繼續(xù)學習后面的內容
