Raphael.js文字值动画

Question

我正在尝试为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>

那怎么了 如何解决这个问题？

谢谢！

Answer 1

我假设您希望动画的计数从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>

Answer 2

您得到NaN，因为它没有自定义属性的初始值。 在创建文本后添加以下内容：

t.attr（{strNumber：0}）; //将初始值设为0，您可以将其设置为适合您需要的任何数字

然后就可以像平常一样做动画了

Raphael.js文字值动画

问题描述

2 个解决方案

解决方案1
0 2018-01-03 00:10:42

解决方案2
-1 2014-09-18 08:19:46

Raphael.js文字值动画

问题描述

2 个解决方案

解决方案1 0 2018-01-03 00:10:42

解决方案2 -1 2014-09-18 08:19:46

解决方案1
0 2018-01-03 00:10:42

解决方案2
-1 2014-09-18 08:19:46