基于TweenLite 的计数动画

最新推荐文章于 2023-01-19 14:44:30 发布

红孩儿2011

最新推荐文章于 2023-01-19 14:44:30 发布

阅读量175

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_26642611/article/details/109079909

版权

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>

<script src="https://wow.techbrood.com/libs/gsap/TweenLite.min.js"></script>
  <style>
html,
body {
    height: 100%;
}
body {
    background-color: #1d1d1d;
    font-family: "Asap", sans-serif;
    color: green;
    margin: 10px;
    font-size: 50px;
}
#scoreDisplay {
    background: whitesmoke;
    width: 200px;
    text-align: center;
    border-radius: 7px;
}
  </style>
</head>
<body>

  <div id="demo">
    <div id="scoreDisplay"></div>
</div>
</body>
<script>
var demo = {
        score: 0
    },
    scoreDisplay = document.getElementById("scoreDisplay");

//create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds.

var tween = TweenLite.to(demo,  1,   { score: 20,  onUpdate: showScore })
                        // mc 持续时间  

    //each time the tween updates this function will be called.
    function showScore() {
        scoreDisplay.innerHTML = demo.score.toFixed(2);
    }
    </script>

</html>

红孩儿2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于TweenLite 的计数动画

<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title></title><script src="https://wow.tec
复制链接

扫一扫