[Astuce] Effet chargement (cercle qui tourne sans fin)

Bonjour, je cherche à réaliser avec after effect ce genre d'effet (il porte peut-être un nom mais je ne le connais pas) . cad un cercle qui évolue sur un cercle et qui laisse derrière lui un trainée de cercles fantômes dont l'opacité et la taille diminue, comme ce qu'on voit par exemple sur le chargement d'une vidéo sur Youtube
Faire évoluer le cercle et diminuer son opacité est faisable en utilisant l'Effet écho, mais c'est la diminution de l'échelle des cercles que je sèche complètement.
Bien sur il est toujours possible de le faire à la main mais je cherche à l'automatiser le plus possible.
Auriez vous quelques pistes ou une méthode à m'indiquer svp ? Merci d'avance pour vos conseils avisés.

 

Bon… je me réponds à moi même mais j'ai fini par trouver un tutorial là dessus en cherchant avec des mots clefs en anglais. L'effet se nomme apparemment Circle loading et voici le lien du tutorial si ça intéresse quelqu'un.

 

Hum… je continue mon fil de discussion tout seul car en fait ce tuto porte sur le fade et la rotation mais je coince toujours sur l'effet d'échelle décroissante que je n'arrive pas à réaliser par rapport au centre de chaque cercle plutôt que par rapport au point d'ancrage…Quelqu'un a une idée dans la salle ?

 

Pour gérer l'offset dans le temps de l'anim de la taille de ton tracé d’ellipse ( j'ai groupé mes copies d'ellipses) :
[CORRECTION]

Code:

OfsT = effect("OFFSET - Time")("Curseur")/25;
Idx =  thisProperty.propertyGroup(3).propertyIndex;
content("Groupe 1").content("Ellipse 1").content("Tracé d'ellipse 1").size.valueAtTime(time+(Idx*OfsT))

Pour dupliquer rapidement tes ellipses et contrôler leur position (il faut déplacer le point de pivot avant):

Code:

OfsR = effect("OFFSET - Rotation")("Curseur");
Idx1 =  thisProperty.propertyGroup(2).propertyIndex;
R = OfsR*Idx1;
R+OfsR

 

Merci de ta réponse et de ton aide 7erence.
Je me sers un peu des expressions mais je suis malheureusement encore une buse sur ce sujet.
A lire ton code je crois comprendre que je dois créer deux paramètre glissière, un nommé paramètre glissière et l'autre paramètre glissière 1.
Aurais tu la gentillesse de me dire dans quelles propriétés et de quoi je dois coller tes deux codes stp ?

 

Pas évident à trouver, j'ai essayé de "décoder" tes deux codes en vain . Il y a une question que je me pose c'est est-ce que je dois partir du tutorial ou pas…j'ai l'impression que non.
Faire plusieurs tracés d'ellipse au sein d'un calque de forme je sais faire, les mettre dans un groupe aussi, mais te parles dans ton commentaire du deuxième code de dupliquer. Ca veux donc dire que je ne dois faire qu'un tracé d'ellipse qui doit se dupliquer automatiquement ? Bref je suis perdu…
C'est la méthodologie de travail qui me fait défaut.

 

Désolé Triphon75 si je t'ai posté cette réponse sans trop d'explication ; c'est que je devais décoller pour la journée....
Je vais prendre un peu de temps pour t'expliquer tout ça...

 

Bon... Je crois qu'on va avoir besoin d'un coup de main pour les index de l'ellipse dans le calque de forme...
Je me rends compte que mon code n'est pas propre... Il marche, mais est mal rédigé.

L'idée est:
RotationEllipse(1)+((1)*OffsetRotation)
RotationEllipse(2)+((2)*OffsetRotation)
RotationEllipse(3)+((3)*OffsetRotation)// le chiffre 1 est l'index de l'ellipse que tu additionnes à sa rotation. Le * OffsetRotation est la valeur d'un paramètre glissière qui permet de choisir l'écart entre RotationEllipse(1) et RotationEllipse(2).
Ça c'est uniquement pour faire ton cercle et avoir un contrôle facile dessus.

Ça c'est pour lire une animation décalée dans le temps:
valueAtTime(time+Index*OffsetTime)//OffsetTime est un paramètre glissière qui gérera l'écart dans le temps. L'index lui sert juste à incrémenter d'1.

En fait, c'est deux fois la même chose : une fois dans la rotation et l'autre dans le temps pour jouer ton animation d’échelle (par exemple) en décalé.

Par-contre, le seul problème, c'est l'index d'une ellipse à l’intérieur d'un calque de forme... Je n'ai pas encore toute les subtilités du maniement des "thisProperty.propertyIndex" et "thisProperty.propertyGroup(1)".


- - -
Mais on peut faire les choses à la main, et ne pas passer par du code. Il suffit juste de décaler les clefs d'anim...

 

Hier, je t'ai fait ça un peu trop rapidement, du coup je me suis un peu emmêlé les neurones.
J'avais oublié d’incrémenté de 1 le propertyGroup.

J'ai corrigé le précédant code.

Pour l'emplacement du premier code
Calque de forme 1 >Groupe 1 > Ellipse 1 > Tracé d'ellipse 1 > Taille
Et après avoir créé un paramètre glissière "OFFSET - Time", tu colles:

Code:

OfsT = effect("OFFSET - Time")("Curseur")/25;
Idx =  thisProperty.propertyGroup(3).propertyIndex;
content("Groupe 1").content("Ellipse 1").content("Tracé d'ellipse 1").size.valueAtTime(time+(Idx*OfsT))

Toutes tes copies viendront chercher l'anime de la Taille ici.

Pour l'emplacement du deuxième code
Et après avoir créé un paramètre glissière "OFFSET - Rotation", tu colles:
Calque de forme 1 >Groupe 1 > Ellipse 1 > Transformer : Ellipse 1 > Rotation

Code:

OfsR = effect("OFFSET - Rotation")("Curseur");
Idx1 =  thisProperty.propertyGroup(2).propertyIndex;
R = OfsR*Idx1;
R+OfsR

 

Merci 7erence je vais essayer d'appliquer tout ça.

 

Ouaip… Bon, c'est pas gagné.
Je pense avoir bien respecté la hiérarchie que tu m'as indiquée. J'ai dans l'expression une erreur m'indiquant qu'elle ne trouve pas le groupe. J'ai du faire un truc de travers. Regarde si tu as le temps sinon c'est pas grave…

 

On dirait que tu-as mélangé tes anciens tests avec ce que je te proposais... :/
Et puis ça n'a pas l'air bien groupé....

Allez!... Je te retourne une capture d'écran:

 

Effectivement je m'étais complètement emmêlé les pinceaux
Je n'ai maintenant plus de msg d'erreur, la décroissance progressive des tailles des cercles ne fonctionne toujours pas.
Bon je résume ce que je crois avoir compris de ton script.
-J'ai créé un calque de forme nommé par défaut calque de forme 1
-J'ai, au sein de ce calque de forme, créé un groupe nommé Groupe 1
-j'ai au sein de ce groupe, j'ai créé tout un tas d’ellipses incrémentées de 1 à 12 parce que je le veux bien.
-ces ellipses sont structurées de la façon suivante: Ellipse 1 comportant un tracé d'ellipse 1, un fond 1 et un tracé 1, ensuite Ellipse 2 comportant un tracé d'ellipse 2, un fond 2 et un tracé 2, etc, et…
-le curseur rotation fonctionne si je le met sur 30° j'ai effectivement un espacement régulier de l'ensemble de mes 12 ellipses car 12*30=360°
-ensuite pour les échelles, si j'ai bien pigé ton script, ça fonctionne de la façon suivante: la taille de l'ellipse 2 va chercher la taille de l'ellipse 1 modulée par le paramètre de glissière offset time. cad que si je keyframe la taille de l'ellipse 1 mettons de 0 px à la valeur temps 0 et et 100px à 1 sec, la taille de l'ellipse 2 devrait aussi s'animer de la même manière sans que j'ai besoin de la keyframer mais avec un décalage géré par la glissière OFFSET Time.
ça me parait assez logique effectivement aussi je ne m'explique pas pourquoi ça ne fonctionne pas.
je te joins une capture d'écran, si tu peux y jeter un œil stp quand tu auras 5 mn pour me dire où je me plante parceque là je sèche. merci d'avance

 

Ok... C'est moi.
J'ai fait deux erreurs:
1) c'était le OfsT qu'il fallait diviser par 25.
2) incrémenter le propertyGroup à 3...

Petit détail supplémentaire - il faudra mettre ton Ellipse 1 en tête de liste.

Code:

OfsT = effect("OFFSET - Time")("Curseur")/25;
Idx =  thisProperty.propertyGroup(3).propertyIndex;
content("Groupe 1").content("Ellipse 1").content("Tracé d'ellipse 1").size.valueAtTime(time+(Idx*OfsT))

 

Yes ! Ca marche ! Merci de tes conseils et de ta patience 7erence
Bon maintenant je m'attaque à l'opacité.
Si j'ai bien compris le truc :
il faut que je. me fasse une nouvelle glissière pour gérer ça. Encore que logiquement c'est pas obligé car ça pourrait être piloté par OFFSET - Time, vu que la valeur opacité s'exprime aussi en pourcentage et que ma taille oscille entre 0 et 100 px mais bon…j'en ai fait une nouvelle et l'ai appelé OFFSET - Opacity afin de bien comprendre le process
Ensuite j'ai modifié le code associé à size et l'ai remplacé par celui ci que j'ai collé dans l'opacité du fond de chaque ellipse:

Code:

OfsO = effect("OFFSET - Opacity")("Curseur")/25;
Idx =  thisProperty.propertyGroup(3).propertyIndex;
content("Groupe 1").content("Ellipse 1").content("Fond 1").opacity.valueAtTime(time+(Idx*OfsO))

J'ai du un peu bidouiller les valeurs de mes points clef pour avoir l'effet voulu.
Maintenant je vois le second problème se profiler à l'horizon c'est la rotation de tout ce bazar. Si j'anime la rotation je suis marron car mes valeurs d'opacité et de tailles sont elle aussi keyframées et ça va me faire n'importe quoi…
En tout cas, encore merci de m'aider car je commence avec cet exemple tout bête à piger (un peu) la structure et la syntaxe des expressions, en tout cas beaucoup plus qu'avec tous les tutoriaux que je me suis injecté en intraveineuse depuis des jours.