- Published on
gsap 的基本使用
- Authors
- Name
- Tsix
- Github
- Github
gsap 的基本使用
gsap 是一个动画库,不仅可以用在原生的js，也可以用于现在流行的前端框架;
目前最新的版本是 3.+ ; 下面的🌰也是基于3.+的 ;
快速开始
安装
推荐使用
npm包导入方式
npm i gsap
import gsap from 'gsap'
cdn 引入方式，如需要使用gsap的插件(),需要额外导入且注册 gsap cdn
<script src="https://cdn.bootcdn.net/ajax/libs/gsap/3.11.5/gsap.js"></script>
实现一个简单的demo
gsap.to('.grey', {
duration: 3,
x: 300,
})
gsap.to(dom, 状态对象)
dom : 元素节点，可以是一个也可以是多个;可以传
.dom, 也可以document.querySelectorAll('.dom')
状态对象,描述动画的状态(delay, duration, repeat, 回调事件 ... 后面会详细说道)
- gsap.to() 常用,元素从当前位置到目标位置
- gsap.from() 目标位置到初始位置
- gsap.fromTo() 需要定义两个状态的数据,从xx 到 xx
- gsap.set() 直接设置成想要的状态
动画状态
| 属性 | 作用 |
|---|---|
| duration | 动画时长,默认 .5 |
| delay | 延时,默认 .5 |
| repeat | 重复次数 |
| yoyo | 一直重复(a->b->b->a), 默认 false(a -> b , a -> b) |
| ease | 动画运动轨迹 |
| stagger | 多个动画时交错 |
| paused | 暂停动画 默认 false |
(运动轨迹详情)[https://greensock.com/docs/v3/Eases]
运动方式
| 属性 | css |
|---|---|
| x: 100 | transform: translateX(100px) |
| y: 100 | transform: translateY(100px) |
| rotation: 360 | transform: rotate(360deg) |
| rotationX: 360 | transform: rotateX(360deg) |
| rotationY: 360 | transform: rotateY(360deg) |
| skewX: 45 | transform: skewX(45deg) |
| skewY: 45 | transform: skewY(45deg) |
| scale: 2 | transform: scale(2, 2) |
| scaleX: 2 | transform: scaleX(2) |
| scaleY: 2 | transform: scaleY(2) |
| xPercent: -50 | transform: translateX(-50%) |
| yPercent: -50 | transform: translateY(-50%) |
| width: 100 | width: 100px |
| height: '10vh' | height: 10vh |
我还能制作什么动画？
几乎所有的属性
css 中的 color / backgroundColor / border / fontSize ... ; 需要注意的是 需要采用小驼峰的写法
SVG 也支持 width height fill strokecx opacity viewBox attr
时间线
ScrollTrigger
滚动触发动画，常用于滚动到xxx地方 触发动画
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)
gsap.to('.box', {
scrollTrigger: {
trigger: '.box', // box元素进入视口时触发
/*
markers: 开发期间标记，显示动画滚动开始结束的位置，，markers: true 默认值： {startColor: "green", endColor: "red", fontSize: "16px", fontWeigth: "normal", indent: 0} 可自定义其样式。
*/
markers: { startColor: 'green', endColor: 'red', fontSize: '12px' },
start: 'top 30%', // 动画开始位置，滚动到距视口顶部30%
end: 'top 20%', // 动画结束位置，滚动到距视口顶部20%
// pin: true, // 在动画区域内，这个元素的位置固定不动，会在底部添加padding
// pinSpacing: false, // pin的元素不在底部添加padding
/*
scrub: Boolean | Number
将动画的进度直接链接到滚动条上
*/
scrub: true,
onEnter: () => {
console.log('滚动到start位置触发')
},
onEnterBack: () => {
console.log('滚动超过end位置，再进入滚动区域触发')
},
onLeave: () => {
console.log('滚出end位置时触发')
},
onLeaveBack: () => {
console.log('滚出end位置，再滚回来超过start位置触发')
},
onUpdate: (self) => {
// 在start和end区域内滚动位置改变时触发
console.log(self)
},
/*
toggleAction: onEnter onLeave onBackEnter onBackLeave
在onEnter onLeave onBackEnter onBackLeave这四个位置的动画的方式
默认是： play none none none
可以使用的关键字有： play（播放）, pause（暂停）, resume（恢复）, reset（重置）, restart（重新开始）, complete（完成）, reverse（倒退）, none(无).
*/
toggleAction: 'play pause resume reset',
/*
toggleClass: String | Object
*/
toggleClass: { targets: '.box', className: 'box-pink' },
},
x: 100, // normal value
/**
* 可以通过函数获取值
* @param {*} index :跟.box数量有关，如box有两个,index 分别为 0 1
* @param {*} target : .box类的元素
* @param {*} targets : 数组
* @returns
*/
y: function (index, target, targets) {
//function-based value
return index * 50
},
})