Javascript Raphael.js文本值动画_Javascript_Raphael

Javascript Raphael.js文本值动画

javascript

Javascript Raphael.js文本值动画,javascript,raphael,Javascript,Raphael,我试图在raphael.js中设置计数器的动画，但我遇到了一个奇怪的行为。在动画的中间，文本值等于楠< /代码>，我不明白为什么。这是我的密码： <html> <head> <title></title> <script src="raphael.js"></script> <script src="jquery.js"></script> </head> <

我试图在raphael.js中设置计数器的动画，但我遇到了一个奇怪的行为。在动画的中间，文本值等于<代码>楠< /代码>，我不明白为什么。这是我的密码：

<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>


var r=拉斐尔（0,0,400,400）；
r、 ca.strNumber=函数（编号）{
var str=数字+“”；
返回{“text”：str}；
}
$（文档）.ready（函数（）{
var t=r.text（200200，“1”）.attr（{“字体大小”：50，“填充”：“黑色”}）；
t、 制作动画（{“strNumber”：999}，500）；
});

那有什么问题吗？如何解决这个问题

谢谢

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

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

然后，您可以像得到NaN一样正常地制作动画，因为它没有自定义属性的初始值。在创建文本后添加以下内容：

t、 attr（{strNumber:0}）；//将初始值设置为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>


var r=拉斐尔（0,0,400,400）；
$（文档）.ready（函数（）{
计数器=1；
var t=r.text（200200，计数器）.attr（{“字体大小”：50，“填充”：“黑色”}）；
var myTimer=setInterval（函数（）{
计数器++；
t、 属性（“文本”，计数器）；
如果（计数器>=10）{
清除间隔（myTimer）；
}
}, 500);
});

我假设您要进行从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>


var r=拉斐尔（0,0,400,400）；
$（文档）.ready（函数（）{
计数器=1；
var t=r.text（200200，计数器）.attr（{“字体大小”：50，“填充”：“黑色”}）；
var myTimer=setInterval（函数（）{
计数器++；
t、 属性（“文本”，计数器）；
如果（计数器>=10）{
清除间隔（myTimer）；
}
}, 500);
});