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;
}
});
重播