2011-10-05 388 views
5

¿Cuál es la mejor manera de emular una rueda de ruleta girando en HTML5?¿imagen de la rueda giratoria en HTML5 (por ejemplo, ruleta)?

El giro de la rueda debe ser controlable por alguna entrada (es decir, la velocidad de giro en función de la entrada del usuario). Las etiquetas de las ruedas se deben difuminar a medida que la rueda gira rápidamente, pero a medida que el giro disminuye, las etiquetas de la rueda se vuelven más legibles.

¿Hay bibliotecas HTML5 compatibles o las animaciones deben programarse manualmente?

Esto también necesita ser admitido en dispositivos iOS.

Respuesta

14

Se puede hacer en unas pocas líneas de CSS.

Blurring es un efecto óptico, no necesita ser simulado.

+1

¡Gracias! Sin embargo, una pregunta que no hicimos fue: ¿cuál es la mejor manera de determinar a qué número "aterrizaron"? ¿Hay una manera simple de hacer esto? Un enfoque en el que podemos pensar es mantener la rueda inmóvil y hacer girar un puntero dentro de la rueda. Según cómo aterrice el puntero, podemos determinar en qué número aterrizaron. No es ideal, pero sería funcional. – Crashalot

+1

Si el puntero está a cero grados al norte de la rueda, y un ángulo de sección de número es igual a, por ejemplo, 10 grados, entonces si gira la rueda 400 grados, apunte al cuarto número ('(400 - 360)/10') . – katspaugh

6

Si alguien está interesado en hacer esto utilizando el lienzo de Javascript y HTML5, consulte http://www.dougtesting.net/winwheel/index.html para ver un ejemplo. Lo bueno es que el código está disponible para descargar también.

+0

Esa es una gran demostración. Podría ser útil proporcionar un fragmento de esto aquí en caso de que mueva o elimine esa página de demostración en algún momento en el futuro. – Marvo

+3

¡Bienvenido a Stack Overflow! ¡Gracias por publicar tu respuesta! Asegúrese de leer detenidamente [Preguntas frecuentes sobre autopromoción] (http://stackoverflow.com/faq#promotion). También tenga en cuenta que * se requiere * que publique un descargo de responsabilidad cada vez que se vincula a su propio sitio/producto. –

Cuestiones relacionadas