TweenLite.js 实现数字动画效果

TweenLite是GSAP的主体核心，它用于创建基本动画，是其他各类模块的基础。一般都会搭配plugins/CSSPlugin以实现DOM元素的动画.

GSAP的全名是GreenSock Animation Platform，它是一个从flash时代一直发展到今天的专业动画库。

TweenLite的基本动画

一切动画，都从值的变化开始。 TweenLite作为主体核心，做的就是这件事。TweenLite具体如何使用呢？

TweenLite.to(target, duration, vars)是TweenLite最常用的方法，target指定动画元素，duration指定动画持续时间，vars指定动画的目标值。请注意，这里并没有操作任何DOM元素，所以和我们一般写的动画不太一样。

关键js代码

<script>
    $(function () {


        //数字动画
        function num_transition() {
            var obj = {
                score1: 0,
                score2: 0,
                score3: 0,
                score4: 0,
                score5: 0
            };
            num1 = document.getElementById("num1");
            num2 = document.getElementById("num2");
            num3 = document.getElementById("num3");
            num4 = document.getElementById("num4");
            num5 = document.getElementById("num5");

            //创建一个tween在0.8秒内改变score的属性值从0到100.
            var tween = TweenLite.to(obj, 0.8, {
                score1: 12,
                score2: 99,
                score3: 2900,
                score4: 9126,
                score5: 22,
                onUpdate: showScore
            })

            //在tween update时通过这个function输出.
            function showScore() {
                if (num1 && num2 && num3 && num4 && num5) {
                    num1.innerHTML = obj.score1.toFixed();
                    num2.innerHTML = obj.score2.toFixed();
                    num3.innerHTML = obj.score3.toFixed();
                    num4.innerHTML = obj.score4.toFixed();
                    num5.innerHTML = obj.score5.toFixed();
                }
            }

        }
        num_transition();
         

    })
    </script>