javascript 如何使用 TweenMax 对整数变量进行补间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17773858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to tween an integer variable using TweenMax?
提问by Ashkan Ghodrat
How to tween an integer variable using Greensock:TweenMax,TweenLite in javascript?
如何在 javascript 中使用 Greensock:TweenMax,TweenLite 对整数变量进行补间？
回答by Ashkan Ghodrat
var counter = { var: 0 };
TweenMax.to(counter, 5, {
var: 100,
onUpdate: function () {
console.log(Math.ceil(counter.var));
},
ease:Circ.easeOut
});
it starts from 0 to 100 in 5 seconds.
它在 5 秒内从 0 开始到 100。
回答by TiagoGomes
Great job! It′s working for me too.
很好！它也对我有用。
//TweenLite can tween any numeric property of any object
var game = {score:0},
add20Btn = document.getElementById("add20Btn");
scoreDisplay = document.getElementById("score");
add20Btn.onclick = add20;
function add20() {
TweenLite.to(game, 1, {score:"+=20", roundProps:"score", onUpdate:updateHandler, ease:Linear.easeNone});
}
function updateHandler() {
scoreDisplay.innerHTML = game.score;
}
add20();body{
background: #000;
margin:10px;
color:grey;
font-family:Arial, Helvetica, sans-serif;
}
h1{
line-height:40px;
font-size:30px;
color:white;
padding:0px;
margin:0px 0px 0px 10px;
font-weight:normal;
}
#content{
position:relative;
width:500px;
min-height:186px;
padding:10px;
margin:6px;
background-color:rgba(0, 0, 0, 0.5);
color:#fff;
}
#score{
font-size:120px;
font-weight:bold;
padding:20px;
text-align:center;
background-color:#91E628;
color:#000;
border-radius:20px 20px;
}
button{
display:block;
padding:10px;
margin-top:10px;
float:right;
}<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<h1>Tween Variable</h1>
<div id="content">
<div id="score">0</div>
<button id="add20Btn">add 20</button>
</div>By the way i found this other example in http://codepen.io/GreenSock/pen/hzfji
顺便说一句，我在http://codepen.io/GreenSock/pen/hzfji 中找到了另一个例子
