2011-10-05 7 views
5

Quelle est la meilleure façon d'émuler une roue de roulette en HTML5?Image de rotation de la roue en HTML5 (roue de roulette, par exemple)?

La rotation de la roue doit pouvoir être commandée par une entrée (c'est-à-dire, la vitesse de rotation dépend de l'entrée de l'utilisateur). Les étiquettes des roues doivent flouter car la roue tourne rapidement, mais au fur et à mesure que la rotation ralentit, les étiquettes sur la roue deviennent de plus en plus lisibles. Y a-t-il des bibliothèques HTML5 qui supportent cela, ou est-ce que les animations doivent être programmées à la main?

Cela doit également être pris en charge sur les appareils iOS.

Répondre

14

Cela peut être fait en quelques lignes de CSS.

Le flou est un effet optique, il n'a pas besoin d'être simulé.

+1

Merci! Une question que nous n'avons pas posée, cependant, était de savoir quelle est la meilleure façon de déterminer quel numéro a été "posé"? Existe-t-il un moyen simple de faire cela? Une approche que nous pouvons penser est de garder la roue immobile et faire tourner un pointeur à l'intérieur de la roue. Basé sur la façon dont le pointeur atterrit, nous pouvons déterminer quel numéro a été posé. Pas idéal, mais ce serait fonctionnel. – Crashalot

+1

Si le pointeur est à zéro degré au nord de la roue, et qu'un angle de section est égal à, disons, 10 degrés, si vous faites tourner la roue de 400 degrés, pointez sur le 4ème nombre ('(400 - 360)/10') . – katspaugh

6

Si quelqu'un est intéressé à faire cela en utilisant Javascript et HTML5 toile, voir http://www.dougtesting.net/winwheel/index.html pour un exemple. Chose cool est le code est disponible pour le téléchargement aussi.

+0

C'est une super démo. Il peut être utile de fournir un extrait de cet article si vous déplacez ou supprimez cette page de démonstration à un moment ultérieur. – Marvo

+3

Bienvenue dans Stack Overflow! Merci d'avoir posté votre réponse! Veuillez vous assurer de lire attentivement la [FAQ sur l'autopromotion] (http://stackoverflow.com/faq#promotion). Notez également qu'il est * obligatoire * que vous publiez une clause de non-responsabilité chaque fois que vous créez un lien vers votre propre site/produit. –