GSAP动画库学习——基本用法

    可怕的春天，冷热交替，小生不幸感冒了，说好的每天一个小技巧也缺席了好几天（┭┮﹏┭┮），惭愧

    今日小技巧是关于一个js动画库的入门介绍，完成最常见的一些动画效果，如有发现错误之处，希望这位看官能留言指正，小生感激不尽~

//========================================================

一、关于GSAP web动画库

GSAP的全名是GreenSock Animation Platform，是一个从flash时代一直发展到今天的专业动画库

GSAP提供4个库文件供用户使用，4者之间有不同也有重叠

• TweenLite是GSAP的主体核心，它用于创建基本动画，是其他各类模块的基础。一般都会搭配plugins/CSSPlugin以实现DOM元素的动画（也就是我们最熟悉的动画了）。

• TimelineLite是一个叫做时间轴的动画容器，它用于对多个动画进行有序的组织与控制。

• TimeLineMax是TimelineLite的升级版，在TimelineLite的基础之上，可以有更高级的组织与控制。

• TweenMax是GSAP集合包，除前面3个之外，还包括plugins里的常用插件以及easing里的缓动函数补充

更多内容请参考：https://segmentfault.com/a/1190000005366176

本文主要使用到TweenMax.js实现动画；

二、GSAP基本用法

参数介绍

—target：需要添加动画的DOM元素；

    可以是js/jquery方法调用的dom元素，如document.getElementById('id')、$('#id')；

    可以直接用  '.className'   '#id' 形式（注意类名、id不能为纯数字），动画库会自动调用相关dom元素；

    可以直接用 '.className , .className , #id'，同时选择多个dom元素

    可以[el,el,el]数组形式

—duration：动画持续的时间，单位：秒

—{vars}：动画设置css样式属性及一些特殊属性，具体会在例子中阐述

常用函数

（1）TweenMax.to(target,duration,{vars})：从 原本样式 变化到 vars中定义的样式

dom元素为一张图片，除宽高未定义任何样式，添加后，如下gif图有卡顿，实际动画效果十分流畅

TweenMax.to('.dog',2,{
   scale: 0.5,
   rotation: 360,
   borderRadius: '50%'
})

（2）TweenMax.from(target,duration,{vars})：从{vars}定义的样式 变化到 原本的样式把（1）中to改为from

（3）TweenMax.fromTo(target,duration,{vars1},{vars})：{vars1}定义初始样式，{vars2}最终样式，从{vars1}变化到{vars2}

TweenMax.fromTo('.dog',2,{
   scale: 0.5,
   rotation: 360,
   borderRadius: '50%'
},{scale: 1,
   rotation: 0,
   borderRadius: '100%'})

（4）TweenMax.staggerTo(target,duration,{vars},stagger)：与（1）相比，多出stagge属性可设置两个元素变化间隔时间，实现多个元素参差变化效果

TweenMax.staggerTo('.dog',2,{
   scale: 0.5,
   rotation: 360,
   borderRadius: '50%'
},0.5)

（5）TweenMax.staggerFrom(target,duration,{vars},stagger)：同理，不赘述

（6）TweenMax.fromTo(target,duration,{vars1},{vars},stagger)：同理，不赘述

{vars}中部分内容介绍

（1）delay：1，延迟1s在开始动画

（2）ease：Back.waseOut，动画变化速率

可在https://greensock.com/get-started-js#easing，按需求调节动画曲线，调节后获取ease属性值，放入自己的程序

（3）onComplete：yourFun，回调函数，在动画结束后调用该函数

TweenMax.from('.dog',1,{
   opacity: 0,
   scale: 2,
   onComplete: completeHandler
});
function completeHandler(){
   alert('动画已结束')
}

（4）样式属性变量，变量值可以=函数

下例随机设置了图片位置；

TweenMax.to('.dog',2,{
   x: function(){
      return Math.random()*300;
   },
   y: function(){
      return Math.random()*300;
   }
});

函数有2个可传参数：

index ：针对多个dom元素，返回当前元素的索引，如本例子 有.dog类的总共是4个img元素，分别为0-3

target：当前dom元素，如本例 当前img元素

下例让对应的img元素位置等间距变化

TweenMax.to('.dog',2,{
   x: function(index, target) {
      return (index + 1) * 50; // 100, 200, 300
   },
   y: function(index, target) {
      return (index + 1) * 50; // 100, 200, 300
   }
});