AS3 中的动画饼图

Question

我正在尝试在 AS3 中制作一个动画饼图，它只显示一个变量，但这个变量每 X 秒更新一次。我想做的是用补间动画为这个饼图制作动画以更新到新的 "status"。我做不到的事情。我已经尝试过 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);

您可以将其复制并粘贴到 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);

}

AS3 中的动画饼图

Animated Pie Chart in AS3

animation

actionscript-3

tween