Javascript 拉斐尔：如何在动画中更改属性？_Javascript_Jquery_Animation_Raphael

Javascript 拉斐尔：如何在动画中更改属性？

javascript jquery animation

Javascript 拉斐尔：如何在动画中更改属性？,javascript,jquery,animation,raphael,Javascript,Jquery,Animation,Raphael,我不知道这是否可能，但这似乎是应该可能的事情——不知怎么的。我要做的是在对象设置动画时更改对象的属性考虑一个带有滴答声和动画秒针的钟面的简单示例。如果时钟面可以由用户自由旋转，我希望第二个时钟面必须跟随旋转，同时在滴答声之间设置动画一些代码说明了我正在尝试执行的操作： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US"> <hea

我不知道这是否可能，但这似乎是应该可能的事情——不知怎么的。我要做的是在对象设置动画时更改对象的属性

考虑一个带有滴答声和动画秒针的钟面的简单示例。如果时钟面可以由用户自由旋转，我希望第二个时钟面必须跟随旋转，同时在滴答声之间设置动画

一些代码说明了我正在尝试执行的操作：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/raphael.js"></script>
        <script>
            $(document).ready(function(){
                var paper = Raphael("Display", $("#Display").width(), $("#Display").height());
                var centreX = $("#Display").width() / 2;
                var centreY = $("#Display").height() / 2;
                var radius = 0.9 * Math.min($("#Display").height(), $("#Display").width()) / 2;
                var rotation = 0;
                var seconds = 0;

                var s = "M"+centreX+","+centreY+"L"+centreX+","+(centreY-0.8*radius);
                var pointer = paper.path(s);

                clockface = paper.set();

                for(i=1; i<=12; i++) {
                    sn=Math.sin(i * 30 * Math.PI / 180);
                    cs=Math.cos(i * 30 * Math.PI / 180);
                    t = paper.text(centreX+(0.9*sn*radius), centreY-(0.9*cs*radius), i).attr({"font-size":28});
                    clockface.push(t);
                }

                // Non-animated tick every second
//              setInterval(function() {
//                  seconds += 1;
//                  pointer.transform("r" + (seconds * 6 + rotation) + " " + centreX + " " + centreY);
//              }, 1000);

                // Animated Tick every 5 seconds
                setInterval(function() {
                    seconds += 5;
                    pointer.animate({transform: "r" + (seconds * 6 + rotation) + " " + centreX + " " + centreY}, 3000, "backIn");
                }, 5000);

                $("#Display").mousemove(function(pos) {
                    rotation = pos.pageX * 360 / 500;
                    clockface.transform("r" + rotation + "," + centreX + "," + centreY);
                    pointer.transform("r" + (seconds * 6 + rotation) + " " + centreX + " " + centreY);
                });
            });
        </script>
    </head>
    <body>
        <div id="Display" style="width: 500px; height: 500px;">
        </div>
    </body>
</html>


$（文档）.ready（函数（）{
var paper=Raphael（“显示“，$（“#显示”）.width（），$（“#显示”）.height（）；
var centreX=$（“#显示”）.width（）/2；
var centreY=$（“#显示”）.height（）/2；
var radius=0.9*Math.min（$（“#Display”）.height（），$（“#Display”）.width（））/2；
var旋转=0；
var秒=0；
var s=“M”+centreX+”，“+centreY+”L“+centreX+”，“+（centreY-0.8*半径）；
var指针=纸张路径；
clockface=paper.set（）；
对于（i=1；我不确定是否可以简单地实现这一点。感觉您可能需要SVG组支持，而Raphael对集合并没有真正的支持（Snap.SVG支持这一点，但如果这是一个问题，则对旧浏览器的支持较少）。如果您只能使用Raph和Jquery，我想知道您是否可以使用raphael和css转换的组合，但感觉有点错误：）。也许其他人会想出一个聪明的主意。只是想一想，你可能会把显示函数分离出来，然后在mousemove或setInterval上每秒更新一次，也许，但你会失去放松的东西。@Ian。这基本上就是我现在所做的。使用setInterval每1/10秒计算并更新指针p定位和实现动画中的基本轻松。它可以工作，但缺乏直接在拉斐尔中进行的灵活性。