Accueil Médias sociaux Comment créer des animations avec des images clés - des nuls

Comment créer des animations avec des images clés - des nuls

Vidéo: Les bases de l'animation avec images clés dans FilmoraPro | Cours 1 2025

Vidéo: Les bases de l'animation avec images clés dans FilmoraPro | Cours 1 2025
Anonim

Pour créer des effets animés sur votre site Web pour les afficher sur l'iPad et l'iPhone, vous devez utiliser des images clés. Les animations CSS 3 plus complexes reposent sur des images clés. Les images clés sont les points d'une animation où quelque chose change. Chaque fois que vous voulez changer un objet animé, vous devez créer une nouvelle image clé.

Par exemple, si vous voulez animer un rebond de balle, comme indiqué sur cette figure, vous devez avoir une image clé en haut du rebond et une autre en bas du rebond.

La balle rebondissante avec des portions de secondes démarquées.

Dans cet exemple, la boule a 50 pixels de diamètre et le conteneur pour la balle mesure 350 pixels. La première image clé place donc la boule au fond du conteneur et la dernière le place au sommet du conteneur.

Voici le code qui rend ce travail:

@ - webkit-keyframes bounce {de {margin: 300px auto 0;} à {margin: 0 auto 0;}}

An Le bloc @ -webkit-keyframes contient des règles qui définissent chaque image clé. Une image clé définit le style de ce moment dans l'animation. Vous pouvez avoir un début et une fin comme dans l'exemple illustré ici, ou vous pouvez définir n'importe quel nombre de points intermédiaires. Certains navigateurs Web appliquent ce style plus facilement que d'autres, mais Safari sur iPhone et iPad rend ce travail assez bien.

Dans cet exemple de balle rebondissante simple, une animation appelée rebond est définie pour avoir deux images-clés: une pour le début de l'animation (le bloc de départ) et une pour la fin (le bloc). Ces deux images clés déplacent la balle de au bas à le haut.

Lorsque vous définissez une animation avec un ensemble d'images clés, vous pouvez utiliser les propriétés suivantes de l'animation Webkit:

  • nom-animation - définit l'animation utilisée. Pointez-le sur rebond , l'ensemble d'images clés défini précédemment. Si le nom n'est pas trouvé (il est manquant ou mal orthographié), le navigateur suppose la valeur par défaut none et aucune animation n'est produite:

    -webkit-animation-name: bounce;
    
  • animation-duration - définit la durée de l'animation. Le format de valeur de temps est un nombre suivi d'un identifiant d'unité de temps. Les identificateurs d'unités de temps sont des ms pour des millisecondes et des s pour des secondes (1000 ms, 1s). L'animation de la balle rebondissante dure une seconde.

    La figure illustre la manière dont le navigateur crée automatiquement les images tweened - les images entre le haut et le bas. Vous définissez le début et la fin et le navigateur remplit ce qui est "in-be tween . "

    webkit-animation-durée: 1s;
    
  • animation-itération-nombre - définit le nombre de fois qu'un cycle d'animation est joué.La valeur par défaut est 1, et cette valeur fait jouer l'animation du début à la fin une fois. Une valeur d'infini provoque la répétition de l'animation pour toujours. Comme vous pouvez le deviner sur la base de cette information, dans l'exemple suivant, l'animation est lue dix fois:

    -webkit-animation-itération-count: 10;
    
  • animation-direction - définit si l'animation doit être jouée à l'envers tous les deux cycles. Si l'option alternate est spécifiée, tous les autres cycles d'animation sont joués dans le sens inverse. Lorsqu'une animation est jouée à l'envers, les fonctions de chronométrage sont également inversées.

    C'est pourquoi vous devez définir la balle comme rebondissant seulement. L'animation alternative est jouée à l'envers, ramenant la balle au fond de la boîte (pas très différente de la gravité).

-webkit-animation-direction: alterné;

Mettez tout ensemble et la règle de style qui fait fonctionner l'animation de la balle rebondissante ressemble à ceci:

#animationDemo #ball {-webkit-animation-name: bounce; -webkit-animation-durée: 1s; -webkit-animation-itération-count: 10; -webkit-animation-direction: alternate;}

Lorsque vous entrez une ou plusieurs propriétés, assurez-vous de suivre cet ordre:

  1. transition-property

  2. transition-duration

  3. transition-timing-function > transition-delay

  4. Utilisez l'instruction suivante pour la démonstration de la balle rebondissante:

#animationDemo #ball {bounce 1s 10 alternate;}

Pour une liste complète des propriétés CSS que vous pouvez animer en utilisant des transitions, visitez CSS Transitions Module Niveau 3.
Comment créer des animations avec des images clés - des nuls

Le choix des éditeurs

Comment créer un diagramme SmartArt PowerPoint 2007 - Les mannequins

Comment créer un diagramme SmartArt PowerPoint 2007 - Les mannequins

Constituent le moyen le plus simple de créer un diagramme PowerPoint SmartArt pour créer une nouvelle diapositive PowerPoint et entrer une liste à puces, puis la convertir en SmartArt. Créez d'abord votre diapositive à l'aide de la disposition Titre et contenu, puis procédez comme suit:

Comment créer une vidéo de présentation dans PowerPoint sur votre Mac - dummies

Comment créer une vidéo de présentation dans PowerPoint sur votre Mac - dummies

Un moyen de distribuer une vidéo de présentation PowerPoint doit l'enregistrer dans un fichier QuickTime (MOV) sur votre Mac et distribuer le fichier par courrier électronique ou le poster sur Internet. PowerPoint offre une commande pour créer une version QuickTime d'une présentation. Chaque aspect d'une présentation PowerPoint, y compris les transitions, animations, sons, vidéos ...

Création d'une transition de diapositives PowerPoint 2013 - des mannequins

Création d'une transition de diapositives PowerPoint 2013 - des mannequins

Est une transition de PowerPoint 2013 au prochain lors d'un diaporama à l'écran. La manière normale de passer d'une diapositive à l'autre est simplement de couper la nouvelle diapositive - efficace, oui, mais aussi ennuyeuse. PowerPoint vous permet d'affecter l'un des plus de 50 effets spéciaux différents à ...

Le choix des éditeurs

Comment créer une société en ligne QuickBooks pour un client - des nuls

Comment créer une société en ligne QuickBooks pour un client - des nuls

Pour l'entreprise. Si vous vous êtes inscrit au programme Intuit Wholesale Pricing, la responsabilité de facturation de la société QBO que vous créez devient une question de choix: vous pouvez payer l'abonnement du client et ensuite facturer le client pour le coût de l'abonnement. À l'heure actuelle (cela pourrait changer dans le futur), ...

Créer une copie comptable du fichier de données QuickBooks - les nuls

Créer une copie comptable du fichier de données QuickBooks - les nuls

QuickBooks 2012 permet aux comptables de travailler avec des fichiers de données client. Votre client crée la copie comptable du fichier de données QuickBooks en utilisant sa version de QuickBooks et le fichier de données réelles, puis crée un fichier que le client vous envoie (par exemple par courrier ou par e-mail) ...

Créer une copie comptable du fichier de données 2013 de QuickBooks - les mannequins

Créer une copie comptable du fichier de données 2013 de QuickBooks - les mannequins

QuickBooks 2013 facilite la tâche comptables pour travailler avec les fichiers de données client. Votre client crée la copie comptable du fichier de données QuickBooks en utilisant sa version de QuickBooks et le fichier de données réelles, puis crée un fichier que le client vous envoie (par exemple par courrier ou par e-mail) ...

Le choix des éditeurs

10 Questions fréquemment posées sur la méditation - les nuls

10 Questions fréquemment posées sur la méditation - les nuls

Quand la plupart des gens considèrent la pratique de la méditation Ils ont quelques questions auxquelles ils veulent avoir une réponse - et quand ils commencent, ils en proposent un peu plus. Voici les réponses à dix questions courantes pour vous aider à démarrer votre voyage. Est-ce que la méditation me fait trop ...

10 Méthodes populaires du corps et de l'esprit - les nuls

10 Méthodes populaires du corps et de l'esprit - les nuls

Vous n'êtes pas le seul à s'intéresser de plus en plus à ce qui est maintenant appelé fitness esprit-corps. La fascination et la demande se répandent comme une traînée de poudre. Ce sont les pratiques du corps et de l'esprit les plus en vue et en développement. Méthode du corps et de l'esprit n ° 1: Yoga Hatha Yoga met l'accent sur les formes physiques pour aider l'esprit. Les bonus ajoutés comprennent l'augmentation de l'équilibre, du corps ...

10 Occasions de voir sa vie avec des yeux spirituels - des nuls

10 Occasions de voir sa vie avec des yeux spirituels - des nuls

La vie apporte une variété de plaisants et stimulants expériences: Un jour, tout se passe bien, mais un autre jour est rempli d'obstacles. Une fois que vous êtes douchés de bonne fortune, mais une autre fois vous êtes traîné par le malheur. Vous pouvez vous sentir restreint par votre passé, avoir peur pour l'avenir ou avoir de l'espoir pour une nouvelle possibilité. Tout ...