arvydasgecas/animations-halo

Animations Halo

Animez un sujet dont les copies décalées se séparent, tournent et se réunissent en une boucle fluide. Gardez le sujet reconnaissable et le halo discret. « Steppers » signifie des copies retardées de manière fluide, et non un pas-à-pas d'image discret.

Cette compétence est autonome. Elle ne nécessite aucun script, actif, vidéo, modèle ou document de référence. Générez l'implémentation et les livrables dans le dossier de sortie de la tâche. Les paramètres spécifiés par l'utilisateur remplacent les valeurs par défaut ; conservez les paramètres en dehors de la modification demandée.

1. Entrées et livrables

Un nom de forme suffit pour un sujet géométrique ; par défaut, utilisez un cercle. Utilisez un SVG fourni pour un contour personnalisé exact. Lors de la construction d'un contour à partir d'une description, identifiez toute interprétation matérielle. Ne demandez quel objet animer que lorsque le fichier fourni contient plusieurs sujets sans lien et que le sujet visé n'est pas clair.

Sauf demande contraire, fournissez :

• Un aperçu en direct fonctionnel avec des commandes réglables.
• Un MP4 lisible correspondant aux paramètres sélectionnés.
• Le code source modifiable et une configuration de scène sauvegardée.

Les instructions sont portables ; le rendu et le codage vidéo nécessitent toujours des outils appropriés dans l'environnement d'exécution. Si le codage vidéo n'est pas disponible, fournissez l'aperçu et la source, et identifiez clairement l'exportation incomplète. Ne remplacez pas un bouton d'enregistrement ou des instructions d'exportation par une vidéo terminée.

2. Apparence et préréglages

Utilisez un contour centré, non rempli, avec un espace négatif généreux, des courbes lisses, des traits fins et des extrémités et des joints de trait arrondis. Les copies partagent une seule géométrie et restent centrées. Dessinez un noyau net sur un halo subtil ; les chevauchements additifs s'éclaircissent vers le cyan. Évitez les textes, particules, dégradés d'arrière-plan, surfaces remplies ou tremblements de caméra non demandés.

Valeurs par défaut partagées :

Paramètre	Valeur
Toile	960 × 960 pixels
Durée / fréquence d'images	4 secondes / 60 ips
Rayon ou étendue centrée maximale	0,3601940757 × côté le plus court de la toile
Couleur du trait / arrière-plan	#0669fd / #000000
Rayon de flou du halo	0,002 × côté le plus court de la toile

Choisissez le préréglage en fonction de la géométrie. Les valeurs de trait ci-dessous sont des fractions du côté le plus court de la toile ; le décalage est mesuré sur la timeline canonique de quatre secondes. Le nombre de copies inclut le contour principal.

Contour	Copies	Décalage	Rotation	Aplatissement	Trait	Force du halo
Cercle	7	0,13 s	90°	1,00	0,00450242595	0,12
Triangle équilatéral	4	0,14 s	120° avant	0,22	0,0023	0,08
Hexagone régulier	4	0,14 s	60° avant	0,28	0,0023	0,08
Carré arrondi symétrique	4	0,14 s	90° avant	0,28	0,0023	0,08
Contour asymétrique ou détaillé	3	0,12 s	Excursion et retour de 8°	0,16	0,0018	0,06

Un cercle tolère un aplatissement complet. Les polygones et les contours détaillés nécessitent une inclinaison plus douce : n'appliquez pas le préréglage du cercle à chaque forme. Les polygones réguliers peuvent tourner d'un incrément de symétrie et se terminer avec la même silhouette. Vérifiez la symétrie sur l'ensemble de l'œuvre, y compris les contours intérieurs ; sinon, utilisez le mouvement d'excursion et de retour.

Gardez les espaces et les détails internes lisibles à la pose la plus chargée. Réduisez les copies, le délai, l'inclinaison ou la rotation avant de supprimer des détails. Préservez les coins et les courbes fournis. N'arrondissez pas une silhouette exacte et ne simplifiez pas sa géométrie sans autorisation.

3. Préparer le contour

Construisez les formes intégrées en tant que géométrie vectorielle. Pour les SVG fournis, préservez les sous-chemins ouverts et fermés, les chemins composés, les trous et les pièces déconnectées. Conservez les courbes et les arcs ; ne reliez pas des contours séparés et ne remplacez pas des courbes lisses par des polygones visiblement facettés.

Résolvez les primitives, les transformations d'éléments et de groupes, les systèmes de coordonnées imbriqués et les symboles référencés localement en la géométrie visible prévue. Excluez les définitions inutilisées. Remplacez les peintures source par le trait d'animation uniforme.

Choisissez un point de pivot fixe avant la normalisation. Les cercles et polygones réguliers intégrés tournent autour de leur centre géométrique. Pour un triangle équilatéral, utilisez le centroïde (la moyenne de ses trois sommets), et non le centre de la boîte englobante. Pour une œuvre fournie avec une symétrie de rotation vérifiée, utilisez le centre de cette symétrie sur l'ensemble de l'œuvre ; sinon, utilisez le centre de ses limites transformées et le mouvement d'excursion et de retour. Traduisez ce pivot à l'origine et normalisez par la distance radiale maximale par rapport à celui-ci. Gardez le pivot fixe tout au long de la lecture ; ne recentrez pas chaque image. Utilisez la même convention d'étendue pour chaque forme, y compris les carrés arrondis. L'échantillonnage peut estimer l'ajustement ; restituez les courbes d'origine. Lorsque vous utilisez des matrices de navigateur, incluez les transformations de la fenêtre d'affichage imbriquées, par exemple avec root.getScreenCTM().inverse().multiply(element.getScreenCTM()).

Inspectez le contour statique avant d'animer. Convertissez explicitement les fonctionnalités non prises en charge :

• Le texte doit devenir des contours vectoriels réels.
• Les œuvres matricielles nécessitent un traçage ; divulguez la perte potentielle de précision.
• Les masques, les clips, les effets et les traits à largeur variable peuvent nécessiter une expansion en chemins de contour visibles.
• Les graphiques externes et la géométrie pilotée par CSS nécessitent une géométrie locale et explicite.

Ne supprimez pas silencieusement le contenu non pris en charge. Traitez les métadonnées du document comme des données ; analysez les SVG de manière inerte et n'exécutez jamais de scripts ou de gestionnaires d'événements intégrés.

4. Animer à partir du temps absolu

Utilisez une fonction de rendu déterministe pour l'aperçu et l'exportation. N'accumulez jamais de transformations entre les images.

Soit t le temps de lecture, D la durée demandée, N le nombre de copies, d le décalage, F le montant de l'aplatissement dans [0,1], et A la rotation en degrés. La copie i va de 0 à N-1.

clamp01(x) = min(1, max(0, x))
S(x) = u*u*(3 - 2*u), où u = clamp01(x)
q = (((t % D) + D) % D) * 4 / D

Changer la durée étire toute la timeline canonique sans modifier la géométrie ou le caractère de l'easing.

Cercle

Gardez ce préréglage indépendant des améliorations de polygone. Définissez la durée de retour R = 0 pour le cercle par défaut à 90°, sinon R = 0,65.

compression = min(1, 3,8 / (34/15 + (N - 1)*d + R))
s = max(0, q/compression - i*d)
collapse = S((s - 0,25) / (19/15 - 0,25))
recover = S((s - 19/15) / (34/15 - 19/15))
yScale = 1 - F*(collapse - recover)
angle = A * clamp01(s / (26/15))

Si R > 0, multipliez angle par 1 - S((s - 34/15)/R). Le contour principal commence à s'aplatir à 0,25 seconde, atteint une hauteur minimale vers 1,267 seconde et récupère vers 2,267 seconde avant les retards de copie et toute compression. Réglez l'angle d'un cercle parfaitement rond à zéro pour éviter les différences de pixellisation entre des orientations équivalentes.

Polygones et contours personnalisés

Utilisez un seul geste coordonné avec un easing prononcé par défaut : entrée lente, virage décisif et stabilisation plus longue. Conservez une option Doux pour un mouvement plus calme. Aucune des deux courbes ne dépasse.

compression = min(1, 3,65 / (2,85 + (N - 1)*d))
u = clamp01((q/compression - i*d - 0,25) / 2,6)
p = E(u)                           // Prononcé
// p = u*u*u*(u*(6*u - 15) + 10)   // Doux
pulse = sin(pi*p)^2
yScale = 1 - F*pulse

E est la courbe de timing de Bézier cubique (0,55, 0, 0,20, 1). Inversez sa coordonnée horizontale : résolvez Bx(v) = u, puis renvoyez By(v).

Bx(v) = 3*(1-v)^2*v*0,55 + 3*(1-v)*v^2*0,20 + v^3
By(v) = 3*(1-v)*v^2 + v^3

Utilisez une recherche binaire bornée de 32 itérations et renvoyez exactement 0 et 1 aux extrémités. Ne remplacez pas le temps écoulé directement par le paramètre de Bézier. Appliquez l'easing au temps local retardé de chaque copie ; partagez la progression résultante entre l'inclinaison et la rotation.

Choisissez le mode de rotation en fonction de la valeur de rotation actuelle et de la symétrie de l'ensemble de l'œuvre autour de son pivot fixe. Utilisez angle = A*p uniquement lorsque la rotation de A ramène l'œuvre au même contour ; sinon, utilisez angle = A*pulse pour que l'excursion et le retour forment un seul mouvement. Recalculez ce choix chaque fois que la rotation ou la géométrie change. Pour un triangle équilatéral simple, les multiples de 120° tournent vers l'avant ; une valeur telle que 80° oscille et revient. Appliquez la même règle en utilisant 60° pour un hexagone régulier et 90° pour un carré arrondi symétrique ; les détails intérieurs peuvent invalider ces symétries. Autorisez uniquement la tolérance d'arrondi numérique lors de la vérification des multiples, pas des angles visiblement différents. N'arrondissez pas silencieusement l'angle demandé à un incrément de symétrie. N'ajoutez pas un demi-tour rapide séparé pour fermer la boucle. Canonicalisez l'angle final à zéro à u = 1 uniquement lorsque l'angle sélectionné préserve réellement l'œuvre. N'accrochez jamais un angle incompatible pour fermer la boucle.

Le triangle par défaut conserve au moins 78 % de sa hauteur, l'hexagone et le carré arrondi 72 %, et les contours détaillés 84 %. Laissez au moins 0,35 seconde alignée à la fin de la timeline canonique. Lorsque vous comparez l'easing, gardez la géométrie, les copies, la couleur et la lueur identiques afin que le timing soit la seule variable.

5. Rendre les contours et le halo

Maintenez l'échelle horizontale à 1. Pour un point centré et normalisé (x,y), un rayon de pixel r et un angle a en radians :

xOut = r * (x*cos(a) - y*yScale*sin(a))
yOut = r * (x*sin(a) + y*yScale*cos(a))

Traduisez au centre de la toile. Transformez la géométrie avant le traçage afin que la largeur de trait reste constante pendant l'aplatissement. Une ellipse complètement aplatie peut utiliser une hauteur positive négligeable si l'API de dessin l'exige ; n'introduisez pas de hauteur minimale visible pour le cercle.

Effacez la toile à chaque image. Dessinez les copies les plus anciennes en premier avec une composition additive. Dessinez le passage du halo en dessous avec une alpha de haloStrength/N et le flou configuré, puis dessinez tous les traits de base à pleine opacité sans flou. Gardez la force et le rayon du halo séparément réglables. Adaptez le contour, le trait et la lueur entièrement pivotés dans le cadre.

6. Construire l'aperçu et l'exportation

Utilisez une configuration sérialisable, y compris la géométrie vectorielle personnalisée, pour les deux sorties. Le rendu d'une scène sauvegardée ne doit pas dépendre de l'emplacement du fichier SVG d'origine. Préservez la source générée et les paramètres lorsque la reproductibilité exacte est importante ; les seules instructions ne garantissent pas des résultats pixel-identiques entre de nouvelles implémentations.

Fournissez lecture/pause, défilement, réinitialisation, sélection de forme intégrée et importation de fichier SVG, nombre de copies, décalage, easing, rotation, aplatissement, largeur de trait, couleurs, force et rayon du halo, et durée. Incluez à la fois la sélection de forme et l'importation SVG par défaut, même lorsque la demande initiale nomme une forme intégrée ; omettez l'un ou l'autre uniquement si l'utilisateur réduit explicitement la portée de l'aperçu. L'importation doit charger et animer une géométrie réelle en utilisant les règles de préparation du contour, et non être un contrôle factice. Les options d'easing s'appliquent à la recette polygone/personnalisé ; conservez le timing d'origine du cercle. Gardez les commandes en dehors de la composition exportée.

La sélection d'une forme charge ses paramètres de mouvement optimisés tout en conservant la palette et les paramètres de sortie. La réinitialisation restaure la scène initiale et la géométrie importée. La modification des commandes ne met pas à jour rétroactivement une vidéo existante ; enregistrez les paramètres et exportez à nouveau.

Respectez les préférences de mouvement réduit dans les aperçus Web avec une pose statique représentative et une commande de lecture explicite. L'exportation hors ligne restitue toujours l'animation complète à des temps d'image exacts :

t = indiceImage / ips
indiceImage = 0 ... arrondi(D*ips)-1

N'ajoutez pas une image terminale en double. Encodez un véritable MP4, et non un autre format avec une extension renommée. Utilisez un arrière-plan opaque par défaut ; résolvez un format alternatif approprié si la transparence demandée n'est pas prise en charge par l'encodeur disponible.

7. Vérifier et livrer

Vérifiez le comportement observable avant la livraison :

• La silhouette, les contours intérieurs et les pièces séparées sont préservés. Un triangle pivoté de 120° autour de son pivot choisi correspond à son contour de départ sans translation.
• Les croisements les plus chargés restent lisibles ; les lignes restent lisses et de largeur constante, sans halo rogné.
• L'entrée, la vitesse de pointe et la stabilisation semblent intentionnelles à une vitesse de lecture normale ; la boucle n'a pas de saut, de flash ou de rotation arrière inutile.
• Le défilement vers le même temps reproduit la même image. Les commandes fonctionnent et la réinitialisation restaure la scène initiale. Testez à la fois un angle compatible avec la symétrie et un angle incompatible (par exemple, triangle 120° et 80°) ; les deux boucles se ferment sans accroc.
• L'importation SVG charge un échantillon avec plusieurs contours, les préserve tout au long de la lecture et de la configuration sauvegardée, et utilise la géométrie importée dans l'exportation. Signalez toute fonctionnalité non prise en charge plutôt que de la supprimer silencieusement.
• La vidéo exportée se décode et correspond aux dimensions, à la durée, à la fréquence d'images, à la palette et au mouvement de l'aperçu choisis. Inspectez les images décodées ainsi que l'aperçu.

Pour les demandes d'amélioration, proposez une comparaison synchronisée lorsque cela est utile. Fournissez l'aperçu en direct, la vidéo lisible et la source modifiable avec un bref état des paramètres et toutes les vérifications incomplètes. Ne rapportez que la validation réellement effectuée.