TweenMax.to()的使用

简单介绍

TweenLite/TweenMax是GreenSock 动画平台中的核心动画工具，可用来构建补间动画(tween)，实现组件的移动

• 官网地址

• CDN

​ 在本人室内定位项目前端演示中，需要实现定位点移动，TweenMax就很适合我这种懒狗。

​ 主要使用的是 Tweenmax.to() 函数

// 函数结构
TweenMax.to( target:Object, duration:Number, vars:Object ) : TweenMax
// 参数依次为动画对象，动画用时，动画属性

配置属性说明

这里介绍下我使用较多的属性

时间曲线easing

​ 可以对动画的过渡效果进行调整，

​ 关键词为ease，可以设置进场 easeIn，出场 easeInOut，进出场 easeOut

​ 其种类很多，这里只列举本人比较喜欢用的几个，其他的可以参考官方文档

曲线种类	使用	说明（以出场为例）
Power0()	Power0.easeIn Power0.easeInOut Power0.easeOut	匀速
Power1，Power2， Power3，Power4	Power1.easeIn 等 Power1.easeInOut 等 Power1.easeOut 等	由快变慢，Power4效果最强烈
Sine	Sine.easeIn Sine.easeInOut Sine.easeOut	正弦效果，由快变慢，比Power1效果弱
Bounce	Bounce.easeIn Bounce.easeInOut Bounce.easeOut	弹跳，像小球丢在地面上
Elastic	Elastic.easeIn Elastic.easeInOut Elastic.easeOut	弹簧效果

贝塞尔曲线bezier

​ 通过绘制一组坐标点定义一条Bezier动画路径，使用关键词 bezier。

​ 同样只列举部分官方文档

参数	类型	必填	说明
values	Array	是	定义Bezier曲线的锚点/控制点。 锚点/控制点是一组坐标点，每个点都应该包含两个坐标值x和y或left和top， 如[{x:100, y:250}, {x:300, y:0}, {x:500, y:400}]
type	String	否	锚点/控制点类型。 - thru（默认）：穿越。 - soft：柔和 - quadratic：标准的二次bezier（坐标点数量必须为单数） - cubic：三次bezier（坐标点数量必须为3n+1）
autoRotate	Boolean, Number, or Array (default:false)	否	是否在移动过程中随曲线自动旋转

代码示例

1. 移动到指定位置

   // 2s内移动 #box 到 (50px,50px)
   TweenMax.to('#box', 2, {
       left: 50,
       top: 50,
       ease: Power1.easeOut
   });
   

2. 按贝塞尔曲线移动

   // 2s内按路径path构成的贝塞尔曲线移动
   var path = [{x:200, y:200}, {x:400, y:0}, {x:600, y:200}, {x:800, y:0}]；
   TweenMax.to('#box', 2, {
       bezier: {values: path, autoRotate: true},
       ease: Power1.easeOut
   });