javascript - 如何使用 TweenMax 补间整数变量？

Question

如何在 javascript 中使用 Greensock:TweenMax,TweenLite 补间整数变量？

Answer 1

 var counter = { var: 0 };
 TweenMax.to(counter, 5, {
      var: 100, 
      onUpdate: function () {
          console.log(Math.ceil(counter.var));
      },
      ease:Circ.easeOut
  });

它在 5 秒内从 0 开始到 100。

示例代码

Answer 2

很好！它也为我工作。

//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>

顺便说一句，我在http://codepen.io/GreenSock/pen/hzfji中找到了另一个示例