一、前言
今天还是带大家实验gsap库,跟to、from、fromTo不同,今天的set和quickSetter都是0过渡动画,等于是直接修改元素状态的。
二、函数
1、 gsap.set
gsap.set(参数1,参数2) 就是告诉动画对象,是从当前状态立刻变成什么状态
- 参数1告知需要绑定哪个动画对象
- 参数2就是要告知对象将变成的状态
官网上给了例子,说这两个的效果是一致的,就很明显的说明了,set函数就是to函数设置duration为0的时候。
gsap.set(".class", {x: 100, y: 50, opacity: 0});
gsap.to(".class", {duration: 0, x: 100, y: 50, opacity: 0});
两者都支持多个对象的写法。
比如下面这种写法,可以同时设置obj1,obj2,obj3,当然可以有obj4,obj5等等,同步去修改他们的状态
gsap.set([obj1, obj2, obj3], {x: 100, y: 50, opacity: 0});
接下来让我们试试看吧
这次我们新开一个vue文件,声明个变量
let arr = [{left: 0},{left: 60},{left: 120},{left: 180}
]
v-for新建四个球
<template><div @click=