GSAP是一款优秀的动画库，能够使用很简单的方法构建出炫酷的动画效果。具体使用方法可以参考官方文档，最近在uniapp里面使用了GSAP，发现还是挺好用的，做一个小总结，记录一下：
一、选择器作用
选择器只能作用在view或者image标签上，如果是自己封装好的组件，或者是text标签，作用不了，也就是说，比如下面的代码:
//如果是自己封装的组件
<custom-comp class=".my-comp" />
//加入让这个组件沿着x轴移动100px
gsap.to('.my-comp',{ x:100})
//结论：根本移动不了
二、对于时间轴position参数的理解
//例如下面第三个参数表示当前动画执行的时机
// 插入到前一个添加到时间线上的动画的结束时间点
timeLine.to(".class", {x: 100}, ">");
开始 结束
|----------------------------------|>
时间轴
复杂一些的字符串，像是'+='和'-='这样的前缀，表达的是一种相对的值。当一个数字跟在'<' 或者'>'这两个符号后面，比如'<2'，这样的表示法相当于'<+=2'，比如下面这些写法：
'+=1' 表示当前时间线结束后再过1秒的时间点位置，相当于有个1秒的间隔
'-=1' 表示当前时间线结束时间点前1秒的时间点位置，相当于有个1秒的时间重叠
'myLabel+=2' 表示在myLable这个标记后过两秒的时间点位置
'<+=3' 表示前一个动画起始点后3秒的位置
'<3' 和上面一个意思（'<'和'>'直接跟数字，其实就是和'<+=3'或者'>+=3'是一样的意思）
'>-0.5' 前一个动画的结束时间点前0.5秒的时间点位置
注意，+= -= 这种是针对整个时间线动画来说的，而 >（结尾） 和 <（开头） 是针对前一个添加的动画来说的
三、对于一些动作较多的相对复杂的动画最好定义时间轴，所有动画都挂在这个时间轴上执行，例如：
//定义时间轴
let timeLine = gsap.timeline()
//通过时间轴执行动画
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
}
)
五、如何复位等待下一次动画执行
通常我们在实际业务中，经常会用到在执行某个操作之后调用一下动画效果的这种场景，就是每触发一个动作执行一次动画效果，我们可以使用时间轴的seek方法和pause方法做到等待下一次的动画执行：
//复位暂停在初始状态
timeLine.seek(0).pause()
//例如：
let timeLine = gsap.timeline()
timeLine.to('.refresh-icon', {
rotate: 360,
duration: 0.5,
onComplete: () => {
timeLine.seek(0).pause()
}
})
六、备注
官方文档英文的，看起来比较吃力，找到一个中文文档 ，对于基础部分的用法做了翻译，可以看看
网友评论