动画拉斐尔JS - 类似极性时钟

Question

首先，相当新的JS却越来越好:-)

这个问题类似于drawing centered arcs in raphael js但由于一些细节略有不同。

我使用jQuery Countdown处理倒计时。

定时器上的'秒'需要动画，类似于Raphaël演示页面上的Polar Clock Example。

有一个回调'onTick'，我认为需要以某种方式'插入'Raphaël。

标记：

<div id="timer"></div> 
<div id="pane"></div> 

JS：

$(document).ready(function() { 
$('#timer').countdown({ 
    until: new Date(2011, 11, 11), 
    timezone: -5, 
    layout: '<ul>{d<}<li><em>{dn}</em> {dl}</li>{d>}{h<}<li><em>{hn}</em> {hl}</li>{h>}' + 
     '{m<}<li><em>{mn}</em> {ml}</li>{m>}{s<}<li><em>{sn}</em> {sl}</li>{s>}</ul>', 
    onTick: get_seconds 
}); 

var archtype = Raphael("pane", 200, 100) 
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) { 
    var alpha = 360/total * value, 
     a = (90 - alpha) * Math.PI/180, 
     x = xloc + R * Math.cos(a), 
     y = yloc - R * Math.sin(a), 
     path; 
    if (total == value) { 
     path = [["M", xloc, yloc - R], ["A", R, R, 0, 1, 1, xloc - .01, yloc - R]]; 
    } else { 
     path = [["M", xloc, yloc - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]]; 
    } 
    return {path: path}; 
}; 
//make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce 
var my_arc = archtype.path().attr({"stroke": "#f00", "stroke-width": 6, arc: [50, 50, 0, 100, 30]}); 
my_arc.animate({arc: [50, 50, timer_radius, 100, 30]}, 1500, "bounce"); 

function get_seconds() { 
    var counter_seconds = $('#timer ul li:last em').text(); 
    timer_radius = 100 - (counter_seconds * 1.66666667); 
}});   

任何帮助，将不胜感激。谢谢！

Answer 1

这是为最终使用（飞溅页面将被激活，直到12月11日，2011年）：http://tomwahlin.com/

和JavaScript我结束了：

;(function() { 

// ON DOCUMENT.ready fire the primary function 
$(function(){ timer.init() })  

var timer = { 
    // 
    // `create_arc` is used to assign an arc to the Raphael pane created in .init 
    // 
    create_arc: function(arch) { 
    arch.customAttributes.arc = function (xloc, yloc, value, total, R) { 
     var alpha = 360/total * value, 
     a = (90 - alpha) * Math.PI/180, 
     x = xloc + R * Math.cos(a), 
     y = yloc - R * Math.sin(a), 
     path; 
     if (total == value) { 
     path = [["M", xloc, yloc - R], ["A", R, R, 0, 1, 1, xloc - .01, yloc - R]]; 
     } else { 
     path = [["M", xloc, yloc - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]]; 
     } 
     return {path: path}; 
    }; 
    }, 
    // 
    // `get_arc_radius` returns the correct arc radius based on something 
    // 
    get_arc_radius: function() { 
    return ((($('#timer ul li:last em').text()) * 1.66666667)); 
    }, 
    // 
    // `update_based_on(type increment) 
    // 
    update_based_on: function(type, obj) { 
    var types = { 
     'seconds': 1000, 
     'minutes': 60000, 
     'hours': 3600000 
    } 

    var update = setInterval(function() { 
     obj.animate({arc: [100, 100, timer.get_arc_radius(), 100, 90]}, types[type]); 
    }, types[type]) 
    }, 
    // 
    // `create_pieces` 
    // 
    create_pieces: function() { 
    var archtype = Raphael("pane", 200, 200)  
    timer.create_arc(archtype) 

    //http://stackoverflow.com/questions/5061318/drawing-centered-arcs-in-raphael-js 
    //make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce 
    var my_arc = archtype.path().attr({"stroke": "#5ab4fc", "stroke-width": 18, arc: [100, 100, timer.get_arc_radius(), 100, 90]}); 
    timer.update_based_on('seconds', my_arc) 
    }, 
    // 
    // `init` kicks of the main behavior 
    // 
    init: function() { 

    $('#timer').countdown({ 
     until: new Date(2011, 11, 11), 
     timezone: -5, 
     layout: '<ul>{d<}<li class="days"><em>{dn}</em> {dl}</li>{d>}{h<}<li class="hours"><em>{hn}</em> {hl}</li>{h>}' + 
     '{m<}<li class="minutes"><em>{mn}</em> {ml}</li>{m>}{s<}<li class="seconds"><em>{sn}</em> {sl}</li>{s>}</ul>', 
     onTick: function() {} 
    }); 

    timer.create_pieces() 
    } // eo .init 
}})();