ModifiersPlugin 插件

TweenMax没有包含ModifiersPlugin。

ModifiersPlugin 可以为几乎任何属性定义“修饰符(Modifiers)”函数。此修饰符拦截365体育官网-ribo88_365手机体育投注_365体育在线国外网址通常在每次更新(“tick”)时应用的值,将其作为第一个参数提供给你的函数,并允许你运行自定义逻辑,返回365体育官网-ribo88_365手机体育投注_365体育在线国外网址应用的新值。

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

365体育官网-ribo88_365手机体育投注_365体育在线国外网址关键词:modifiers

ModifiersPlugin的参数

参数名 类型 必填 说明
value number | string 常规补间365体育官网-ribo88_365手机体育投注_365体育在线国外网址中即将应用的值。这通常是一个数字,但可以是基于属性所需的字符串。
例如,如果你要为该x属性设置365体育官网-ribo88_365手机体育投注_365体育在线国外网址,那么它将是一个数字。但如果你为left属性设置365体育官网-ribo88_365手机体育投注_365体育在线国外网址,则可能是类似"212px"的值,或者boxShadow属性"10px 5px 10px rgb(255,0,0)"这样的值。
target object 目标本身。

修改旋转角度的例子

下面的365体育官网-ribo88_365手机体育投注_365体育在线国外网址将旋转角度补间360度,但modifiers函数强制值跳转到最接近45度的增量。请注意modifiers函数如何传递正在修改的属性的值,在本例中为rotation数字。

  • HTML
  • CSS
  • JS
  • 展示

.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值的例子

下面的365体育官网-ribo88_365手机体育投注_365体育在线国外网址将x补间为500,但modifiers函数强制转换值,使其始终在0到100之间。

  • HTML
  • CSS
  • JS
  • 展示

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。

  • HTML
  • CSS
  • JS
  • 展示




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 高级演示

布雷克信息收集modifiersplugin