Horloges - CSS animation
Pour commencer, nous aurons besoin de HTML.
Mon approche initiale était d'utiliser trois éléments pour chacune des mains. Je suis alors retourné et enveloppées chacune dans un élément conteneur. Alors que le HTML simple a travaillé dans la mesure où les animations CSS de base, nous aurons besoin contenant des éléments lorsque l'on veut positionner les mains et les animer aussi.
Clock face
Nous allons commencer par un design d'horloge de base a un visage rond, avec des heures simples, des minutes et secondes.
Vous pouvez obtenir l'arrière-plan SVG ici. J'ai aussi ajouté un pour ajouter un cercle noir solide au centre pseudo-élément. Les aiguilles de l'horloge peuvent alors être placés derrière ce pseudo-élément au besoin.
Nous devons maintenant avoir quelque chose comme ça.
Avant d'ajouter les mains, nous devons placer les conteneurs.
Ce empile chaque conteneur au-dessus de l'horloge. Ensuite, nous créons les mains.
Chaque main est donnée la propriété de position absolue et placé dans la position de douze heures. Nous allons commencer par la main de l'heure.
J'utilise des pourcentages pour rendre plus facile l'échelle des horloges. Il est un peu plus de travail, mais le rend plus facile d'avoir les adapter à la vue ou rétrécir pour les mobiles. Nous avons également mis la propriété d'origine transformation au fond de la main afin qu'il puisse être tourné plus tard.
Grande aiguille
Une horloge arrêtée ne va être juste deux fois par jour. Ajoutons quelques animations pour rendre l'horloge se comportent plus comme la vraie chose.
Certaines horloges sautent avec chaque seconde, ce qui rend habituellement un tic-tac. Certaines horloges ronronnent avec les mains à bon port. Nous allons essayer les deux. Tout d'abord, nous allons faire les mains se déplacent en douceur.
Nous pouvons utiliser une image clé pour dire aux mains pour se déplacer autour de 360 degrés (la position de départ de 0% est implicite).
Cette image clé indique l'élément à animer autour de 360 degrés, si elle est appliquée à l'élément en utilisant la propriété d'animation. Nous allons utiliser une fonction de synchronisation linéaire sur la main pour que les mains se déplacent en douceur.
La main d'heures est réglée pour tourner une fois toutes les 12 heures (43,200 secondes). L'aiguille des minutes tourne une fois par heure, et la seconde main une fois par minute.
Mettez ensemble et nous avons maintenant le mouvement!
Si vous êtes très forte aux yeux, vous pourriez être en mesure de faire la même aiguille des minutes en mouvement. Il faudrait une heure pour une rotation pour terminer, et douze heures pour l'aiguille des heures pour terminer le circuit de lui.
La seconde main prend 60 secondes, il est plus facile à remarquer.
Ajout d'étapes
Nous pouvons faire les mains se comportent plus comme une horloge normale en ayant le deuxième mouvement de la main autour de l'horloge en 60 mouvements séparés. Une façon simple d'y parvenir est en suivant les étapes fonction de synchronisation. La propriété d'animation pour chaque main devient alors:
Les deux maintenant la minute et seconde main se déplacer en soixante étapes. Le navigateur calcule automatiquement dans quelle mesure chacun de ces 60 étapes se déplacent.
Le temps correct
Cette fonction convertit le temps (heures, minutes et secondes) dans l'angle correspondant pour chaque main. Il boucle ensuite à travers chaque main et applique cet angle en utilisant la propriété style.transform de rotateZ.
Cela fonctionne sur la plupart des navigateurs, à l'exception de Safari ou d'autres navigateurs ont besoin d'un préfixe. Pour permettre cela, nous utilisons également la propriété style.webkitTransform.
Ceci définit alors l'horloge à l'heure actuelle du système.
Alignement mains seconde et minute
Nous devons nous assurer que l'aiguille des minutes se déplace lorsque la trotteuse frappe la position de douze heures.
Ces lignes supplémentaires vérifient si la main est la main « minutes », et si oui, définit un attribut de données avec l'angle actuel de la main secondes.
Avec cet attribut de données, nous pouvons ensuite utiliser ces données pour savoir quand pour déplacer l'aiguille des minutes.
Ajout de rebond
Ces transitions sont applicables à la propriété de transformation et utiliser la fonction de synchronisation cube Bézier. Cette fonction de synchronisation donne les mains un certain rebond.
Compatibilité des navigateurs
Les navigateurs modernes peuvent gérer les transitions CSS et des animations en jeu. IE10 +, Chrome et Firefox récemment les soutiennent sans préfixes et Safari nécessite le préfixe -webkit.
Si vous avez apprécié cet article, partagez!
Vous voulez en savoir plus sur l'animation CSS?
Un cours vidéo pratique l'application de la théorie de l'animation CSS à un vrai projet. Construire la page de destination finale!
Inscrivez-vous maintenant et améliorer vos compétences CSS.
Demo
Un cours vidéo pratique l'application de la théorie de l'animation CSS à un vrai projet. Construire la page de destination animée ultime!
CSS animation hebdomadaire
traductions
articles CSS animation sont traduits par notre communauté - et vous pouvez aussi!