目录

RoundPropsPlugin文档

优质
小牛编辑
138浏览
2023-12-01

TweenMax包含了RoundPropsPlugin。

只需将逗号分隔的属性名称列表传递给roundProps参数,即可将任何属性四舍五入(舍入)为最接近的整数,例如:

//在动画过程中将x 和y 舍入为最接近的整数
TweenMax.to("#myID", 2, {x:300, y:200, opacity:0.5, roundProps:"x,y"});

使用对象语法{}自定义增量

您可以将属性舍入到各种自定义增量,而不仅仅是整数!只需传入[property]:[increment] 这样的对象:

TweenLite.to(element, 5, { x:600, y:100, roundProps:{    
    x:100, //将x舍入到最接近100的增量
    y:0.1  //将y舍入到最接近0.1的增量
  }
});

DEMO:

舍入10,以10为增量增加

以100px为增量移动

以200px为增量移动

body {
  margin:10px;
}
.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
    display:inline-block;
text-align:center;
color:#fff;
line-height:50px;
  }
.green{
    background-color:#6fb936;
  }
.orange {
  background-color:#f38630;
}  
TweenLite.defaultEase = Linear.easeNone;
var header = document.querySelector("h1");
var obj = {
  value:0
}
//round to increments of 10
TweenLite.to(obj, 5, {value:594,
  roundProps:{
    value:10
  },
  onUpdate:function() {
    header.innerHTML = obj.value;
  }
})
//round to increments of 100
TweenLite.to(".green", 5, {x:600, 
  roundProps:{
    x:100
  }, onUpdate:function() {
    this.target[0].innerHTML = this.target[0]._gsTransform.x;
  }
});
//round to increments of 200
TweenLite.to(".orange", 5, { x:600, 
  roundProps:{
    x:200
  }, onUpdate:function() {
    this.target[0].innerHTML = this.target[0]._gsTransform.x;
  }
});
重播