Question

我不知道这是否可能，但似乎应该是可能的 - 不知何故。我想要做的是在动画对象时更改对象的属性。

考虑一个带有滴答声和动画秒针的表盘的简单示例。如果用户可以自由旋转表盘，我希望第二个必须跟随旋转，同时在刻度之间进行动画处理。

一些代码说明了我要做的事情：

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

当时钟正在嘀嗒声时，鼠标移动到钟面上以旋转它。您将看到秒针在动画期间不跟随旋转。我曾经想过，我可以通过将手放入套装并旋转整个套装来做到这一点，同时手动画但只是重置手的位置。

是否有可能实现我正在努力实现的目标？

拉斐尔：你如何在动画中改变属性？

0 个答案: