Kreisförmige ProgressBar-Animation

Ich möchte eine einfache kreisförmige Fortschrittsanimation mit Adobe After Effect oder Adobe Flash oder einer anderen von Ihnen vorgeschlagenen Software erstellen. Etwas wie das:

Fortschrittsleiste

Angenommen, die grafischen Assets sind verfügbar und ich möchte nur die Füllanimation. Ich denke, ich brauche eine Maskierungstechnik, um die Füllbewegung zu erzeugen. Aber ich habe keine Ahnung, wie man eine wachsende kreisförmige Maske erstellt. Wenn es sich um einen horizontalen Fortschritt handeln würde, müsste ich nur die Größe der Maske ändern, um die darunter liegende Ebene allmählich freizulegen. Aber was ist damit? Jeder Vorschlag wäre willkommen.

Einige Codebeispiele fallen mir ein: raphaeljs.com/polar-clock.html und css-tricks.com/css-pie-timer (Arbeitsbeispiel: codepen.io/HugoGiraudel/pen/BHEwo )

Antworten (2)

Mit der Graphics - Klasse von Flash können Sie beliebige Formen zeichnen . Das heißt, es hört sich so an, als ob Sie nur die endgültige Animation benötigen, also ist dies wahrscheinlich übertrieben, aber wenn Sie diesen Code auf der Zeitachse ablegen, wird eine Fortschrittsmaske im Kuchenstil gezeichnet. Sie können die Größe bearbeiten (und die Segmente vergrößern, wenn es grob aussieht), indem Sie die consts.

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));
}
Das ist cool, David, und danke für deinen Beitrag. Ich werde es versuchen und berichten.

Zur Not hat After Effects einen Übergangseffekt namens „Clock Wipe“…!

Kreisförmige ProgressBar-Animation
AntwortenHierDatenschutz-Bestimmungen1y, 0v