一般前臺(tái)做動(dòng)畫(huà)有以下幾種方式：

1. 簡(jiǎn)單的css transition動(dòng)畫(huà);

2. css animation動(dòng)畫(huà)

3. javascript庫(kù)動(dòng)畫(huà)

一般來(lái)說(shuō)css html5動(dòng)畫(huà)只適用于簡(jiǎn)單的形變動(dòng)畫(huà)，動(dòng)畫(huà)操作的是css某個(gè)屬性。

但是對(duì)于更加復(fù)雜的動(dòng)畫(huà)，我們可能必須通過(guò)javascript來(lái)做，其中g(shù)reensock的gsap就是一個(gè)讓你發(fā)揮無(wú)限想象的強(qiáng)大工具

gsap還支持模塊化使用，這一點(diǎn)對(duì)于es6愛(ài)好者模塊化編程的工程師來(lái)說(shuō)是一個(gè)福音，支持下面的應(yīng)用模式

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

gsap動(dòng)畫(huà)原理是：

他有一個(gè)核心庫(kù)，可以對(duì)任何對(duì)象value值做tween過(guò)度，如果需要支持特殊的css屬性，則可能需要CSSPlugin,最大的TweenMax包含以下內(nèi)容（好在我們可以通過(guò)上面的import命令選擇性地導(dǎo)入對(duì)應(yīng)模塊！）：

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,

?

總結(jié)

以上是生活随笔為你收集整理的javascript animation lib greensock gsap介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。