Круговая анимация ProgressBar

Я хочу создать простую круговую анимацию прогресса с помощью Adobe After Effect, Adobe Flash или любого другого программного обеспечения, которое вы можете предложить. Что-то вроде этого:

ProgrssBar

Предполагая, что графические ресурсы доступны, и мне нужна только анимация заполнения. Думаю, мне нужна техника маскировки, чтобы создать заполняющее движение. Но я понятия не имею, как создать растущую круглую маску. Если бы это был горизонтальный прогресс, мне нужно было бы только изменить размер маски, чтобы постепенно раскрыть нижележащий слой. Но как насчет этого? Любое предложение будет оценено.

На ум приходит пара примеров кода: raphaeljs.com/polar-clock.html и css-tricks.com/css-pie-timer (рабочий пример: codepen.io/HugoGiraudel/pen/BHEwo )

Ответы (2)

Вы можете рисовать произвольные фигуры, используя класс Flash Graphics . Тем не менее, похоже, что вам просто нужна окончательная анимация, так что это, вероятно, излишне, но если вы поместите этот код на временную шкалу, он нарисует маску прогресса в виде круговой диаграммы. Вы можете изменить размер (и увеличить сегменты, если это выглядит грубо), используя константы.

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));
}
Это круто, Дэвид, и спасибо за ваш вклад. Я попробую и отчитаюсь.

В крайнем случае, в After Effects есть эффект перехода под названием «Clock Wipe»… !

Да, надеюсь, эти изображения помогут! cl.ly/image/2G3r2Z221t3N/… cl.ly/image/1S1D1U3J1d13/… cl.ly/image/153F291A2d3c/…
Круговая анимация ProgressBar
СпросиСетьПолитика конфиденциальности1y, 0v