Forums Développement Multimédia

Aller au contenu

En réponse à controler une animation css via js


Options du message

  • Anti-spam : un petit exercice
  ou Annuler


Résumé du sujet

Monsieur Spi

Posté 23 October 2018 - 00:04 AM

Re,

J'ai jeté un œil, plutôt malin de jouer sur le delay négatif.

A ajouter dans le CSS :
animation-timing-function: linear;

Je me suis demandé un moment pourquoi ton calcul ne renvoyait pas une animation linéaire.
Image attachée: anim.jpg

Je me suis bêtement attaché au calcul du pourcentage (pourtant bon) alors que ça venait du comportement par défaut de l'anim CSS.

Monsieur Spi

Posté 22 October 2018 - 17:11 PM

Hello,

Merci du retour, très intéressant, j'ai la tête pleine pour aujourd'hui mais je vais me pencher là dessus, ça à l'air sympa et comme c'est pour "jouer", on va pouvoir faire plein de tests :D

paodao

Posté 22 October 2018 - 12:54 PM

salut
j'ai fini par trouver
le turc c'est d'enlever la classe qui joue l'animation, faire appel a une variable qui force le repaint et lui redonner la classe

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Titre de la pagesalut
je post un exemple simplifié de ce que je test (l'animation se joue au scroll sur la page)
la ligne qui compte c'est la ligne 66

                div1.style['animation-delay'] = -p + 's';
 
le problème est donc que cet animation-delay n'est pas pris en compte sur ios quand modifié via js

le fait de pouvoir jouer sur animation-delay permet de faire simplement des animations css complexe
s'il fallait le faire en full js il faudrait ajouter plein de dataset, et plein de calcul lourd en js pour les analyser et appliqué les bon styles au bon moment

salut
l'idée est de pouvoir créer siplement une animation et la controller

avec le systeme que j'ai deja (qui fonctionne partout sauf sur ios) je fait une animation en keyframes
du coup l'animation est extrement simple a faire puisqu'il suffit de rajouter des etapes dans la keyframe avec les proprietes que l'on veux

Pour le faire en js il faudrait faire autant de dataset que de keyframe, puis regarder entre 2 keyframes quelles proprietes on touche pour aller calculer la bonne valeur entre les 2 puis les appliqué en JS (cela veux dire faire des parse sur les valeurs pour voir dans quelle unité on est et faire le bon calcul), c'est faisable, c'est juste ultra lourd, là ou c'est ultra simple en css

Cela ne me bloque pas, ce n'est pas pour un projet en particulier c'est vraiment pour avoir un truc perrein. Pour le moment sur le projet sur lequel je voulais l'utiliser je fait le calcul en js, m...

Monsieur Spi

Posté 19 October 2018 - 18:08 PM

Hello,

Je cherche encore mais j'ai pas mal de boulot donc je ne peux m'y coller que le soir.
Question : pourquoi ne pas faire toute l'anim en JS ?

Je sais que CSS3 est full hardware si tu active la 3D (voir ref sur developper.mozilla.org), mais si ça te bloque complètement pourquoi ne pas directement faire ton anim avec un Canvas (fond transparent et layer CSS) ou avec jQuery pour cibler le DOM ?
Après je ne connais pas la structure de ta page et si tu dois impérativement passer en CSS, mais ça serait sans doute une solution efficace.

En gros, ça peut m'aider à te trouver une solution détournée, elle doit faire quoi ton anim et être structurée comment (DOM ou indépendant genre SVG, Canvas, Video, ....) ?

paodao

Posté 19 October 2018 - 15:58 PM

salut
bon j'avance un peu
il faudrait que je trouve un moyen de forcer le redraw de la page, un peu comme je le fait deja avec IE (body: display none->block) (sauf que ce qui fonctionne sur IE ne fonctionne pas sur IOS)

paodao

Posté 19 October 2018 - 09:43 AM

salut Monsieur Spi et merci de ta réponse

la solution de découper en plein de sous classe, j'ay ai pensé, mais je trouve cela trop lourd, surtout que je n'ai le probleme que sur ios

l'idée est de pouvoir controller la frame ou se trouve une animation keyframe via javascript.

Cela fonctionne tres bien en utilisant un animation-delay negatif (c'est dans la doc w3c)

ex:
sur un element je met le style suivant

  animation-name: plop;
  animation-duration: 1s;
  animation-play-state: paused;
  animation-fill-mode: forwards;
 

le animation-duration: 1s est important.
ensuite, en faisant varié le animation-delay en js (au scroll, dans un interval...) de 0s à -1s (oui...

Monsieur Spi

Posté 18 October 2018 - 17:11 PM

Hello,

Tu veux pouvoir aller à la frame que tu veux dans l'anim quelle que soit l'état de l'anim (c'est à dire même entre deux frames) ou à une frame prédéfinie (50%, 75%, ...) ?

Pour l'instant la solution que je vois là tout de suite en te lisant serait de créer l'anim complète, puis la même découpée en petites anims indépendantes, et simplement changer la classe de ton élément via JS pour pointer vers la sous anim concernée et enchaîner (par exemple via un tableau en JS).

Je vais regarder ce qui plante sur IOS car je ne vois pas trop pourquoi ça bloquerai.

Je suppose que tu as déjà regardé ici : https://developer.ap...hKeyframes.html
section "controling with javascript".

paodao

Posté 18 October 2018 - 14:48 PM

bonjour

je cherche a controller une animation css (keyframe) via js (un peu comme un lecteur video)

j'y arrive très bien en utilisant des animation-delay negatif pointant sur la frame que je souhaite

le problème est que cela ne fonctionne pas sur ios

je cheche donc soit une solution pour que cela fonctionne sur ios soit un autre moyen de pouvoir aller ou je veux dans l'animation

merci

Voir le sujet complet (ouvre une nouvelle fenêtre)