AS3中的動畫餅圖

Question

我想在AS3中製作一個動畫餅圖，它只顯示一個var，但是這個var每隔X秒更新一次。我想要做的就是將這個餅圖動畫更新爲具有補間動畫的新「狀態」。我無法工作的東西。我已經嘗試使用tweenmax等。

這是我的餅圖代碼生成器：

var degree: Number = 90; 
var degChange: Number = 1; 

var circleR: Number = 100; 
var circleX: Number = 100; 
var circleY: Number = 100; 
var angleR: Number = circleR/4; 

var spBoard: Sprite = new Sprite(); 
spBoard.x = circleX; 
spBoard.y = circleY; 
C1.Maskmc.addChild(spBoard); 


var shFill: Shape = new Shape(); 
shFill.graphics.lineStyle(1, 0x000000); 
shFill.graphics.moveTo(0, 0); 
shFill.graphics.lineTo(circleR, 0); 
shFill.x = 0; 
shFill.y = 0; 

var shAngle: Shape = new Shape(); 

spBoard.addChild(shFill); 

function updatePicture(t: Number): void { 
    var radianAngle: Number //=// t * Math.PI/180.0; 
    var i: int; 

    shFill.graphics.clear(); 

    shFill.graphics.moveTo(0, 0); 

    shFill.graphics.beginFill(0xFF00FF, 1); 

    for (i = 0; i <= t; i++) { 

     shFill.graphics.lineTo(circleR * Math.cos(i * Math.PI/180), -circleR * Math.sin(i * Math.PI/180)); 
     trace(i) 
    } 

    shFill.graphics.lineTo(0, 0); 

    shFill.graphics.endFill(); 
} 



var clockTimerTRas: Timer = new Timer(1000, 0); 
clockTimerTRas.addEventListener(TimerEvent.TIMER, UpdateP); 
clockTimerTRas.start(); 


function UpdateP(evt: Event): void { 

    var TurnoEstaHora 
    var TurnoActual_A: int = (it takes a var from a php here) 
    degree = TurnoActual_A * (11.305) 
    updatePicture(degree); 

} 

這正如我前面所說，它只會讓一個圓或取決於從PHP加載了var不完整的圓。

到目前爲止，它的工作原理是這樣的，https://media.giphy.com/media/qiutE2wCo1YXe/giphy.gif

我想補間動畫那個。有任何想法嗎？

謝謝！

Answer 1

下面的例子：

import flash.display.Sprite; 
import fl.transitions.Tween; 
import fl.transitions.easing.*; 


var tempSprite:Sprite = new Sprite(); 
addChild(tempSprite); 
tempSprite.x = 100; 
tempSprite.y = 100; 


function convertAngleToRadians(angle:Number):Number 
{ 
    return angle/180 * Math.PI; 
} 

function fillRound(
    graphics:Graphics, 
    color:uint = 0x000000, 
    alpha:Number = 1, 
    radius:Number = 10, 
    startAngle:Number = 0, 
    endAngle:Number = 360, 
    angleStep:Number = 1):void 
{ 
    var tempRadians:Number; 
    var startRadians:Number = convertAngleToRadians(startAngle); 
    var endRadians:Number = convertAngleToRadians(endAngle); 
    var radiansStep:Number = convertAngleToRadians(angleStep); 


    var tempPoint:Point; 


    graphics.beginFill(color, alpha); 

    if (endAngle % 360 == startAngle % 360) 
    { 
     graphics.drawCircle(0, 0, radius); 

    }else 
    { 
     var pointsCount:Number = Math.ceil((endAngle - startAngle)/angleStep); 
     for (var pointIndex:int = 0; pointIndex <= pointsCount; pointIndex++) 
     { 
      tempRadians = startRadians + pointIndex * radiansStep; 

      tempPoint = new Point(); 
      tempPoint.x = Math.cos(tempRadians) * radius; 
      tempPoint.y = Math.sin(tempRadians) * radius; 

      graphics.lineTo(tempPoint.x, tempPoint.y); 
     } 
    } 

    graphics.endFill(); 
} 

var _curPieStep:Number = 0; 
function get curPieStep():Number 
{ 
    return _curPieStep; 
} 
function set curPieStep(value:Number):void 
{ 
    _curPieStep = value; 

    drawPie(); 
} 

var pieMaxStep:int = 30; 
var pieAngleStep:int = 360/pieMaxStep; 
function drawPie():void 
{ 
    tempSprite.graphics.clear(); 
    fillRound(tempSprite.graphics, 0xFF0000, 1, 100, 0, pieAngleStep * curPieStep); 
} 

var myTween:Tween = new Tween(this, "curPieStep", Bounce.easeOut, 0, pieMaxStep, 4, true); 

你可能只是copy'n'paste到Flash IDE和檢查結果。

Answer 2

試試這個

import flash.utils.Timer; 
import flash.events.TimerEvent; 

var degree: Number = 90; 
var degChange: Number = 1; 

var circleR: Number = 100; 
var circleX: Number = 100; 
var circleY: Number = 100; 
var angleR: Number = circleR/4; 

var spBoard: Sprite = new Sprite(); 
spBoard.x = circleX; 
spBoard.y = circleY; 
C1.Maskmc.addChild(spBoard); 


var shFill: Shape = new Shape(); 
shFill.graphics.lineStyle(1, 0x000000); 
shFill.graphics.moveTo(0, 0); 
shFill.graphics.lineTo(circleR, 0); 
shFill.x = 0; 
shFill.y = 0; 
shFill.graphics.clear(); 

    shFill.graphics.moveTo(0, 0); 

    shFill.graphics.beginFill(0xFF00FF, 1); 

var shAngle: Shape = new Shape(); 

spBoard.addChild(shFill); 

function updatePicture(t: Number): void { 
    var radianAngle: Number //=// t * Math.PI/180.0; 
    var i: int; 
i = clockTimerTRas.currentCount ; 
     shFill.graphics.lineTo(circleR * Math.cos(i * Math.PI/180), -circleR * Math.sin(i * Math.PI/180)); 
     trace(i) 
} 


var TurnoActual_A: int = (100) ; 

var clockTimerTRas: Timer = new Timer(10, TurnoActual_A); 
clockTimerTRas.addEventListener(TimerEvent.TIMER, UpdateP); 
clockTimerTRas.start(); 


function UpdateP(evt: Event): void { 

    var TurnoEstaHora 

    degree = TurnoActual_A * (11.305) 
    updatePicture(degree); 

}