javascript animation lib greensock gsap介绍
一般前台做动画有以下几种方式:
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,
积小流以汇江海,细微做起