ModifiersPlugin 插件

TweenMax没有包含ModifiersPlugin。

ModifiersPlugin 可以为几乎任何属性定义“修饰符（Modifiers）”函数。此修饰符拦截动画通常在每次更新（“tick”）时应用的值，将其作为第一个参数提供给你的函数，并允许你运行自定义逻辑，返回动画应用的新值。

例如，根据另一个对象的y更改一个对象的x，或根据其移动方向更改旋转。

动画关键词：modifiers

ModifiersPlugin的参数

修改旋转角度的例子

下面的动画将旋转角度补间360度，但modifiers函数强制值跳转到最接近45度的增量。请注意modifiers函数如何传递正在修改的属性的值，在本例中为rotation数字。

.wrapper { 
  margin-top:16px; 
} 
.arrow { 
  left:160px;
  display:block;
  position:relative;
  width:33px;
  height:137px;
  background:url(/templets/default/images/arrow-green-up.png) 
}

var degrees = 45;
var tween = TweenMax.to(".arrow", 4, {rotation:360,
  modifiers: {
      rotation: function(rotation) {
        //将旋转修改为45度角，类似于RoundPropsPlugin
        return Math.round(rotation / degrees) * degrees;   
      }
    },
 ease:Linear.easeNone,
 repeat:6,
})

使用余数修饰X值的例子

下面的动画将x补间为500，但modifiers函数强制转换值，使其始终在0到100之间。

  
tweened x value: 
  
modified x value: 
  

.wrapper {
  margin-top:16px;
}
h3 {
  color:#aaa;
}
.box {
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 6px;
  margin-top: 4px;
  display: inline-block;
  line-height: 50px;
  text-align: center;
  color: #333;
}
.green{
  background-color:#6fb936;
  }

var tweenedX = document.getElementById("tweenedX"),
    modifiedX = document.getElementById("modifiedX")
TweenMax.to(".box", 5, {x:500,
  modifiers:{
    x:function(x){
      tweenedX.textContent = x.toFixed(2);
      var newX = x % 100; 
      modifiedX.textContent = newX.toFixed(2) // value between 0 and 100
      return newX;
    }
  }, ease:Linear.easeNone
})

走马灯/旋转木马的例子

你有没有创建过一个旋转木马，并努力使其无缝循环？也许你下载了一些demo或编写了一些代码，这些代码在每个项目到达结尾时将其移回到开头。

但使用ModifiersPlugin，你只需用staggerTo()即可获得一个无缝重复的旋转木马！

下面的示例将每个框补间到相对x位置"+=500"。单击“Show overflow”按钮，看到每个框在超过500时重置为x：0。

 Show overflow
  
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

body {
  background:#1d1d1d;
  font-family:Asap, sans-serif;
}
.wrapper{
  width:450px;
  height:50px;
  position:relative;
  margin:auto;
  background:#ccc;
  overflow:hidden;
}
.wrapper::after {
  width:448px;
  height:48px;
  content:"";
  position:absolute;
  border:solid 1px white;
}
.box{
  width:50px;
  height:50px;
  position:absolute;
  background:red;
  font-size:25px;
  line-height:50px;
  text-align:center;
  
}
.boxes {
  position:relative;
  left:-50px;
}
.nav {
  position:relative;
  text-align:center;
 
  color:white;
  font-size:20px;
  margin:20px 0;
}

var $overflow = $("#overflow");
var colors = ["#f38630","#6fb936", "#ccc", "#6fb936"];
//初始化每个块的颜色和位置为一排
TweenMax.set(".box", {
  backgroundColor:function(i) {
    return colors[i % colors.length];
  },
  x:function(i) {
    return i * 50;
  }
});
TweenMax.to(".box", 5, {
  ease: Linear.easeNone,
  x: "+=500", //将每个块向右移动500px
  modifiers: {
    x: function(x) {
      return x % 500; //强制x值在0和500之间
    }
  },
  repeat: -1
});
//toggle overflow
$overflow.on("change", applyOverflow);
function applyOverflow() {
  if($overflow.prop("checked")){
    TweenLite.set(".wrapper", {overflow:"visible"});
  }else {
    TweenLite.set(".wrapper", {overflow:"hidden"});
  }
}

更多ModifiersPlugin 高级演示