gsap动画的简单使用

介绍

最近突然需要写一些包含多种动画的首页，偶然找到了gsap，发现是真的好用，这里对其一些api做下简单介绍。

正文

gsap是一个javascript动画库，可以让开发者通过简单的api完成非常复杂的动画，包含非常多种类型的动画的实现，比如css3动画，svg动画以及canvas、webgl等。

官网给出了大量的示例代码，可以前往查看

但是它的缺点就是有些功能是付费的🤷🏻‍♀️，比如SplitText、DrawSvg等功能，他们能实现非常炫酷的动画效果，有兴趣的可以自行购买使用。（反正我不买😺）

• 以下的介绍全部都是gsap3的内容。

使用

本次使用大概用到了以下几个api：to、from、timeline。
用到的插件为：ScrollTrigger、TextPlugin、MotionPathPlugin

插件

使用的插件都需要提前注册。

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { TextPlugin } from 'gsap/TextPlugin'
import { MotionPathPlugin } from 'gsap/MotionPathPlugin'

gsap.registerPlugin(ScrollTrigger, TextPlugin, MotionPathPlugin)

ScrollTrigger

ScrollTrigger为滚动操作的关联动画，用户可以根据滚动实现相关的动画。

gsap.to('div', {
  x: 100,
  scrollTrigger: {
    trigger: 'div', //触发滚动动画的元素
    start: 'start bottom', // 动画开始执行的时机（开始/结束）
    // 四个字符串代表四个时机：onEnter onLeave onEnterBack onLeaveBack
    // 每个时机所有的动画类型：play pause resume reset restart complete reverse none 
    toggleAction: 'play none none reverse', // 动画对应时间触发的动作  
    scrub: true, // 是否跟随鼠标滚动执行动画，边滚动边执行动画
  }
})

官网例子

TextPlugin

TextPlugin为一些文字动画的插件，我理解的是文字动画的基础版。
暂时没有用到啥特殊的配置。
官网例子

MotionPathPlugin

MotionPathPlugin为路径动画，可以通过svg的path实现相关的动画。

gsap.to('div', {
  motionPath: {
    path: "#path", // svg路径元素
    align: "#path", // 对齐到路径
    autoRotate: true, // 自动旋转，会跟随路径自动旋转动画元素
    alignOrigin: [0.5, 0.5] // 与路径的重合程度，当前设置表示居中  
  }
})

官网例子

to

表示元素从当前状态转换为to指定的一些动画状态。
比如，将元素移动到(100, 100)，并且opacity从1到0。

gsap.to('div', {
  x: 100,
  y: 100,
  opacity: 0,
})

下面介绍其中一些常用的属性，与下面from方法的参数基本相同。

const Option = {
  duration: 1, // 动画执行的时间
  repeat: 1, // 重复次数，-1无限制
  repeatDelay: 1, // 二次执行动画的延迟时间  
  yoyo: true, // 动画是否重复往返执行，比如：从1-2，然后从2-1  
  stagger: 0.5, // 多个动画错开执行的时间间隔  
  ease: 'power1.inOut', // 动画的速度曲线，详细可以查看文件 /node_modules/gsap/types/ease.d.ts  
  // css 属性
  scale: 1 // 缩放
  rotate: 1, // 旋转
  transformOrigin: 'center', // 变换中心点
  width: 100, // 宽度 100vh 100px 100% 都可以
  height: 100, // 高度同理
  visibility: 'visible', // 显示隐藏  
  backgroundColor: 'red', // 颜色
}

from

与to相反，表示元素从from状态转为元素当前状态。

timeline

timeline可以理解成上述api的一个集合。
有时可能需要按照时间顺序，按顺序的执行一系列的动画任务，这将是很有帮助的。

比如一个矩形元素，首先x移动到100，接着y移动到100，即以下代码：

gsap.timeline()
.to('div', {
  x: 100
})
.to('div', {
  y: 100
})

官网示例

其他

gsap的动画能力非常的强，但是也有限制性，以下为本人观点，不一定正确：
其实现动画的css能力与transition有非常大的关系，只有能响应transition的属性才能形成动画，比如width、height、backgroundColor、scale等。
但是有些属性是无法响应的，比如display，当设置其从block变为none时，为瞬间变化，无动画效果。

结束

gsap的功能非常的强大，以上使用的功能只是皮肤，各位可以自己去琢磨。
顺便看下本人使用的效果：gh-pages或私人服务器。