[Résolu] Transition CSS, déplacements "lissés"

Bonjour,
j'anime des déplacements d'éléments dans un repère 3D, ces déplacements sont de direction et de distance aléatoires. Il sont initiés par la fonction Javascript setInterval, ainsi, il se répètent à intervalle régulier. J'aimerais que l'on ne puisse pas distinguer le passage d'une direction à une autre, pour ceci, il faudrait que j'obtienne une vitesse de déplacement constante, quelque soit la distance à parcourir, et qu'un "lissage" (cf: Shéma 1) intervienne entre deux directions. Je pense que j'arrive aux limites de CSS, et j'imagine que Javascript sera indispensable pour faire ceci, cependant, j'aimerais éviter d'avoir recours à une librairie.

Edit: Je crois que je devrais préciser qu'il ne s'agit pas vraiment de déplacements: l'application de l'effet consiste à recréer un impression de flux d'air, les éléments sont en longueurs, comme "fixés" par une extrémité (transform-origin:center 0), et c'est l'autre extrémité qui est soumise à ces flux d'air, du coup, plutôt que des déplacements, il s'agit en fait de légers pivotements sur les axes X et Z (cf: Shéma 2).

http://img689.imageshack.us/img689/3872/vzp.png http://img407.imageshack.us/img407/2195/m81.png

Merci de votre aide
Modifié par juliendargelos (27 Jun 2013 - 14:36)

Salut,

Honnêtement, je ne suis pas sûr d'avoir bien compris la nature des déplacements...

Par contre, pour tout ce qui est animations, il vaut mieux utiliser requestAnimationFrame plutôt que setInterval, ou au mois setTimeout je crois. J'ai essayé et la différence au niveau de la qualité du rendu entre setInterval et requestAnimationFrame est très franche.

Donc, pour en revenir à tes déplacements, en ce qui concerne le "lissage", tu peux peut-être utiliser une courbe de bézier : http://fr.wikipedia.org/wiki/Discussion:Courbe_de_B%C3%A9zier, regarde l'animation, elle est très explicite.

Essaye ce dont je t'ai parlé et précise un peu tes "déplacements".

Salut,

La méthode requestAnimationFrame n'est reconnue qu'à partir de IE10, donc difficilement exploitable dans un environnement non maitrisé.

Sinon, perso, je ne comprend pas la question, mais à priori j'irai voir du côté d'SVG (pleins de bon tuto sur ce site à ce sujet d'ailleurs ).

Je reconnais que ma demande est un peu compliquée, j'avais déjà penser à la courbe bézier mais le rendu ne correspond pas exactement à ce que je voulais. Finalement je ferais plus simple.
Je vous remercie beaucoup de votre aide, c'est sympas