GSAP是一款優(yōu)秀的動畫庫择份，能夠使用很簡單的方法構(gòu)建出炫酷的動畫效果。具體使用方法可以參考官方文檔烫堤，最近在uniapp里面使用了GSAP荣赶，發(fā)現(xiàn)還是挺好用的，做一個小總結(jié)鸽斟，記錄一下：
一拔创、選擇器作用
選擇器只能作用在view或者image標簽上，如果是自己封裝好的組件富蓄，或者是text標簽剩燥，作用不了，也就是說，比如下面的代碼:
//如果是自己封裝的組件
<custom-comp class=".my-comp" />
//加入讓這個組件沿著x軸移動100px
gsap.to('.my-comp',{ x:100})
//結(jié)論：根本移動不了
二灭红、對于時間軸position參數(shù)的理解
//例如下面第三個參數(shù)表示當前動畫執(zhí)行的時機
// 插入到前一個添加到時間線上的動畫的結(jié)束時間點
timeLine.to(".class", {x: 100}, ">");
開始 結(jié)束
|----------------------------------|>
時間軸
復(fù)雜一些的字符串侣滩，像是'+='和'-='這樣的前綴，表達的是一種相對的值变擒。當一個數(shù)字跟在'<' 或者'>'這兩個符號后面君珠，比如'<2'，這樣的表示法相當于'<+=2'娇斑，比如下面這些寫法：
'+=1' 表示當前時間線結(jié)束后再過1秒的時間點位置策添，相當于有個1秒的間隔
'-=1' 表示當前時間線結(jié)束時間點前1秒的時間點位置，相當于有個1秒的時間重疊
'myLabel+=2' 表示在myLable這個標記后過兩秒的時間點位置
'<+=3' 表示前一個動畫起始點后3秒的位置
'<3' 和上面一個意思（'<'和'>'直接跟數(shù)字毫缆，其實就是和'<+=3'或者'>+=3'是一樣的意思）
'>-0.5' 前一個動畫的結(jié)束時間點前0.5秒的時間點位置
注意唯竹，+= -= 這種是針對整個時間線動畫來說的，而 >（結(jié)尾） 和 <（開頭） 是針對前一個添加的動畫來說的
三悔醋、對于一些動作較多的相對復(fù)雜的動畫最好定義時間軸摩窃，所有動畫都掛在這個時間軸上執(zhí)行兽叮，例如：
//定義時間軸
let timeLine = gsap.timeline()
//通過時間軸執(zhí)行動畫
timeLine.to('.mark-icon', {
rotate: 360,
duration: 1,
scale: 1.2,
yoyo: true,
repeat: -1,
stagger: 0.2
})
.to()
.fromTo()
...
四芬骄、從一個位置精確移動到另一個位置
1.可以使用uniapp里面的獲取目標位置的坐標點
//例如：
//獲取界面元素的基本信息
async getDomElementBaseInfo(selector, pageObj) {
return new Promise((resolve) => {
let query = uni.createSelectorQuery().in(pageObj)
query.select(selector).boundingClientRect()
query.exec((res) => {
if (res && res[0]) {
//得到left、top鹦聪、等位置信息
resolve(res[0])
} else {
resolve(false)
}
})
})
}
2.然后通過fromTo方法將物體移動到指定位置
//示例代碼
//例如：
let timeLine = gsap.timeline()
timeLine
.fromTo(
currentSelector,//當前操作的對象的選擇器
{
left: this.currentPos.left,
top: this.currentPos.top
},
{
left: this.targetPos.left,
top: this.targetPos.top,
duration: 0.5
}
)
五账阻、如何復(fù)位等待下一次動畫執(zhí)行
通常我們在實際業(yè)務(wù)中，經(jīng)常會用到在執(zhí)行某個操作之后調(diào)用一下動畫效果的這種場景泽本，就是每觸發(fā)一個動作執(zhí)行一次動畫效果淘太，我們可以使用時間軸的seek方法和pause方法做到等待下一次的動畫執(zhí)行：
//復(fù)位暫停在初始狀態(tài)
timeLine.seek(0).pause()
//例如：
let timeLine = gsap.timeline()
timeLine.to('.refresh-icon', {
rotate: 360,
duration: 0.5,
onComplete: () => {
timeLine.seek(0).pause()
}
})
六、備注
官方文檔英文的规丽，看起來比較吃力蒲牧，找到一個中文文檔 ，對于基礎(chǔ)部分的用法做了翻譯赌莺，可以看看
