Options d'animation HTML5 Canvas / CSS3 / jQuery

Je suis intéressé à faire une plus flash-comme l'animation dans l'un, l'autre ou une combinaison de HTML5/JQuery.

L'une des idées qui flottent autour de est de le vol des oiseaux, l'animation de personnages et de "tween" dans les séquences d'animation. Je suis un flash dev en arrière-plan afin que tout cela est une seconde nature Flash via une chronologie basée sur une interpolation de mouvement du système alors je me demandais juste ce qui est possible avec les nouvelles technologies comme la Toile HTML5, CSS3 et jQuery? Comment adepte sont à interpolation, comme l'animation? Ce qui est un bon point de départ pour la lire?

Par exemple le vol des oiseaux, à http://www.thewildernessdowntown.com/ sont incroyables, ils semblent être en 3d, la variable de la direction, la vitesse, la rotation, de rabat, de la vitesse. Dans Flash pouvait y arriver avec une relative facilité, la création de jeu animations movieclips, la production de ces sur la scène et en les déplaçant dans tweenlite à des vitesses différentes ou même dans PV3D mais j'ai à côté aucune idée de comment cela pourrait être réalisé sur la toile.

Donc, en bref, des idées sur la façon dont le dessus a été réalisé, bonne lecture sur ce type d'animation à l'extérieur de flash et toutes les astuces que vous pourriez avoir serait très apprécié.

Grâce

source d'informationauteur digitalpencil

  1. 7

    Vous disposez de trois options d'animation en "HTML5": Canvas, SVG et CSS Animations (ainsi que le bon vieux Javascript animation). Celui que vous utilisez dépend de ce que vous essayez d'accomplir et des navigateurs que vous voulez exécuter sur.

    Si vous essayez de cible mobile, par exemple, les animations CSS sont votre seul choix parce que la Toile est trop lent en général, et Android n'ont pas de SVG jusqu'à ce que le nid d'abeille. Aussi un tas de SVG fonctionnalités ne sont pas activées sur iOS (par exemple, le texte animé chemins d'accès).

    Voici mon intro de présentation pour les animations CSS et aussi une introduction à notre Sencha Animator outil, qui est en alpha.

    Pour le bureau, la Toile est assez impressionnant - bien qu'il ne fonctionne vraiment que très bien dans Chrome 10 et IE9 - Safari peut être un peu lent, d'autant que le nombre d'éléments animés monte et il n'existe pas dans IE7/8 (et je n'ai pas testé FF4 encore).

  2. 1

    Il y a une petite démo sur l'écriture d'une animation starfield à l'aide de html5 et javascript. Découvrez le code javascript dans cette page.

  3. 1

    Les oiseaux animation est réalisée à l'aide d'un algorithme appelé Boids. Boids est unique en ce qu'il dispose d'un flocage/essaim/école comme le comportement comme ce que les oiseaux et les poissons font de mieux.

  4. 0

    Vous pouvez vérifier processingjs qui utilise la toile pour la 2d et de la 3d, des visualisations. J'ai fait une petite visualisation avec processingjs et il est assez facile d'obtenir des bons résultats.

    L'avantage de l'utilisation de processingjs, c'est que votre animation ne serait pas seulement de s'exécuter dans le navigateur, mais aussi en natif des outils de traitement.

  5. 0

    Dans thewildernessdowntonwn, je pense que les oiseaux ont été animés à l'aide de svg et javascript à exécuter à l'écart de la souris (parce que tout le monde sait souris peut manger des oiseaux 🙂 ).

    Je pense que, dans ce "les transitions moment" javascript/css3 pourrait être très utile pour une animation simple comme quelque chose de comparaître ou de se déplacer d'une manière ou d'une autre.
    C'est aussi un peu compliqué à utiliser des animations depuis Mozilla et Opera uniquement en charge css3 transition et pas d'animation pour l'instant.

    Attendre, il est toujours possible de le faire à la rigueur de l'animation, mais vous aurez à jouer à peine à la transition de transformer et parfois transformer origine.
    Vous pouvez avoir quelques bonnes informations là :
    http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

    Le bon point avec le format svg est que c'est en construction afin d'être animé plus comme un "traditionnels animation flash" et il peut être contrôlé par le javascript et css3.
    Javascript est de plus en plus et de plus en plus puissant, puisque tous les "navigateurs modernes" de combat sur test comme test sunspider.
    Ainsi, vous pouvez faire beaucoup de choses avec Javascript, je pense qu'il ne sera pas long jusqu'à ce qu'un éditeur wysiwyg affichera un code css3 (je pense que adobe est sur son chemin à droite ?).

    De l'autre côté, il y a de ces technologies de l'appel WebGL, il vous permettra en utilisant html5 canvas et certains graves javascript pour écrire 2D et 3D d'application qui vous permettent de faire certaines des choses incroyables qui peuvent utiliser la puissance des GPU.

    J'espère que cela vous a aidé à voir par le biais de ces technologies émergentes.