js动画 css动画
效果图
GSAP特点
1.运行速度快
2.健全性:包含了很多基础动画
3.兼容性:像html svg react 新旧浏览器 移动端它都处理的很好
4.任何对象都可以实现动画
5.零依赖
6.轻量可扩展:将功能拆分成不同的动画模块,可以按需使用
GSAP提供4个库文件供用户使用
(1)TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。
(2)TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。
(3)TimelineMax：扩展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如repeat，repeatDelay，yoyo，currentLabel()等。TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。
(4)TweenMax：可以完成TimelineLite做的每一件事，并附加非必要的功能，如repeat，yoyo，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。
引入方式
cdn
npm
常用方法
to
to方法，从当前位置到指定位置，第一个参数是需要动画的对象，第二个是动画参数
from
from方法，从指定位置到当前位置，和to方法相对
timeline
GSAP可以创建timeline时间轴,更容易去控制动画和管理时间，时间轴提供了播放暂停反向倍速等几十个属性和方法
staggerFormTo
staggerFormTo是为多个目标创建一个有间隔的动画序列
第一个参数是需要动画的对象或数组
第二个是每个动画持续的秒数
第三个和第四个分别是起始动画参数
第五个参数每个动画开始的时间间隔
第六个插入排序动画的位置
第七个整个排序动画完成时触发的函数
主要代码
<script>
const tl1 = gsap.timeline()
tl1.to(
'.box-one', {
x: 100,
y: 100,
scaleX: 2,
rotation: 360,
duration: 1,
delay: 1,
onComplete: () => {
console.log('end')
}
}
).from(
'.box-two', {
x: 100,
y: 100,
scaleY: 2,
rotation: 360,
duration: 2,
delay: 1,
repeat: 0,
yoyo: true,
backgroundColor: '#fff'
}, '>-1'
)
setTimeout(() => {
tl1.pause()
}, 2500)
const tl2 = gsap.timeline()
tl2.staggerFromTo(
'span', .5, {
ease: Back.easeOut.config(1.7),
opacity: 0,
rotation: 180,
y: -100
}, {
ease: Back.easeOut.config(1.7),
opacity: 1,
rotation: 360,
y: () => {
return Math.random() * 50
}
}, .1, '+=0', () => {
console.log('tl2:end')
}
)
</script>
