TweenMax学习小计

原创 2018年04月15日 16:53:38

TweenMax是一款前端动画插件,可以做出很多效果,灵活性很高,最近闲暇之余学了一下,顺便做点记录。

插件的安装很简单,直接用script引入即可使用:

<script src="./js/TweenMax.min.js"></script>

开始的时候需要初始化一个对象:

var t = new TimelineMax();

to:单个元素,运动到某一点

t.to('.box', 3, { // 3秒时间内移动到绝对位置x=400的地方
		left: 400 // 绝对位移
	});

还有很多效果可以添加,比如Linear,Back,Bounce,Cire,Cubic,Elastic,Quad,Sine,Quint等,每个效果都有三种进出方式:easeIn、easeOut、easeInOut。

t.to('.box', 3, {
	  left: 400, // 绝对位移
//        ease: Linear.easeIn
//        ease: Linear.easeOut
//        ease: Linear.easeInOut

//        ease: Back.easeIn
//        ease: Back.easeOut
//        ease: Back.easeInOut

//        ease: Bounce.easeIn
//        ease: Bounce.easeOut
//        ease: Bounce.easeInOut

//        ease: Circ.easeIn
//        ease: Circ.easeOut
//        ease: Circ.easeInOut

//        ease: Cubic.easeIn
//        ease: Cubic.easeOut
//        ease: Cubic.easeInOut

//        ease: Elastic.easeIn
//        ease: Elastic.easeOut
//        ease: Elastic.easeInOut

//        ease: Expo.easeIn
//        ease: Expo.easeOut
//        ease: Expo.easeInOut

//        ease: Quad.easeIn
//        ease: Quad.easeOut
//        ease: Quad.easeInOut

//        ease: Sine.easeIn
//        ease: Sine.easeOut
//        ease: Sine.easeInOut

//        ease: Quint.easeIn
//        ease: Quint.easeOut
//        ease: Quint.easeInOut
	});

具体需要什么效果就看个人需求了。

from:单个元素,从哪一点开始

t.from('.box', 3, { // 从400的位置运动到0
		left: 400 // 绝对位移
	});
fromTo:从xx到xx位置
t.fromTo('.box', 3, { // 从400的位置运动到0
		left: 400 // 绝对位移
	},{
		left: 800
    });

以上都是绝对位移,实际我们使用相对位移的时候更多一些:

t.to('.box', 3, {
        x: 400 // 相对位移   
	})

当然,可以变化的不止x轴的距离,还有其它属性:autoAlpha(透明度)、scale(放大倍数)、scaleX(x轴的放大)、rotation(旋转角度)、rotationX、rotationY、rotationZ、skewX(x轴的斜切)、、、

t.to('.box', 3, {
            x: 400 
           width: 300
//        autoAlpha: 0
//        scale: .5
//        scaleX: .5
//        rotation: 50
//        rotationX: 50
//        rotationY: 50
//        rotationZ: 50
//        kewX: 60
	});

set:直接设置状态,无运动效果

t.set('.box', {
        x: 400
	});

链式运动

<div class="box box1"></div>
<div class="box box2"></div>
t.to('.box1',2, { // 从上到下执行,会有延迟,可以在第二个上面加负的延迟时间来提前
		x: 400
	}).to('.box2',2, {
		x: 400
	},'-=1');

如果不加-=1的延迟时间,则要等到box1运动结束后box2才开始运动,-=1表示将后面一个元素的运动时间提前1秒,-=2则提前2秒,和运动时间一致,就一起运动。

多个元素的运动

当页面有多个元素的时候使用staggerTo方法

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
t.staggerTo('.box',1,{
//		x: 400
    },1);
t.staggerFrom('.box',2,{
		x: 400
	});

参数代表的意思和to一样的,多个元素同样也有staggerFrom、staggerFromTo

t.staggerFrom('.box',2,{
		x: 400
	})
t.staggerFromTo('.box',2,{
		x: 400
	})

通过配置cycle参数来循环元素的位置:

t.staggerTo('.box',1,{
		x: 400,
        cycle: {
		x: [100,200,300]
        }
    },1);

第0、1、2个依次到x=100、200、300的位置,第3、4、5个元素同样依次到学00、200、300的位置,如此循环,知道最后一个元素


我们还可以返回一个函数:

t.staggerFromTo('.box',2,{
		x: 400
	},{
	cycle: {
            x: function (index) { // 元素的索引
                return 400 + index * 30
            }
		}
    },1)

贝塞尔曲线

<div class="box1"></div>
<div class="box2"></div>
t.staggerTo('.box2',16,{
		cycle: {
			bezier: function () {
                return [ // 途径点坐标
                    {x: 0,y: 0},
                    {x: 175,y: 175},
                    {x: 400,y: 0},
                    {x: 800,y: 150}
                ]
			}
        }
    });

回调函数

t.staggerTo('.box1',3,{
		x: 400,
        onStart: function () { // 开始运动时触发
            console.log('start');
        },
	onUpdate: function () { //位置更新的时候触发
	    console.log('onUpdate');
	},
	onComplete: function () { // 运动结束的时候触发
	    console.log('onComplete');
	    this.target.style.background = 'green';
	}
	},.5);






版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dongguan_123/article/details/79949012

动画库 Tweenmax 使用示例1 - 执行动画

TweenMax 建立在TweenLite 核心类以及它的大哥TweenFilterLite 基础之上,它为Tween 家族增加了新的受欢迎的功能(尽管只是锦上添花),从而使家族更加的壮大,比如贝赛尔...
  • scy881119
  • scy881119
  • 2016-05-25 16:29:09
  • 533

TweenMax介绍

Tweenmax是TweenLite和TweenFilterLite的基础上建立的。目的在于使得tweening家族具备更加大众化的功能......Tweenmax同样使用简单易学的语法。实际上,因为...
  • linjf520
  • linjf520
  • 2012-05-31 20:56:56
  • 5799

TweenMax 三 缓动及bezier

敬请期待....
  • kaizi524
  • kaizi524
  • 2015-12-31 18:21:46
  • 836

TweenMax中文手册与参数说明

  • 2012年01月18日 10:11
  • 36KB
  • 下载

TweenMax.to的常用方法、属性

参考:http://news.9ria.com/2013/0613/27470.html 官方API:http://www.greensock.com/as/docs/tween/com/greens...
  • wyr0924
  • wyr0924
  • 2013-12-01 19:33:38
  • 4433

TweenMax使用方法

SuperScrollorama 是一个用来实现超酷的滚动动画效果的 jQuery 插件。 实现的效果有:文字褪色,飞,旋转,缩放,斯马什,针脚,滑动,隐退,反弹,颜色,扔,移动,视差。 地址:htt...
  • qw_xingzhe
  • qw_xingzhe
  • 2015-04-24 16:38:44
  • 3782

TweenMax 二

// *param TweenLine 不依存于jquery TweenLine.to("#test") 补间ID为test的元素  // *param TweenLine 不依存于jquery T...
  • kaizi524
  • kaizi524
  • 2015-12-31 18:11:08
  • 2157

TweenMax 一

var t1 = TweenLite; var t2 = TweenMax; var t3 = new TimelineLite(); var t4 = new TimelineMax(); ...
  • kaizi524
  • kaizi524
  • 2015-12-31 18:06:10
  • 907

TweenMax 教程 & 使用

 内容:  TweenMax 继承 TweenLite , 轻量,快速并增加了新的功能:比如 pause/resume, timeScale, event listeners, reverse...
  • lili2lili
  • lili2lili
  • 2014-02-26 13:27:53
  • 853

Tweenmax 缓动效果

1,Linear变化 字面意思就很好理解,线性变化,就是匀速。    2,Back变化。 Back有回来的意思,在缓动前,会先往回运动一段距...
  • msxiehui
  • msxiehui
  • 2016-04-16 01:31:21
  • 1387
收藏助手
不良信息举报
您举报文章:TweenMax学习小计
举报原因:
原因补充:

(最多只允许输入30个字)