javascript - Raphael.js 文本值动画

标签 javascript raphael

我试图在 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>

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

谢谢!

最佳答案

我假设你想做一个从 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>

关于javascript - Raphael.js 文本值动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19561003/

相关文章:

javascript - 在 Dojo 中,为什么 require() 一个已经被定义的模块()?

javascript - 流光w. 〜5,000 位关注者。尝试使用 JS 从表中抓取数据?

javascript - 如何缩短这个函数(addClass,attr)

javascript - 如何获取一组 Raphael 对象的 BBox 宽度和高度?

javascript - Raphael - 动画后保存 svg 元素的属性

javascript - Jquery 数据表在标题和正文部分之间有一些差距

javascript - 使用 r.js 构建整个项目,而不需要 require.js 的开销

javascript - 如何缩小莫里斯条形图之间的差距

javascript - Raphaël 的响应式 SVG 折线图

javascript - 无法在 Trent Richardson 日期时间选择器中显示图标