Animación de barra de progreso circular

Quiero crear una animación de progreso circular simple con Adobe After Effect o Adobe Flash o cualquier otro software que pueda sugerir. Algo como esto:

Barra de progreso

Suponiendo que los activos gráficos estén disponibles y solo quiero la animación de relleno. Supongo que necesito alguna técnica de enmascaramiento para crear el movimiento de relleno. Pero no tengo idea de cómo crear una máscara circular creciente. Si fuera un progreso horizontal, solo necesitaría cambiar el tamaño de la máscara para revelar la capa subyacente gradualmente. Pero ¿qué pasa con esto? Cualquier sugerencia sería apreciada.

Me vienen a la mente algunos ejemplos de código: raphaeljs.com/polar-clock.html y css-tricks.com/css-pie-timer (ejemplo de trabajo: codepen.io/HugoGiraudel/pen/BHEwo )

Respuestas (2)

Puede dibujar formas arbitrarias utilizando la clase Graphics de Flash. Dicho esto, parece que solo necesita la animación final, por lo que probablemente sea una exageración, pero si coloca este código en la línea de tiempo, dibujará una máscara de progreso de estilo circular. Puede editar el tamaño (y aumentar los segmentos si se ve tosco) usando las constantes.

import flash.display.Sprite;
import flash.display.GraphicsPath;
import flash.events.Event;

const INNER_RADIUS:Number = 50;
const OUTER_RADIUS:Number = 70;
const SEGMENTS_PER_RADIAN:uint = 10;

var maskGraphic:Sprite = new Sprite();
maskGraphic.x = stage.stageWidth * 0.5;
maskGraphic.y = stage.stageHeight * 0.5;
addChild(maskGraphic);

addEventListener(Event.ENTER_FRAME, tick);
var percentage:Number = 0;
function tick(e:Event):void {
    percentage += 0.5;
    drawProgress(percentage);
}

function drawProgress(percentage:Number):void {
    percentage = percentage > 100? percentage % 100 : percentage;

    maskGraphic.graphics.clear();
    maskGraphic.graphics.beginFill(0xFF00FF, 1.0);

    var outerEdge:GraphicsPath = new GraphicsPath();
    var innerEdge:GraphicsPath = new GraphicsPath();

    var radians:Number = percentage * 0.01 * Math.PI * 2;
    var divisions:uint = Math.round(radians * SEGMENTS_PER_RADIAN);
    var ang:Number;
    for (var i:uint = 0; i <= divisions; i++) {
        ang = i / divisions * radians;
        outerEdge.lineTo(Math.sin(ang) * OUTER_RADIUS, -Math.cos(ang) * OUTER_RADIUS);
        ang = (divisions - i) / divisions * radians;
        innerEdge.lineTo(Math.sin(ang) * INNER_RADIUS, -Math.cos(ang) * INNER_RADIUS);
    }
    maskGraphic.graphics.moveTo(Math.sin(0) * OUTER_RADIUS, -Math.cos(0) * OUTER_RADIUS);
    maskGraphic.graphics.drawPath(outerEdge.commands.concat(innerEdge.commands), outerEdge.data.concat(innerEdge.data));
}
Esto es genial David, y gracias por tu contribución. Lo pruebo y vuelvo a informar.

En un apuro, After Effects tiene un efecto de transición llamado "Clock Wipe"... !

Animación de barra de progreso circular
RespuestasAquíPolítica de privacidad1y, 0v