Aller au contenu

sEllipse Node

Par Kriss Norde

Le sEllipse génère un cercle ou une ellipse vectoriel. Width = Height donne un cercle parfait ; différent produit une ellipse. Sa capacité à créer des arcs animables via Length/Position en fait un outil de choix pour les loaders, reveal circulaires, et animations de révélation radiale.

Aperçu

Le sEllipse est le deuxième shape primaire (après sRectangle) du système Shape. Il génère un cercle/ellipse paramétrique avec les mêmes options que sRectangle : Fill, Outline, Border Width, Length pour write-on.

L'atout spécifique de l'ellipse : le Length crée un arc (segment circulaire), et Position positionne l'ouverture de l'arc. Animer ces deux paramètres = arc qui tourne ou qui se remplit, pattern visuel de base des loaders UI.

Où trouver ce node

  • Effects Library : Tools > Shape > sEllipse
  • Ajout rapide : clic droit dans le Node Editor → Add Tool > Shape > sEllipse

Inputs

  • Aucun input requis - générateur pur.
  • Input optionnel si on chaîne avec un autre shape node en amont.

Configuration

Cercle simple :
sEllipse (Width = Height) → sRender → Merge 2D FG

Loader circulaire (arc qui tourne) :
sEllipse (Solid OFF, Border Width 0.005, Length 0.25, Position animée 0→1)
  → sRender → Merge

Donut (anneau plein) :
sEllipse grande → sBoolean Subtract ← sEllipse petite
  → sRender

Ring/Halo :
sEllipse (Solid OFF, Border Width élevée) → sRender → Glow → Merge Screen

Onglet Controls

Width / Height
Dimensions. Width = Height = cercle parfait. Différents = ellipse étirée.
Angle
Rotation de l'ellipse autour du centre (utile uniquement si Width ≠ Height).
Solid
Activé = rempli. Désactivé = contour seul (anneau / cercle creux).
Border Width
Épaisseur du contour. Pertinent surtout quand Solid = désactivé, mais influence aussi le tracé write-on.
Offset (X / Y)
Position du centre.
Length
1.0 = cercle fermé. < 1.0 = arc (portion de cercle). Animable pour révélations radiales.
Position
Position de l'ouverture de l' arc le long du cercle. 0 = à droite (3 heures), 0.25 = en bas (6 heures), etc. Animable pour un arc qui tourne.
Cap Style
Extrémités du contour quand Length < 1 : Flat, Round, Square.
Allow Combining
Gestion de l'alpha lors des superpositions (utile dans un sBoolean).

Arc animations via Length et Position

La combinaison Length + Position est la fonctionnalité signature du sEllipse :

Length animé 0 → 1
L'arc se dessine progressivement = révélation circulaire write-on. Classique pour des effets de « dessin » ou compteurs qui se remplissent.
Position animée 0 → 1 avec Length fixe
Un segment de longueur constante qui tourne autour du centre. C'est l'animation de spinner / loader UI.
Les deux animés
Loader style Material Design : l'arc grandit puis rétrécit pendant qu'il tourne. Combinaison des deux animations.

Onglet Style

  • Fill Color - couleur du remplissage (si Solid activé).
  • Border Color - couleur du contour.
  • Gradient options - remplissage gradient linéaire ou radial.

Cas d'usage

  • Loader / spinner UI - sEllipse Solid OFF, Length 0.25, Position animée 0→1 en boucle = loader circulaire Material Design.
  • Compteur radial / progress ring - Length animée 0→1 sur la durée d'une progression = cercle qui se remplit. Classique stats / UI apps.
  • Iris reveal - sEllipse utilisé comme mask via Matte Control = effet diaphragme de caméra qui s'ouvre/ ferme.
  • Ring / halo sci-fi - Border Width élevée + Solid OFF + Glow en aval = anneau énergétique.
  • Donut / anneau plein - sEllipse grande + sBoolean Subtract + sEllipse petite = anneau rempli couleur, forme propre.
  • Bubble / pastille - cercle rempli comme fond de notification, badge, pastille de couleur.
  • Logo circulaire animé - plusieurs sEllipse avec arcs décalés en rotation = animation de logo complexe.

Astuces

  • Pour un cercle parfait: Width = Height exactement. Même une différence de 0.001 produit une ellipse visible en high-res.
  • Length 0.25, Position qui tourne = loader classique. Position animée de 0 à 1 en 1-2 secondes, loopable = spinner UI idéal.
  • Cap Style Round pour des arcs au look moderne / friendly (Material, iOS), Flat pour un look technique / broadcast.
  • Animer 2 sEllipse en contre-sens pour un effet « double ring » dynamique (loaders ufo, portails sci-fi).
  • Border Width proportionnel - une border trop fine devient invisible en basse résolution. Doubler la border si on scale down le rendu.
  • Combiner avec sTransform - faire tourner l'ensemble de l' ellipse (pas juste l'arc) via sTransform en aval = animation à deux niveaux.
  • Pour un cercle parfait rapide, utiliser sRectangle avec Corner Radius 1.0 et Width = Height - même résultat, parfois plus pratique si on veut pouvoir basculer sur un rectangle arrondi dans la même timeline.