Анимированная круговая диаграмма в 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.

Пока что-то вроде этого работает, 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); 

}