1.GSAP简介
GSAP（GreenSock Animation Platform）是一个专业的动画库，可以用它完成你想要的各种效果
image
2.使用方法
- 安装GSAP
npm install gsap --save
- 在需要使用的地方引入
import {TweenMax} from 'gsap'
- GSAP的四个动画库
image
- 第一个案例
TweenMax()
<template>
<div>
<div class="box" ref="box"></div>
</div>
</template>
<script>
import {TweenMax} from 'gsap'
export default {
name: "test",
mounted(){
const box=this.$refs['box'];
new TweenMax(box,3,{
x:600,
alpha:0.4
})
}
}
</script>
<style lang="stylus" scoped>
.box{
width 200px
height 200px
background-color green
}
</style>
image
3.动画结构
TweenMax.to(target,duration,vars)
**从当前状态过渡到指定状态 vars **
target //动画目标对象
duration //动画持续时间，单位秒
vars //动画参数（CSS属性、延迟、重复次数等）
new TweenMax(box,3,{ //从当前状态过渡到右移600px并且透明度到0.4
x:600,
alpha:0.4
})
image
TweenMax.from(target,duration,vars)
从指定状态 vars 过渡到初始状态
new TweenMax(box,3,{ //从右移600px并且透明度到0.4过渡到初始状态
x:600,
alpha:0.4
})
image
TweenMax.fromTo(target,duration,vars1,vars2)
**从指定状态 vars1 过渡到结束以后的状态 vars2 **
- vars1 初始动画参数（CSS属性、延迟、重复次数等）
- vars2 结束以后的动画参数（CSS属性、延迟、重复次数等）
new TweenMax.fromTo(box,3,{ //往右移动500px，并且透明度从0.2到1
x:0,
alpha:0.2
},{
x:500,
alpha:1
})
-
TweenMax.staggerTo(target,duration,vars,stagger,onCompleteAll,onCompleteAllParams,onCompleteAllScope)
从当前状态过渡到指定状态 vars ,与 to() 不同的是它可以完成多个目标对象的过渡，并且多了四个全新的参数
同时还有两个类似的方法为 staggerFrom() , staggerFromTo() 同理，后面不再赘述
target //动画目标对象，可以有多个，以数组方式传入
stagger //每个动画的起始时间间隔
onCompleteAll //当所有显示对象都完成动画后要调用的函数
onCompleteAllParams //onCompleteAll函数的参数，以数组形式传入
onCompleteAllScope //onCompleteAll函数的作用域，this指向
tips:HTML中写了多个<div class="box" ref="box"></div>
new TweenMax.staggerFromTo('.box',3,{
x:0,
alpha:0.2
},{
x:500,
alpha:1
},1)
image
-
TweenMax.delayedCall(delay,callback,params,scope,useFrames)
设置 delay 秒以后触发一个回调函数，有点setTimeout的感觉
delay //要延迟的秒数（或帧数，如果设置了useFrames:true）
callback //要延迟执行的回调函数
params //传递给onComplete函数的参数，以数组形式传入
scope //函数的作用域，this的指向，默认为空
useFrames //设定延迟的时间模式是基于秒数还是帧数 ，默认false：秒
new TweenMax.delayedCall(3,(params1,params2)=>{
console.log(params1 + params2)
},['8854','jack']) //3秒以后控制台输出 8854jack
-
TweenMax.set(target,vars)
立即设置目标的属性值而不产生过渡动画，相当于0的动画时间
new TweenMax.set('.box',{ //没有任何过渡动画，小方块直接变红
backgroundColor:'red'
})
作者：辉夜真是太可爱啦
链接：https://www.jianshu.com/p/a8e150f0e569
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
