Question

如何启动两个显示相同初始时间的动画模拟时钟，然后使其速度提高一倍，使得一秒钟变为半秒，等等，以便它超越“实时”时钟？诀窍是他们需要开始显示当前时间。

我知道这可能很简单，但每次我在时钟2的变量中添加一个乘数时，它会在不正确的时间开始并跳过滴答。

这是我用作起点的ActionScript（两个时钟都相同）：

var now:Date;
var ct:Timer = new Timer(1);
ct.addEventListener(TimerEvent.TIMER, onTick);
ct.start();

function onTick(event:TimerEvent):void {
now = new Date();
var s:uint = now.getSeconds();
var m:uint = now.getMinutes();
var h:uint = now.getHours();
/*CLOCK ONE*/
one_second_hand_mc.rotation = 180 + (s * 6);
one_minute_hand_mc.rotation = 180 + (m * 6);
one_hour_hand_mc.rotation = 180 + (h * 30) + (m / 2);
/*CLOCK TWO*/
two_second_hand_mc.rotation = 180 + (s * 6);
two_minute_hand_mc.rotation = 180 + (m * 6);
two_hour_hand_mc.rotation = 180 + (h * 30) + (m / 2);
}

Answer 1

将定时器延迟设置为小于20毫秒是不好的做法： http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/utils/Timer.html#delay
尝试这样的事情（为简单起见我只显示秒数）：

var now：Date;
  var ct：Timer = new Timer（500）;
  ct.addEventListener（TimerEvent.TIMER，onTick）;


now = new Date（）;
  var s：uint = 180 + 6 * now.getSeconds（）;
  / CLOCK ONE /
  one_second_hand_mc.rotation = s;
  / CLOCK TWO /
  two_second_hand_mc.rotation = s;


ct.start（）;


var secondStep：Number = 6; // 360/60（钟面上的分割）
  var minutStep：Number = 0.1; // 6/60（以秒为单位）
  var hourStep：Number = 1/600; // 6/3600（小时秒）


function onTick（event：TimerEvent）：void {


/ CLOCK ONE /
  if（！（ct.currentCount％2））{
         one_second_hand_mc.rotation + = secondStep;
         one_minute_hand_mc.rotation + = minuteStep;
         one_hour_hand_mc.rotation + = hourStep;
  }


/ CLOCK TWO /
  two_second_hand_mc.rotation + = secondStep;
  two_minute_hand_mc.rotation + = minuteStep;
  two_hour_hand_mc.rotation + = hourStep;
  }

Answer 2

这是另一种方法。想法是将当前开始时间存储一次。然后每次要更新时钟（onTick）时，检查自开始时间以来经过了多长时间并创建一个新的日期对象，该对象表示开始时间+通过使用因子缩放的时间 。如果因子大于1，那么时钟比实时移动得更快，如果它更低，它移动得更慢。

如果你经常运行onTick，你会得到一个平滑的动画，但是你可以每秒运行一次或者你想要的任何时间间隔。

// store current start time in milliseconds
var startTime : Number = new Date().getTime();

// the delay in the Timer doesn't affect the time
// displayed by the clocks, but only determines
// how often the clocks should be updated (redrawn)
var ct:Timer = new Timer(50);
ct.addEventListener(TimerEvent.TIMER, onTick);
ct.start();


function onTick(event:TimerEvent):void {
    // first clock should run at normal speed so we send in 1 as scale factor
    var timeDataOne : Object = calculateTime(1);
    // second clock at double speed (send in 0.5 to run at half speed)
    var timeDataTwo : Object = calculateTime(2);

    one_second_hand_mc.rotation = 180 + (timeDataOne.s * 6);
    one_minute_hand_mc.rotation = 180 + (timeDataOne.m * 6);
    one_hour_hand_mc.rotation = 180 + (timeDataOne.h/12) * 360;

    two_second_hand_mc.rotation = 180 + (timeDataTwo.s * 6);
    two_minute_hand_mc.rotation = 180 + (timeDataTwo.m * 6);
    two_hour_hand_mc.rotation = 180 + (timeDataTwo.h/12) * 360;
}


function calculateTime(clockSpeed : Number = 1):Object {
    // current time in milliseconds
    var nowTime : Number = new Date().getTime();

    // how many milliseconds have passed from the start time
    var timePassed : Number = nowTime - startTime;

    // create a new date object which should hold the time to display
    var displayTime : Date = new Date();

    // here we set the date object, which is based on the start time
    // plus the time passed multiplied with a scale factor clockSpeed.
    // When clockSpeed is one, displayTime will match the current time.
    displayTime.setTime(startTime + timePassed * clockSpeed);

    // calculate seconds, minutes and hours (and since the clock is analog
    // we use Number so we don't get discreet steps for the clock hands)
    var s : Number = displayTime.getSeconds() + (displayTime.getMilliseconds()/1000);
    var m : Number = displayTime.getMinutes() + s / 60;
    var h : Number = (displayTime.getHours() % 12) + m / 60;

    return { s: s, m: m, h: h };
}

在相同的初始时间开始时，如何使动画模拟时钟的运行速度是另一个

2 个答案: