Y a-t-il un plug-in jquery ou une bibliothèque JavaScript qui prend en charge un effet d'animation "génie" comme le quai Apple Mac OS X?
Bonus: bibliothèque ActionScript? C / C ++? .RAPPORTER? Objectif c?
3 Réponses :
Pas que je sache. L'effet «génie» est une distorsion qui ne peut pas être obtenue avec CSS: les transformations CSS (y compris le filtre à matrice d'IE) vous permettent de redimensionner sur les deux axes, la rotation et la cisaillement. Webkit vous donne également des perspectives linéaires. Les distorsions courbées comme Genie ne peuvent pas être reproduites avec ces outils.
Pour le faire dans JavaScript, vous devez diviser l'image (ou un autre élément si vous êtes vraiment ambitieux) dans une ligne par pixel et squash horizontalement à l'aide d'une transformation CSS. Il serait horriblement inefficace de rendre et de regarder probablement saccadé et flickery ainsi que des alias non impossibles.
J'attendra cet effet. : P
Ce n'est pas impossible. Je pense que cela peut être fait avec l'échelle et la traduction3d, mais il faudrait qu'il faut dupliquer l'élément x Nombre de fois, coupez-les au lieu d'approximation et les empiler les uns sur les autres à des emplacements appropriés. Si on met jamais en œuvre cela, faites le moi savoir. Pour moi, je pense que c'est trop de travail et potentiellement pas efficace de toute façon.
Il pourrait également être possible de réaliser en utilisant un seul élément et d'avoir une gêne comme la toile en haut. Ensuite, l'élément est déplacé de bas en haut sous cette toile. Il peut également être fait pour commencer petit et se développer car il se déplace. Est-ce que cela ne créera pas l'effet génie?
Je l'ai fait. Voir ce JSBIN pour un exemple. Ceci est juste une version brouillon, juste un prototype pour montrer qu'il est possible, mais c'est assez optimal et minimal. Il utilise deux animations et une superposition SVG. JSBIN.COM/KIHATAQOWI/1/EDIT?HTML,CSSS,js, Sortie exécutoire en mode plein écran: sortie.jsbin.com/kihataqowi/1 Cela doit être amélioré cependant.
Jsbin est Buggy, c'est l'enfer, il continue à détruire des instantanés précédents: mais je pense que cela fonctionne maintenant: JSBIN.COM/GRÉKOGORE/1/EDIT?HTMLC,CSSS,JS,Output Sortie.jsbin.com/gredokogore/1
Inspiré par la mise en œuvre de Hakan, j'ai écrit ma version de la bibliothèque de transitions Génie Effect.
Vérifiez https://github.com/kamilkp/geniejs
et http://kamilkp.github.io/ pour démo.
Il fonctionne dans chaque navigateur, y compris mobile (pas toujours en douceur sur Firefox). Il prend en charge les transitions d'effet génie dans toutes les directions (haut, bas, gauche, droite). Cela fonctionne même si l'élément HTML cible est un enfant de conteneur qui déborde d'automatiquement ou de caché. C'est une bibliothèque agnostique elle-même, mais j'ai également écrit un plugin de commodité JQuery. Et si vous incluez également la bibliothèque HTML2CANVAS dans votre projet, le plugin vous permet d'animer des éléments HTML avec effet génie (exemple en expansion ici: http://kamilkp.co.nf/genie/canvas/ )
La seule condition requise pour le navigateur est qu'elle doit prendre en charge les transitions CSS. C'est une solution pure JavaScript + CSS.
Cette implémentation semble trop buggy car elle ne considère pas que le "getBoundClientRect" prend en compte. La position du conteneur doit pas être "absolu". Il devrait être "réparé" à la place.
Je l'aime quand quelqu'un exige que Nodejs gère un exemple
Il peut être fait à l'aide de la transformation PURE CSS, mais c'est beaucoup plus facile à utiliser SASS. L'idée générale est que vous souhaitez convertir un rectangle en triangle de manière douce (de sorte que c'est un trapézoïde). Le problème est que toute transformation linéaire transformera un rectangle vers un parallélogramme (un quad avec tous les côtés parallèles) et nous voulons un triangle. Cela signifie que nous avons besoin d'une transformation non linéaire. La bonne nouvelle est que vous pouvez faire des transformations non linéaires en prétendant que celles-ci sont des transformations en 3D, puis de la projection du rectangle à l'espace d'écran 2D. Pensez à un trottoir à loooong - cela ressemble à un triangle. Nous voulons donc faire pivoter le rectangle et la rendre très longue.
Les transformations de première et dernière images clés d'animation sont très directes alors: la première a la transformation de l'identité, et le dernier a La seule colonne intéressante étant le dernier qui indique que la distance de la visionneuse doit être de 10 "pour les pixels de la rangée supérieure et descendre à 10-9 = 1 pour les pixels de plus bas. Le problème est avec des cadres intermédiaires car l'algorithme d'interpolation par défaut utilisé par les navigateurs essaie d'interpréter des matrices comme composition d'opérations élémentaires telles que des rotations et des traductions, puis interpolent chaque opération de manière indépendante. Et puisque notre transformation finale ressemble à la rotation par 90 combiné avec une étirance infinie , l'interpolation essaiera d'effectuer une rotation et une étirement simultanément, qui a l'air d'une sorte d'impair, comme l'un de ces mouvements "est circulaire" tandis que l'autre "linéaire" et la vitesse des deux ne correspond pas. à compenser celui-ci peut générer m Tous les cadres intermédiaires et pour cela que j'utilise Sass.
Le résultat final est ici: http://codepen.io/anon/pen/aphkc et la plupart des crédits pour cette solution devraient aller à l'auteur http: // persistant. Info / Web-expérimentations / distorsion / qui m'a convaincu que c'est possible.
Notez également qu'il existe peut-être de nombreuses transformations différentes qui transforment un rectangle donné à un triangle donné, qui ne diffère que dans la manière dont leurs intérieurs sont mappés - peut-être que ma solution n'est peut-être pas la meilleure à cet égard.