Raphael.js文本值动画

问题描述 投票:2回答:2

我试图在raphael.js中设置反制动画,但我遇到了一个奇怪的行为。在动画中间,文本值等于NaN,我不明白为什么。

这是我的代码:

<html>
<head>
    <title></title>
    <script src="raphael.js"></script>
    <script src="jquery.js"></script>
</head>
<body>
     <script type="text/javascript">
        var r = Raphael(0, 0, 400, 400);
        r.ca.strNumber = function (number) {
            var str = number + '';
            return {"text" : str};
        }

        $(document).ready( function() {
            var t = r.text(200, 200, "1").attr({"font-size": 50, "fill": "black"});
            t.animate({"strNumber": 999}, 500);
        });
    </script>

</body>
</html>

那有什么不对呢?如何解决这个问题?

谢谢!

javascript raphael
2个回答
0
投票

我假设您想要从1到999进行动画计数。我不认为.animate()可以帮助您这样做,而您可以使用以下代码从1到10计数:

<body>
 <script type="text/javascript">
    var r = Raphael(0, 0, 400, 400);
    $(document).ready( function() {
        counter = 1;
        var t = r.text(200, 200, counter).attr({"font-size": 50, "fill": "black"});

       var myTimer = setInterval(function(){
          counter ++;
          t.attr('text', counter);
          if (counter>=10){
            clearInterval(myTimer);
          }
        }, 500);
    });
</script>
</body>

-1
投票

您有NaN,因为它没有自定义属性的初始值。创建文本后添加:

t.attr({strNumber:0}); //将初始值设为0,您可以将其设置为任何符合您需要的数字

然后你可以正常做动画

© www.soinside.com 2019 - 2024. All rights reserved.