javascript animation lib greensock gsap介绍

公冶高义
2023-12-01
一般前台做动画有以下几种方式:

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,

 

 类似资料: