如何使用TweenMax tween一个整数变量？

Question

如何使用Greensock:TweenMax、TweenLite在JavaScript中进行整数变量的补间动画？

- Ashkan Ghodrat

Answer 1

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

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

示例代码

- Ashkan Ghodrat

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

- TiagoGomes