Multi Touch jQuery Dial/Spinner

Question

Je crée une application pour iOS en utilisant PhoneGap, les paquets phonegap HTML, CSS & Javascript dans une application iPhone native. L'application comprendra un grand tourne-disque à verrouillage de style ancien au centre de l'écran. Ce concept est très bien tiré dans l'application iPhone native (obj-c) Converbot. Donc, ma question est, est-il possible de produire ceci en utilisant Javascript + CSS3, est-ce que quelqu'un l'a déjà fait auparavant, et quelqu'un peut-il me diriger dans la bonne direction pour commencer?

Je joins quelques images à ajouter, espérons clarté ...

http://www.istockphoto.com/file_thumbview_approve/8669353/2/istockphoto_8669353-safe-combination-lock-dial.jpg

Answer 1

En réponse à votre question: "Peut-il être fait?" Oui.

La question la plus importante est: "Comment cela peut-il être fait?"

Je ne suis pas prêt à écrire votre projet pour vous, mais je suis prêt à vous donner quelques conseils. Il y a un certain nombre d'endroits où vous pouvez commencer, chacun a ses propres mérites et défis. Vous aurez besoin de comprendre exactement quelles fonctionnalités vous voulez, et comment vous voulez que votre application réagisse.

Pour commencer, comment le cadran serait-il tourné? Quelques options sont:

• Souris molette de défilement
• touches fléchées
• Boutons
• glisser la souris

Combien d'encoches sont dans la roue?

• un nombre statique
• un nombre dynamique

Quels sont les autres fonctionnalités que vous voulez? Si vous utilisez un nombre fixe d'encoches sur votre combo-lock, vous pouvez envisager de créer des images statiques de chaque état de rotation, en préchargeant les images et en affichant une image différente en fonction de l'état de la molette.

Si vous voulez un nombre dynamique d'encoches, vous devrez regarder dans css3 transformer

• http://www.zenelements.com/blog/css3-transform/
• http://www.the-art-of-web.com/css/css-animation/
• faire juste un sear Google ch sur css3 transformer

Vous avez un avantage en sachant que vous ne faites que cela pour l'iPhone.Cela signifie que vous pouvez probablement utiliser le support -webkit-transformer, sans avoir à vous soucier de la folie de transformation d'IE (matrices rotationnelles, origine de rotation, filtres css, etc.)

Vous pouvez alors configurer un div avec le bon nombre d'encoches et des étiquettes avec tous les éléments tournés correctement pour leur position.

Ensuite, au lieu de déplacer individuellement l'une des pièces, vous pouvez faire pivoter l'ensemble de la div autour de son centre pour produire l'effet de combo-verrouillage.