javascript animation lib greensock gsap介绍

Posted 2020-08-22 世有因果知因求果

一般前台做动画有以下几种方式：

1. 简单的css transition动画;

2. css animation动画

3. javascript库动画

一般来说css html5动画只适用于简单的形变动画，动画操作的是css某个属性。

但是对于更加复杂的动画，我们可能必须通过javascript来做，其中greensock的gsap就是一个让你发挥无限想象的强大工具

gsap还支持模块化使用，这一点对于es6爱好者模块化编程的工程师来说是一个福音，支持下面的应用模式

npm install gsap --save
import {TweenLite, Elastic, TimelineMax} from "gsap"

gsap动画原理是：

他有一个核心库，可以对任何对象value值做tween过度，如果需要支持特殊的css属性，则可能需要CSSPlugin,最大的TweenMax包含以下内容（好在我们可以通过上面的import命令选择性地导入对应模块！）：

TweenLite, TimelineLite, TimelineMax, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and all of the eases like Power1, Power2, Power3, Power4, Back, Bounce, Circ, Cubic, Elastic, Expo, Linear, Sine, RoughEase, SlowMo, SteppedEase,