jquery - 如何根据一天中的时间沿路径制作 div 动画

Question

这个问题让我抓狂，我正在寻找解决这个问题的最佳方法。

我有一个 div $(".sun")，我想沿着椭圆的圆周移动它，这是我用 Raphael.js 生成的，以便椭圆与屏幕一样宽并且水平居中，高度为宽度的一半，并且绝对定位在 0,0(左上角):

//draw ellipse that is as wide as the window and half as tall as the width
var paper = Raphael(document.getElementById("ellipse"), Wwidth, halfIt);
var c = paper.ellipse(Wwidth/2, halfIt/2, Wwidth/2, halfIt/2);
c.attr({'fill': 'transparent', 'stroke': 'red'});

jsfiddle here (更改了 jsfiddle 中的值以进行演示)

椭圆是天体在天空中运行路径的程式化表示。这意味着早上 6 点，太阳位于屏幕最左侧的椭圆长轴处。中午 12 点，太阳位于屏幕的顶部中心，下午 6 点，太阳位于椭圆长轴的最右侧。

以度数表示，上午 6 点 = 180 度，中午 12 点 = 90 度，下午 3 点 = 45 度，依此类推。基本上，早上 6 点到下午 6 点之间每小时相差 15 度。添加分钟的计算:

var hours = new Date().getHours();
(removed code that converts the numerical hour to my stylized degrees for brevity)
var mins = new Date().getMinutes();     
var minsdegree = mins * .25;    
var skyangle = hourdegree + minsdegree;

例如，如果是上午 11:39，天空角度将等于 114.75 度。

挑战: 我怎样才能沿着椭圆的路径设置太阳的动画，使其根据时间与我的自定义角度相对应。从技术上讲，我不需要它来“动画”，只需简单地对应于页面加载时的正确角度即可。但是，如果您保持页面打开的时间足够长，那么让它沿着路径呈现动画会很方便。

Answer 1

给你:http://jsfiddle.net/y47Cr/54/

每秒更新一次。