使用动画制作动画在圆圈中填充动画

问题描述：

我想制作一个计时器，并且我想要一个始终显示的圆圈。它开始绿色。随着时间的推移，越来越多的红色馅饼片开始占据越来越多的圈子，直到整个圈子变红。那有意义吗？使用动画制作动画在圆圈中填充动画

限制是我不能使用精灵，所以它必须用UIComponent或其他格式完成。另外，我不能使用degrafa。我正在使用的SDK不支持这些方法。

更新：甜！感谢代码。它像一个冠军。我唯一的阻碍是我使用的SDK不支持轮换，但我认为我可以使这一切工作。非常感谢！！对于不能使用精灵的其他人，只需将精灵替换为UIComponent即可。

后续：我很确定旋转是唯一的方法，但它可能使它在12点钟位置开始而不旋转？

答

使用另一个形状作为掩码来执行揭示。扩大馅饼楔形

实例化雪碧

代码示例：

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 
}

使用动画制作动画在圆圈中填充动画

相关推荐