GSAP学习（一）

谜亚星
153 阅读4分钟

想学一下GSAP动画，但是网上找到的几乎都是官网搬运示例。资料比较少。所以把学习过程整理下，算是一个参考。官网gsap.com/

GSAP是一个目前已经开源的动画库，主要是通过对元素的属性进行细粒度的控制，包括时间，执行顺序等，来完成一个动画。GSAP可以控制几乎所有的CSS属性，利用官方API，只需要关心数据的改变就可以，不需要写复杂的CSS和JS了。

GSAP的基础被叫做tween，可以理解成动画的一帧或是一个状态。一般来说，网页上的元素都会有一些CSS的样式，这就是该元素的初始状态。动画就是从一个状态向另一个状态的改变。官方提供了四种方法。

to方法，就是从初始状态向另一种状态转变

<script setup>
import { onMounted } from 'vue'
import { gsap } from 'gsap'
onMounted(() => {    
    gsap.to(".box", {        
        x: 40,        
        backgroundColor: "#00bae2",    
    })
})
</script>

from方法，从定义的状态向初始状态转变，写法上与上面一致

fromTo方法，同时定义初始状态和终止状态，所以它需要三个参数，第一个是元素，第二个是from状态，第三个是to状态

<script setup>
import { onMounted } from 'vue'
import { gsap } from 'gsap'
onMounted(() => {    
    gsap.fromTo(".box", {        
        x: 40,        
        backgroundColor: "#00bae2",    
    },{        
        x: 500,        
        backgroundColor: "#35f47f",
    })
})
</script>

set方法，直接将一个元素置为设定的状态，从官方示例看可以理解为持续时间为0的动画，写法与to一致

上面四个方法第一个参数都是可以获取到的，实际的元素。可以是一个class或者id的字符串，也可以document.querySelector获取到的元素，还可以是vue中ref的引用。甚至是一个普通对象，vue中ref定义的响应式对象。都可以用GSAP控制。

因为要获取实际的dom元素，所以GSAP的方法在vue中要写在onMounted中。

vue中如果有在style中设置的css属性和GSAP中设置的重复，会在进入网页时看到多余的动画效果，例如下面

<template>    
<div class="box green" ref="refer"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { gsap } from 'gsap'
const refer = ref(null)
onMounted(() => {    
    gsap.fromTo(refer.value, {        
        x: 40,        
        backgroundColor: "#00bae2",    
    }, {        
        x: 500,        
        backgroundColor: "#35f47f",        
        duration: 20    
    })
})
</script>
<style scoped>
.box {       
    width: 100px;    
    height: 100px;    
    background-color: #101010;    
    transform: translate(1000px, 0px);
}
</style>

可以看到box从1000px快速到40px再到500px。我的解决方法是不去设置，完全由GSAP控制。还可以用透明度，先隐藏再展示。

设置动画的属性时，除了css属性外，还有一些特殊的。

x, y, z 表示translate中的x轴，y轴，z轴，它们的值可以一个数字，单位默认px，，也可以是‘50%’，‘100vw’这样的字符串，还可以是‘+=50’，表示比前一个状态多50px，’-=‘就是比前一个状态少。还可以是一个返回数字或字符串的函数

onComplete，onCompleteParams，onInterrupt，onInterruptParams，onRepeat，onRepeatParams，onReverseComplete，onReverseCompleteParams，onStart，onStartParams，onUpdate，onUpdateParams，这些都是动画运行到某一时刻的回调函数，分别是，完成时，中断时，重复时，反方向完成时，开始时和更新时。params是一个数组，是回调函数的入参。

callbackScope是上面回调函数的this指向，所以回调函数尽量写function形式，而不是箭头函数。回调函数的this默认是当前动画的引用，可以用callbackScope改变

data是当前动画引用中的data属性

delay是延迟，动画延迟几秒后执行

duration是动画执行时间，默认0.5秒

ease动画运动曲线，默认power1.out。它的值可以看这里gsap.com/resources/g…
里面也可以自定义曲线

id，方便gsap.getById()，快速获取动画实例

immediateRender，是实例化时便开始执行动画，默认是false

lazy，延迟，默认是true

inherit，是否继承由gsap.defaults()定义的默认值，默认是true

overWrite，重写，默认false

paused，暂停，动画创建成功后会暂停播放。默认false

repeat，动画重复执行次数，默认为0，-1代表一直重复

repeatDelay，动画重复执行前等待时间，单位秒

repeatRefresh，动画重复执行前刷新初始化的值，例如x等。但是duration，delay，stagger不会刷新

reversed，反方向开始运行动画

runBackwards，反转动画，也就是to和from反过来

stagger，定义了多个目标执行动画的话，可以用这个属性让他们交错执行，具体会在后面时间轴中讲到

startAt：可以用来定义动画目标的初始值

yoyo：让动画可以做来回的运动

yoyoEase：定义动画来回运动的曲线

keyFarmes：定义动画关键帧，只能用在to方法中

除此之外，这些属性的值还可以使用函数来计算得出，也可以用GSAP的内置函数。例如“radnom(-100,100)”，虽然写作字符串，但在GSAP中会被看作是取-100到100的随机数。

暂时先写这么多，官方文档地址gsap.com/docs/v3/GSA…

我觉得目前在大部分人的工作中其实用不到GSAP，因为国内一直都是重工程轻交互。而且做动画作为一个纯粹的创意行业，即使学得再多，想不出来就是想不出来。而且GSAP的功能和配置项众多，在有AI翻译的今天，大家有需要直接去官网查找就行了。所以后面可能会写的简单一点，主要以知道有对应的功能就行。

如果有不对的地方欢迎指出。

avatar
文章
阅读
粉丝