基于倒计时值动画raphajs -类似于极坐标时钟

Animate Raphaël JS based on countdown value - similar to polar clock

本文关键字：类似于 极坐标 时钟 raphajs 动画 倒计时      更新时间：2023-09-26

首先，对JS相当陌生，但越来越好:-)

这个问题类似于在raphael js中绘制居中弧，但由于一些细节而略有不同。

我正在使用jQuery倒计时来处理倒计时。

计时器上的"秒"需要动画化，类似于Raphaël演示页面上的Polar Clock示例。

有一个回调'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);
}});

任何帮助都会很感激。谢谢你！

这是它的最终用途(splash页面将在2011年12月11日之前激活):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
}})();
相关文章：