TweenMax实现网页元素无缝循环跑马灯效果代码记录

炮马灯效果通过基础的js代码或HTML的marquee标签都能实现，如果想学习TweenMax插件不妨通过其跑马灯效果代码入手会比较容易理解。

1、下载插件：http://www.tweenmax.com.cn/source/

把压缩后文件夹里的src/minified/TweenMax.min.js和src/minified/plugins/ModifiersPlugin.min.js文件复制到自己的Web项目

• TweenMax.min.js：核心工具
• ModifiersPlugin.min.js：基础插件，附件插件。TweenMax中文文档对其介绍是：ModifiersPlugin 可以为几乎任何属性定义“修饰符（Modifiers）”函数。此修饰符拦截动画通常在每次更新（“tick”）时应用的值，将其作为第一个参数提供给你的函数，并允许你运行自定义逻辑，返回动画应用的新值。

2、在网页中引入上面两个文件：

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

3、实现代码

HTML代码：

<div class="wrapper">	
	<div class="box">1</div>
	<div class="box">2</div>
	<div class="box">3</div>
	<div class="box">4</div>
	<div class="box">5</div>
	<div class="box">6</div>
	<div class="box">7</div>
	<div class="box">8</div>
	<div class="box">9</div>
	<div class="box">10</div>	
</div>

CSS代码：

.wrapper {
	width: 100%;
	padding-bottom: 50px;
	position: relative;
}
.wrapper .box {
	width: 50px;
	height:50px;
	margin: 0 5px;
	position: absolute;
}

JS代码：

TweenMax.set('.wrapper .box',{
    x: function(i){
        return i*60; //i表示每一个.box，这里的意思是设置每一个.box的位置，即x轴的偏移值，让其在一行显示，所以.box的css要使用position:absolute;如果不设置的话，所有.box就会堆在一起。
    }
});

TweenMax.set()方法作用是立即设置目标的属性值而不产生过渡动画，相当于0的动画时间。（嗯可以理解为初始化目标元素）

TweenMax.to(".wrapper .box",3,{
    ease: Linear.easeNone, //过渡效果的速度曲线
    x: "-=60", //动画元素的运动距离，-=表示逐个向左运动60，如果是+=则向右运动60
    modifiers: {
        x: function(x) {
            return x % 60; //强制x值在0和60之间。如果没有引入ModifiersPlugin.min.js插件就不要使用modifiers参数
        }
    },
    repeat:-1 //动画在第一次完成后应重复的次数，-1表示无限重复
});

TweenMax.to()方法作用是创建一个从当前属性到指定目标属性的TweenMax动画对象，要把元素动起来就靠它。

官方案例演示：http://www.tweenmax.com.cn/demo/25-ModifiersPlugin.html

插件具体参数：http://www.tweenmax.com.cn/api/tweenmax/