动作脚本：非常慢的动画片段

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;
    }
}