ScrollToPlugin (不包含于TweenMax.js)
用于滚动窗口(类似于window.scrollTo(x, y))或DOM元素(如myDiv.scrollTop = y; myDiv.scrollLeft = x;)。滚动窗口时使用window作为动画目标。
//窗口滚动到400pxTweenLite.to(window, 2, {scrollTo:400});//窗口滚动到锚点TweenLite.to(window, 2, {scrollTo:"#someID"});//div滚动到250pxTweenLite.to(myDiv, 2, {scrollTo:250});//同时滚动X和Y方向TweenLite.to(myDiv, 2, {scrollTo:{y:400, x:200}, ease:Power2.easeOut});//滚动到锚点#someID上方50pxTweenMax.to(window, 2, {scrollTo:{y:"#someID", offsetY:50}});//滚动到最下方TweenLite.to(myDiv, 2, {scrollTo:{y:"max"}});TweenLite.to(myDiv, 2, {scrollTo:"max"});
ScrollToPlugin自动终止 (autoKill默认为true)
用户主动控制滚动时(例如拖动滚动条)插件默认会自动终止滚动。自动终止时会触发onAutoKill
事件
TweenLite.to(window, 2, {scrollTo:{y:300,autoKill:true,onAutoKill:myAutoKillFunction}});function myAutoKillFunction() { alert("autoKill");}
ColorPropsPlugin (不包含于TweenMax.js)
ColorPropsPlugin主要用于直接在JavaScript对象上补间其他与颜色相关的属性,而不是补间元素的CSS颜色属性,因为CSSPlugin已经处理了这些。如rgba(255,0,51,0.5)
,#f0c
,0xFF00CC
,res
,hsl(105,50%,80%)
等。
//动画自定义函数setColor的颜色值TweenLite.to(myObject, 1, {colorProps:{setColor:"rgb(102,255,51)"}, ease:Linear.easeNone});//自定义函数获取颜色var color = myObject.lineColor(); //自定义函数设置颜色myObject.lineColor("rgb(255,0,51)"); //对颜色进行补间动画TweenLite.to(myObject, 1, {colorProps:{lineColor:"rgb(102,255,51)"}, ease:Linear.easeNone});
ModifiersPlugin (不包含于TweenMax.js)
ModifiersPlugin 可以为几乎任何属性定义“修饰符(Modifiers)”函数作为 拦截器 。此修饰符拦截动画通常在每次更新(“tick”)时应用的值,将其作为第一个参数提供给你的函数,并允许你运行自定义逻辑,返回动画应用的新值。
value number | string 常规补间动画中即将应用的值。
target object 目标本身。
例:将旋转修改为每45度角跳动一次,类似于RoundPropsPlugin
var degrees = 45;var tween = TweenMax.to(".arrow", 4, {rotation:360, modifiers: { rotation: function(rotation) { return Math.round(rotation / degrees) * degrees; } }, ease:Linear.easeNone, repeat:6,})
例:走马灯(轮播)特效 每个框在超过500时重置为x:0
TweenMax.to(".box", 5, { ease: Linear.easeNone, x: "+=500", //将每个块向右移动500px modifiers: { x: function(x) { return x % 500; //强制x值在0和500之间 } }, repeat: -1});