Анимировать заливку круга в ActionScript

Question

Я пытаюсь сделать таймер, и я хочу, чтобы круг всегда показывался. Это начинается зеленый. С течением времени растущий кусочек красного пирога начинает занимать все больше и больше круга, пока весь круг не станет красным. Имеет ли это смысл?

Ограничения в том, что я не могу использовать спрайт, поэтому это должно быть сделано с помощью UIComponent или другого формата. Кроме того, я не могу использовать degrafa. Используемый мной SDK не поддерживает эти методы.

ОБНОВЛЕНИЕ: Сладкий! Спасибо за код. Это работает как чемпион. Единственное, что я сдерживаю, это то, что используемый мной SDK не поддерживает ротацию, но я думаю, что смогу заставить все это работать. Огромное спасибо!! Для других, которые не могут использовать спрайт, просто замените UIComponent там, где спрайт.

ПОСЛЕДУЮЩИЙ: Я почти уверен, что вращение - единственный путь, но возможно ли сделать так, чтобы оно начиналось в положении 12 часов без вращения?

Answer 1

Используйте другую фигуру в качестве маски для раскрытия.

Пример кода для расширения пирога клин

Создайте свой спрайт:

sp = new Sprite();
sp.graphics.beginFill(0xC3C3C3);
drawWedge(sp, 50, 150, 150, ang, 0);
sp.graphics.endFill();
addChild(sp);

Код клина ничьей:

private function drawWedge (obj:Sprite, r:Number, x:Number,
                            y:Number, angle:Number, rotation:Number):void {
    // start at 0,0 so rotation will be around the point of the wedge

    obj.graphics.moveTo(0, 0);
    obj.graphics.lineTo(r, 0);

    var TO_RADIANS:Number = Math.PI/180;


    // calculate 30-degree segments for accuracy
    var nSeg:Number = Math.floor(angle/30);   // eg 2 if angle is 80
    var pSeg:Number = angle - nSeg*30;        // eg 20 if angle is 80

    // draw the 30-degree segments
    var a:Number = 0.268;  // tan(15)
    for (var i:Number=0; i < nSeg; i++) {
        var endx:Number = r*Math.cos((i+1)*30*TO_RADIANS);
        var endy:Number = r*Math.sin((i+1)*30*TO_RADIANS);
        var ax:Number = endx+r*a*Math.cos(((i+1)*30-90)*TO_RADIANS);
        var ay:Number = endy+r*a*Math.sin(((i+1)*30-90)*TO_RADIANS);
        obj.graphics.curveTo(ax, ay, endx, endy);   
    }

    // draw the remainder
    if (pSeg > 0) {
        a = Math.tan(pSeg/2 * TO_RADIANS);
        endx = r*Math.cos((i*30+pSeg)*TO_RADIANS);
        endy = r*Math.sin((i*30+pSeg)*TO_RADIANS);
        ax = endx+r*a*Math.cos((i*30 + pSeg-90)*TO_RADIANS);
        ay = endy+r*a*Math.sin((i*30 + pSeg-90)*TO_RADIANS);
        obj.graphics.curveTo(ax, ay, endx, endy);
    }
    obj.graphics.lineTo(0, 0);

    // rotate the wedge to its correct location in the circle
    obj.rotation = rotation;
    obj.x = x;
    obj.y = y;
}

Тогда используйте это в вашем коде анимации:

if (ang > -1) {
    sp.graphics.clear();
    sp.graphics.beginFill(0xC3C3C3);
    drawWedge(sp, 50, 150, 150, ang, 0);
    ang--; //angle to decrease
}