TweenMax学习小计

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

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);






阅读更多

没有更多推荐了,返回首页