CSS动画库-GSAP

• 项目中使用 gsap 的插件
  • 安装 gsap：

    import install gsap

  • 在页面中引入：

    import {插件名} from "gsap/all"

  • 在页面中注册：

    gsap.registerPlugin(插件名)

  • 具体按文档，不是插件可以直接调用

Draggable

问题归纳

• Q1: 使用”-=”时怎么控制到某一程度不在减少
• A1: “-=”, “+=”用来控制变量缓慢增加和减少，遇到如缩放到一定程度不想继续缩小，可以定制一个变量，在回调中控制变量的大小
• 示例片段：

  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',
  			})
  		}
  	},
  })