+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Animation CSS ou JS? (/showthread.php?tid=6774)
RE: Animation CSS ou JS? - Argorate - 10-04-2013
Si c'est plus optimisé pourquoi s’arrêter en si bon chemin?
RE: Animation CSS ou JS? - archANJS - 10-04-2013
Même si c'était possible, je ne crois pas que ce serait une bonne chose. Premièrement, ça dénaturerait la séparation logique de la chose (ce serait comme demander à HTML d'enregistrer et de manipuler les données...). Et puis secundo, rien ne dit que cela serait encore optimisé. Là, oui, je te l'accorde, c'est le cas, le langage étant accéléré par le navigateur comme l'a dit Sephi. Mais si jamais on en venait à gérer tout le DOM et les events... rien ne dit que ça serait encore le cas, accéléré ou pas.
Mais surtout, CSS n'est pas fait pour ça (même CSS3). Des animations, oui, mais plutôt dans l'idée de "manipuler" les éléments, et non de les animer (les agrandir/rapetisser, tourner, etc, d'accord, mais pas les bouger ni les animer).
RE: Animation CSS ou JS? - Plume - 10-04-2013
(10-04-2013, 01:11 AM)Argorate a écrit : EDIT: d'ailleurs comment il lance l'anim sur ton lien depuis un click d'un lien du coup?
Au clic sur le lien, il ajoute la classe active au conteneur des éléments.
(10-04-2013, 02:02 AM)archANJS a écrit : Même si c'était possible, je ne crois pas que ce serait une bonne chose. Premièrement, ça dénaturerait la séparation logique de la chose (ce serait comme demander à HTML d'enregistrer et de manipuler les données...). Et puis secundo, rien ne dit que cela serait encore optimisé. Là, oui, je te l'accorde, c'est le cas, le langage étant accéléré par le navigateur comme l'a dit Sephi. Mais si jamais on en venait à gérer tout le DOM et les events... rien ne dit que ça serait encore le cas, accéléré ou pas.
Mais surtout, CSS n'est pas fait pour ça (même CSS3). Des animations, oui, mais plutôt dans l'idée de "manipuler" les éléments, et non de les animer (les agrandir/rapetisser, tourner, etc, d'accord, mais pas les bouger ni les animer).
C'est pas totalement vrai. Tu peux bouger des éléments en CSS3.
RE: Animation CSS ou JS? - Argorate - 10-04-2013
avec translate?
RE: Animation CSS ou JS? - Xenos - 10-04-2013
Javascript peut se charger de lancer l'animation, en appliquant une classe à un objet, et CSS s'occupe d'animer les objets d'une classe donnée. L'animation n'est donc que gérée par CSS, son lancement (qui ne fait pas partie de l'animation à mon sens car avant de lancer l'animation, il n'y a pas d'animation) étant du ressort du javascript.
Avec translate, oui. Ou tout simplement avec top/right/bottom/left + transition, dans un @keyframe (animation) ou non.
CSS permet la présentation, ce qui inclus effectivement agrandir, tourner, mais aussi bouger, déplacer, étirer...
Ce que CSS ne gère pas, et qui est du ressort du javascript, c'est l'évènementiel, c'est à dire la condition qui va lancer l'animation (lancement qui se fait en appliquant une classe donnée à l'objet par exemple).
Après, il est possible d'utiliser, comme indiqué plus en amont, le pseudo-sélecteur ":target", qui permet d'appliquer une règle CSS si et seulement si l'ancre de la page (ce qu'il y a apres le "#" dans une URL) renvoie à l'objet du sélecteur (exemple: #id:target { } définit des règles qui ne seront appliquées que si l'objet #id est l'ancre utilisée; ou encore, .classe:target {} est appliqué si et seulement si l'objet ciblé par l'ancrage est de class "classe").
Enormément d'animations peuvent se faire via CSS, puisque celui-ci gère le PRS 3D (Position Rotation Scale indépendamment dans chacune des 3 dimensions). Une très très grande majorité (pour ne pas dire toutes) les animations peuvent se décomposer en éléments P ou R ou S, et "il n'y a plus qu'à" assembler ces éléments pour faire l'animation. Par exemple, les animations de personnages 3D de jeux vidéos sont basés sur le PRS (pour les JV qui datent un peu, environ 7 ans).
RE: Animation CSS ou JS? - Argorate - 10-04-2013
oué du coup je vais voir pour mes animations si je peux pas faire du css pour les déplacements de personnage par exemple.
Par contre, j'ai pas compris le "ou non" pour @keyframe. Ce sont toutes des animations que l'on définit avec @keyframe non?
Et dernier truc, quel intérêt que chaque navigateur mette leur préfixe -moz- -ms- -webkit- etc.. pour dire et faire exactement la même chose?
Pourquoi le navigateur ne se débrouille pas tout seul?
Genre pour un border radius il faut la version sans aucun préfixe + toutes celles avec chacun des préfixes... pourquoi le navigateur (qui sait s'il est lui même -moz- ou -webkit- ou autre) à besoin que la règle avec le préfixe soit écrite en plus de celle sans aucun prefixe? ça j'avoue que je comprends pas, ça fait des css a rallonge pour rien
RE: Animation CSS ou JS? - Xenos - 10-04-2013
Les préfixes sont là car les navigateurs n'ont pas implémenté les règles telles que définies par la norme CSS3 (pour plusieurs raisons: règles normées trop compliquées ou règles non encore officielles sont les principales, c'est pour cela que -moz-* est souvent utilisable avant que la règle *, issue de la norme, ne le soit).
Les navigateurs qui comprennent la règle sans préfixe ignorent (je crois) la règle préfixée (ou, en tous cas, la règle préfixée devient obsolète). Utiliser la règle non préfixée + l'ensemble des règles préfixées permet d'élargir la gamme de navigateurs compatibles. Après, oui, ca alourdis le code, mais je pense (j'espère, sinon, il faudrait y remédier) qu'il existe des outils sur le web qui ajouteraient l'ensemble des préfixes aux règles qui les requièrent (c'est à dire un genre de script PHP qui prendrait, en entrée, un CSS sans préfixe et qui sortirait un CSS avec toutes les règles préfixables qui seraient préfixées).
Keyframes permet de faire changer les règles CSS au fil du temps, c'est donc une méthode d'animation. Mais il suffit d'appliquer une règle de type "transition" à un objet DOM, et de changer, dans le CSS, sa position (par exemple, avec le pseudo-sélecteur ":hover") pour qu'il y ait une animation de translation de la valeur de départ de l'objet, jusqu'à la nouvelle valeur spécifée.
En d'autres mots, l'animation @keyframes permet de faire une animation au sens strict, qui se répète ou non, qui dure plus ou moins longtemps, mais surtout, qui se déroule sans lien avec les évènements hover ou click ou autres de la page. En revanche, grâce à ces évènements (via javascript ou via les pseudo-sélections CSS ":*"), on peut modifier une valeur de style d'un objet, et si une durée de transition (via la règle "transition") est définie, alors il y aura un effet "animé", au sens strict, un effet de "transition" (mais une transition, en un sens, est une animation, simple).
RE: Animation CSS ou JS? - niahoo - 10-04-2013
Du coup avec cette technique, est-ce que c'est possible d'animer le changement de couleur du fond du body au survol d'un lien ?
RE: Animation CSS ou JS? - Argorate - 10-04-2013
bin si j'ai bien suivi, il suffit de faire une animation qui change le body et de la déclencher sur le hover de ton lien, j'ai bon?
Mais dans ce cas, il faut plus utiliser le animate de jquery en gros. faut faire des animations css et les faire déclencher par le js, non?
RE: Animation CSS ou JS? - Xenos - 10-04-2013
Les sélecteurs CSS sont descendants, et non ascendants: l'évènement "hover" doit avoir lieu sur un parent de l'objet auquel appliquer l'animation. On ne pourra donc pas appliquer d'animation au "body" sur un ":hover" d'un lien, en tous cas, en CSS pur. En javascript, pas de problème (c'est ce pour quoi javascript est fait d'ailleurs).
Citation :faut faire des animations css et les faire déclencher par le js, non?C'est ce que je pense être le mieux, dans le cas où l'animation est à appliquer à un objet-parent, ou en tous cas, à un objet non-enfant direct de l'objet qui porte l'évènement. Dans le cas où l'animation est appliquée à un objet enfant de l'objet qui porte l'évènement, CSS seul peut suffire, mais ce cas-ci est un peu plus annexe alors si vous voulez faire "simple", ignorez-le et utilisez javascript pour déclancher toute animation quelle qu'elle soit, et CSS3 pour l'animation en elle-même. C'est le meilleur compromis, je pense, entre performances (animations CSS3 donc optimisée) et maintenance (CSS3 pour la présentation, javascript pour l'évènementiel).
EDIT
D'après le draft CSS4 cité sur stack overflow, cela serait possible d'appliquer un lot de règle CSS à un élément "parent" de l'objet ayant subit l'évènement, grâce au marqueur "!" qui détermine l'élément, dans un sélecteur CSS, auquel appliquer les règles.
En temps normal, les règles s'applique sur le dernier élément du sélecteur CSS:
body div.class #id
{
/*Règles appliquées sur le dernier élément du sélecteur,
c'est à dire, sur le #id*/
}
body .classe
{
/*règles appliquées sur le dernier élément du sélecteur,
c'est à dire sur .classe (qui se trouve être un enfant direct ou indirect de body)*/
}
Grâce au "!", on peut alors dire que les règles CSS doivent être appliquées au body:
body! a:hover
{
/* Ces règles sont appliquées à l'objet "body" dès l'instant où ce sélecteur "body a:hover" est valide,
en d'autres mots, cela applique les règles sur le "body" au survol de n'importe quel lien contenu dans ce "body"*/
}
Mais ce ne sera pas avant un moment, le CSS4 étant encore en draft. Peut-être que certains navigateurs l'implémente déjà...
}