Question

我试图在色彩范围内循环并制作动画。但由于某种原因，它从黑色变为红色，然后重新开始。我觉得我需要更新当前的颜色，但我不确定如何......

HTML

<div id="clock"></div>

JAVASCRIPT

var paper = Raphael('clock', 800, 800);

var clock = paper.circle(200, 200, 100);
var hand = paper.rect(200, 200, 5, 100);

var deg = 6;
var color = "#f00";

hand.attr("fill", "#000");

function changeColor()
{
    color = Raphael.getColor(1);
    var anim = Raphael.animation({ fill: color }, 6000).repeat(Infinity);
    clock.animate(anim);
}

function rotateHand() {
    deg = deg == 366 ? 6 : deg;
    hand.transform("r" + deg + ",200,200");
    deg += 6;
    clock.attr("fill", color);
}

changeColor();

window.setInterval(rotateHand, 1000);

Answer 1

是的，Raphael.getColor根据docs无效。

所以，我使用了Paul Irish blog中的这个逻辑并稍微修改了你的代码，以采用这些更改。

function changeColor()
{
    //code taken from the blog
    clock.animate({'fill': ('#'+Math.floor(Math.random()*16777215).toString(16))}, 3000,"linear");
}

function rotateHand() {
    deg = deg == 366 ? 6 : deg;
    hand.transform("r" + deg + ",200,200");
    deg += 6;
}

changeColor();
window.setInterval(changeColor, 3000);
window.setInterval(rotateHand, 1000);

这是工作fiddle。

试图通过动画在Raphael中循环使用颜色

1 个答案: