1.GSAP簡介
GSAP（GreenSock Animation Platform）是一個專業(yè)的動畫庫股缸，可以用它完成你想要的各種效果
image
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.動畫結(jié)構(gòu)
TweenMax.to(target,duration,vars)
**從當(dāng)前狀態(tài)過渡到指定狀態(tài) vars **
target //動畫目標(biāo)對象
duration //動畫持續(xù)時間刃宵，單位秒
vars //動畫參數(shù)（CSS屬性、延遲、重復(fù)次數(shù)等）
new TweenMax(box,3,{ //從當(dāng)前狀態(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 過渡到結(jié)束以后的狀態(tài) vars2 **
- vars1 初始動畫參數(shù)（CSS屬性龙填、延遲封断、重復(fù)次數(shù)等）
- vars2 結(jié)束以后的動畫參數(shù)（CSS屬性、延遲帆焕、重復(fù)次數(shù)等）
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)
從當(dāng)前狀態(tài)過渡到指定狀態(tài) vars ,與 to() 不同的是它可以完成多個目標(biāo)對象的過渡不恭，并且多了四個全新的參數(shù)
同時還有兩個類似的方法為 staggerFrom() , staggerFromTo() 同理叶雹，后面不再贅述
target //動畫目標(biāo)對象财饥，可以有多個，以數(shù)組方式傳入
stagger //每個動畫的起始時間間隔
onCompleteAll //當(dāng)所有顯示對象都完成動畫后要調(diào)用的函數(shù)
onCompleteAllParams //onCompleteAll函數(shù)的參數(shù)折晦，以數(shù)組形式傳入
onCompleteAllScope //onCompleteAll函數(shù)的作用域钥星，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)
設(shè)置 delay 秒以后觸發(fā)一個回調(diào)函數(shù)，有點setTimeout的感覺
delay //要延遲的秒數(shù)（或幀數(shù)满着，如果設(shè)置了useFrames:true）
callback //要延遲執(zhí)行的回調(diào)函數(shù)
params //傳遞給onComplete函數(shù)的參數(shù)谦炒，以數(shù)組形式傳入
scope //函數(shù)的作用域，this的指向漓滔，默認(rèn)為空
useFrames //設(shè)定延遲的時間模式是基于秒數(shù)還是幀數(shù) 编饺，默認(rèn)false：秒
new TweenMax.delayedCall(3,(params1,params2)=>{
console.log(params1 + params2)
},['8854','jack']) //3秒以后控制臺輸出 8854jack
-
TweenMax.set(target,vars)
立即設(shè)置目標(biāo)的屬性值而不產(chǎn)生過渡動畫，相當(dāng)于0的動畫時間
new TweenMax.set('.box',{ //沒有任何過渡動畫响驴，小方塊直接變紅
backgroundColor:'red'
})
作者：輝夜真是太可愛啦
鏈接：http://www.reibang.com/p/a8e150f0e569
來源：簡書
著作權(quán)歸作者所有透且。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處豁鲤。
