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,

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值