脚本：非常慢的动画片段

Question

我正在绘制不同程度的圆形线条。我希望动画持续约0.5秒。由于原因，我不能很慢地解决它的运行问题。

奇怪的是，如果我跳过补间并调用函数tweenToNext，它会立即渲染。

 var degrees:int; 
     var posX:int = 102; 
     var posY:int = 102; 
     var rad:int = 100; 
     var mc:MovieClip = new MovieClip(); 
     addChild(mc); 

     mc.graphics.lineStyle(5, 0xFF0000, 1); 
     mc.graphics.moveTo(posX, posY - rad) 
     mc.i = -Math.PI/2; 

     tweenToNext(); 

     function tweenToNext(per:Number = 360):void { 

      degrees += 1; 

      if (mc.i <= (3 * Math.PI/2) && degrees < per) { 

       var x:Number = posX + Math.cos(mc.i) * rad; 
       var y:Number = posY + Math.sin(mc.i) * rad; 

       mc.graphics.lineTo(x, y); 
       mc.i += Math.PI/180; 

       TweenLite.to(mc, 0.001, {onComplete:tweenToNext}); 
      } 

     }  

我试过Timer和setTimeout，但是这些产生的速度相同。

Answer 1

Flash应用程序在帧到帧的基础上运行：帧渲染 - 脚本执行 - 帧渲染 - 脚本执行 - 帧渲染 - 脚本执行 - 依此类推。这也意味着，无论您在那里放置什么最小的延迟，下一个呼叫将不会发生发生在下一个脚本执行阶段之前，基本上，下一帧。因此 - 猜猜看 - 你的圆形图需要360帧。例如，如果您有30 FPS，则为12秒。

如果你想让事情与实时同步，你需要一种不同的方法。我没有检查它是否可行，但我希望你能明白并修正错误。

var degrees:int; 

var posX:int = 102; 
var posY:int = 102; 

var rad:int = 100; 

var mc:MovieClip = new MovieClip; 

addChild(mc); 

mc.graphics.lineStyle(5, 0xFF0000, 1); 
mc.graphics.moveTo(posX, posY + rad); 

// Now, magic time. 
// Save time since app start (in milliseconds). 
var startTime:int = getTimer(); 

// 1000 milliseconds = 1 second. 
var drawingTime:int = 1000; 

// Store the maximum degree to draw. 
var degreeLimit:int = 360; 

// Call it every frame. 
mc.addEventListener(Event.ENTER_FRAME, onDraw); 

function onDraw(e:Event):void 
{ 
    // Now we need to check how much time passes since last frame 
    // and update the drawing accordingly. 
    var timeProgress:Number = (getTimer() - startTime)/drawingTime; 
    var drawingProgress:Number = degrees/degreeLimit; 

    // When the drawing progress catches the time progress 
    // the loop will end. It will resume on the next frame. 
    while (drawingProgress < timeProgress) 
    { 
     degrees += 1; 

     // It's better than a property on target canvas, 
     // which could be Sprite or Shape, they wouldn't take random fields. 
     var anAngle:Number = degrees * Math.PI/180; 

     var tox:Number = posX + Math.cos(anAngle) * rad; 
     var toy:Number = posY + Math.sin(anAngle) * rad; 

     mc.graphics.lineTo(tox, toy); 

     // We should know when to stop it. 
     if (dergees >= degreeLimit) 
     { 
      mc.removeEventListener(Event.ENTER_FRAME); 
      return; 
     } 

     // Update the drawing progress. 
     drawingProgress:Number = degrees/degreeLimit; 
    } 
}