前端动画库GSAP 入门学习详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端动画库GSAP 入门学习详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简介：

GSAP的全名是 GreenSock Animation Platform

一直发展到今天已经是 3.x 版本，这是一个适用于现代浏览器的专业 Javascript 动画库

超过1100万个网站，其中包括超过50%的获奖网站!主要品牌都使用 GSAP

官网地址如下：

GSAP 3 Is Available Now! - Blog - GreenSock

Vue里面基于侦听器的动画，也是借助于GSAP。

GSAP 优点：

疯狂的快
异常的强大
兼容性好
······

缺点：

动画过多

GSAP基本使用

官网地址: https://greensock.com/gsap/

文档地址: https://greensock.com/get-started/

核心语法

GSAP 远在 flash 繁荣的时代就存在，所以核心是补间动画

GSAP 则是补间动画，主要有4个分类：

gsap.to()从元素的起始值开始，动画到我们指定的结束值
gsap.from() 反过来。我们指定起始值，动画到结束值
gsap.fromTo() - 我们定义起始值和结束值。
sap.set() - 立即设置属性 (无动画)

常见属性

GSAP	CSS	解释
x: 100	transform:translateX(100px)	水平移动
y: 100	transform:translateY(100px)	垂直移动
xPercent:-50	transform:translateX(-50%)	水平移动(元素宽度的百分比)
yPercent:-50	transform:translateY(-50%)	水平移动(元素高度的百分比)
rotation:360	transform:rotate(360deg)	旋转(度)
scale: 2	transform: scale(2, 2)	增大或减小大小
delay: 1		动画延迟时间单位是秒
duration : 3		动画持续时间单位是秒
repeat		动画重复多少次
yoyo	悠悠球	如果为true，则补间每隔一次重复将朝相反的方向运行。(像溜溜球)默认值:假
ease		ease
ease		交错，每个目标的动画开始之间的时间(以秒为单位)(如果提供了多个)

时间线 timeline

时间线是创建易于调整、有弹性的动画序列的关键。将补间添加到时间线时，默认情况下，补间将按添加顺序依次播放简单理解: 时间线可以让多组动画编排动作，从而控制整个序列。

位置参数

指定一个参数来构建动画时机时间的序列，简单理解就是多组动画之间的执行时机文章来源地址https://www.toymoban.com/news/detail-671200.html

let tl = gsap.timeline()
// 从时间轴的1秒开始(绝对)简单理解，1秒钟之后触发
tl.to(".green",{ x: 600,duration: 2 }，1);

// 在上一个动画的开始处插入，简单理解，上个动画开始，我也开始
tl.to(".purple",{ x: 600,duration: 1 },"<");
// 在上一个动画的开始处插入， 简单理解，上个动画结束，我才开始 (默认的)
// tl.to(".purple",{ x: 600, duration: 1 },">");

// 在时间线结束后1秒插入(间隔) 简单理解: 上个动画结束后1秒我开始
tl.to(".orange", { x: 600,duration: 1 },"+=1");
// 在时间线结束后1秒插入(间隔) 简单理解:上个动画结束前1秒，我就开始
// tl.to(".orange"，{ x: 600,duration: 1},"-=1");

到了这里，关于前端动画库GSAP 入门学习详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！