尝试用动画在拉斐尔的色彩中循环

Trying to cycle through colors in Raphael with animation

本文关键字：色彩 循环 动画      更新时间：2023-09-26

我正在尝试通过颜色的光谱和动画它。但由于某种原因，它从黑色变成红色，然后重新开始。我觉得我需要更新当前的颜色，但我不确定如何…

小提琴:http://jsfiddle.net/1bpcj0g5/4/

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

是的，拉斐尔。

所以，我已经使用了这个逻辑从Paul Irish博客和修改你的代码一点点，采用的变化。

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

相关文章：