CSS动画库-GSAP

• 项目中使用 gsap 的插件
  • 安装 gsap：import install gsap
  • 在页面中引入：import {插件名} from “gsap/all”
  • 在页面中注册：gsap.registerPlugin(插件名)
  • 具体按文档，不是插件可以直接调用

Draggable

问题归纳

• 使用”-=”时怎么控制到某一程度不在减少

• “-=”, “+=”用来控制变量缓慢增加和减少，遇到如缩放到一定程度不想继续缩小，可以定制一个变量，在回调中控制变量的大小

• 示例片段：

let num = 1 // 空值缩小时到0.3后不再继续缩小
Observer.create({
	target: '.octangonal',
	type: 'wheel,pointer',
	wheelSpeed: 0.5,
	onWheel: (res) => {
		if (res.deltaY > 0) {
			gsap.from('.octangonal', {
				scale: num,
				onStart() {
					if (num >= 0.3) {
						num -= 0.1
					}
				},
			})
		} else {
			gsap.from('.octangonal', {
				scale: '+=0.1',
			})
		}
	},
})