Appeal Toevoegen aan Je Animaties op Internet

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Wanneer we het hebben over het gebruik van animatie, bespreken we vaak de praktische manieren waarop we overgangen, animaties, enzovoort kunnen maken. Animatie is een krachtige manier om onze ontwerpen te laten opvallen, maar in plaats van te focussen op hoe individuele animaties werken, kan de manier waarop meerdere animaties combineren iets krachtiger maken.

In beroep gaan

Disney's 12 basisprincipes van animatie definieert "Appeal" als corresponderend met "charisma in een acteur". Het is hoe het realisme, de stijl en de inhoud van een animatie samenkomen om een gevoel voor karakter te creëren dat kijkers echt en interessant vinden.

The Illusion of Life Disney Animation — The Illusion of Life: Disney Animation waarin de 12 basisprincipes van animatie zijn vastgelegd

Het is een techniek die door Stripe met groot effect wordt Gebruikt. Stripe is een betalingsprocessor en biedt hulpmiddelen voor het insluiten van betalingsformulieren in sites. These forms are famous for being beautifully designed, particularly their use of animation.

In dit artikel zal ik bespreken hoe meerdere animaties kunnen worden gebruikt voor het maken van een effect, meer dan de som der delen, en laten zien hoe je deze kennis op een praktische manier kunt gebruiken.

Sociale Media Kaart

In dit voorbeeld gebruiken we animatie om een kaart met details en links naar web en andere sociale accounts te presenteren.

Wanneer een knop wordt ingedrukt, er wordt gevraagd om een kaart om mee te verschijnen sommige volgen opties. In plaats van een eenvoudig oud modaal venster te gebruiken, gebruiken we animatie om het interessanter te maken.

Om het aantrekkelijk te maken, vinden er verschillende animaties plaats. De verschillende stukken bezielen in en introduceren elk element op volgorde. Dit helpt de kijker om het verband te begrijpen tussen wat ze hebben ingedrukt en de inhoud en de volgorde van animaties helpt het oog op de volgpictogrammen te trekken.

De HTML Instellen

Om te beginnen hebben we een knop nodig om op te drukken en een kaart om weer te geven. De kaart zal worden verborgen wanneer de inhoud voor het eerst wordt getoond.

1	<button class="show-card">
2	<img src="https://avatars2.githubusercontent.com/u/853536?v=3&s=48">
3	Press here
4	</button>
5	<article class="card">
6	<section class="close">
7	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 32 32">
8	<path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z" fill="#aaa"></path>
9	</svg>
10	</section>
11	<section class="details">
12	<h2 class="name">Donovan Hutchinson</h2>
13	<p class="description">Donovan is a Dublin-based front-end developer with a passion for CSS, animation and making the web fun.</p>
14	</section>
15	<section class="headshot">
16	<img src="https://avatars2.githubusercontent.com/u/853536?v=3&s=280">
17	</section>
18	<section class="icon-bar">
19	<ul>
20	<li>
21	<a href="http://cssanimation.rocks">
22	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
23	<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#fff"></path>
24	</svg>
25	</a>
26	</li>
27	<li>
28	<a href="https://twitter.com/cssanimation">
29	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
30	<path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" fill="#fff"></path>
31	</svg>
32	</a>
33	</li>
34	<li>
35	<a href="https://github.com/cssanimation">
36	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
37	<path d="M0 17.388c0 1.45 0.136 2.762 0.407 3.935s0.647 2.193 1.127 3.059 1.090 1.627 1.831 2.285c0.741 0.657 1.544 1.195 2.41 1.612s1.854 0.756 2.965 1.017c1.111 0.261 2.245 0.443 3.403 0.548s2.431 0.156 3.818 0.156c1.398 0 2.676-0.052 3.834-0.156s2.295-0.287 3.411-0.548 2.11-0.6 2.981-1.017c0.871-0.417 1.68-0.954 2.425-1.612s1.361-1.419 1.846-2.285 0.863-1.886 1.134-3.059c0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853s0.151-0.772 0.219-1.361c0.068-0.589 0.042-1.27-0.078-2.042s-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814s-1.64 0.905-2.527 1.51c-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51s-1.453-0.673-1.933-0.814c-0.48-0.141-0.928-0.232-1.346-0.274s-0.681-0.055-0.79-0.039-0.196 0.034-0.258 0.055c-0.323 0.803-0.545 1.591-0.665 2.363s-0.146 1.453-0.078 2.042 0.141 1.043 0.219 1.361c0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zM3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.376 0.881-0.66 1.424-0.853s1.155-0.302 1.839-0.329c0.683-0.026 1.338-0.021 1.964 0.016s1.398 0.086 2.316 0.149c0.918 0.063 1.711 0.094 2.379 0.094s1.46-0.031 2.378-0.094c0.918-0.063 1.69-0.112 2.316-0.149s1.28-0.042 1.964-0.016c0.683 0.026 1.296 0.136 1.839 0.329s1.017 0.477 1.424 0.853c1.367 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386s-0.511 1.275-0.861 1.745-0.834 0.868-1.455 1.197c-0.621 0.329-1.226 0.582-1.815 0.759s-1.346 0.316-2.269 0.415c-0.923 0.099-1.747 0.159-2.472 0.18s-1.646 0.031-2.762 0.031-2.037-0.010-2.762-0.031c-0.725-0.021-1.549-0.081-2.472-0.18s-1.68-0.237-2.269-0.415c-0.589-0.177-1.194-0.43-1.815-0.759s-1.106-0.728-1.455-1.197c-0.349-0.469-0.636-1.051-0.861-1.745s-0.336-1.489-0.336-2.386zM20 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3zM8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3z" fill="#fff"></path>
38	</svg>
39	</a>
40	</li>
41	</section>
42	</article>

De knop is een afbeelding en wat tekst. Als je erop drukt, wordt de kaart weergegeven. De kaart bestaat uit vier secties; een knop Sluiten, een gedeelte Details, Headshot en een pictogrambalk met sociale pictogrammen. Voor dit voorbeeld gebruiken we inline SVG pictogrammen uit de Entypo verzameling.

Styling

Voordat we aan animaties beginnen voegen we wat stijl toe aan de knop en kaart. Eerst, de knop:

.show-card {
  background: #fff;
  border-radius: 4em;
  border: 0.25em solid #1fa756;
  color: #1fa756;
  font-size: 18px;
  left: 50%;
  line-height: 1.5;
  padding: 1em 1em 1em 4em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  outline: none;
}

.show-card img {
  border-radius: 50%;
  left: 0.3em;
  position: absolute;
  top: 0.25em;
  width: 3em;
}

Opmerking: we hebben een overzicht toegevoegd:geen; naar de .show kaart element omdat sommige browsers een eigenaardige gloed toevoegen aan de focusstatussen van de knoppen (wat we niet willen):

Daarna stylen we de kaart en elk van de secties erin.

.card {
  bottom: calc(50% - 8em);
  display: none;
  height: 16em;
  left: calc(50% - 10em);
  position: absolute;
  transition: all 0.4s 0.4s cubic-bezier(.5,.2,.43,1.33);
  width: 20em;
}

.close {
  color: #aaa;
  cursor: pointer;
  height: 1em;
  opacity: 0;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1em;
  z-index: 10;
}

.details {
  position: absolute;
  bottom: 2.5em;
  background: #fff;
  border-radius: 0.25em;
  height: 0;
  overflow: hidden;
  text-align: center;
  width: 20em;
}

.name {
  color: #333;
  font-weight: bold;
  margin: 3em 0 0;
  opacity: 0;
}

.description {
  color: #666;
  font-size: 1em;
  font-weight: 200;
  line-height: 1.5;
  margin: 0.75em 2em 2em;
  opacity: 0;
}

.headshot img {
  border-radius: 50%;
  border: 0.5em solid #fff;
  display: block;
  height: 6em;
  margin: -3em auto 0.5em;
  opacity: 0;
  width: 6em;
}

.icon-bar {
  background: #1fa756;
  border-radius: 0.25em;
  left: -1em;
  position: absolute;
  right: -1em;
  top: 13em;
}

.icon-bar ul {
  display: flex;
  flex-display: column;
  flex-wrap: nowrap;
  padding: 0;
}

.icon-bar li {
  display: inline-block;
  font-size: 2em;
  opacity: 0;
  padding: 0 1em;
  width: 33%;
}

.icon-bar a {
  color: #fff;
  text-decoration: none;
}

Merk op dat we deze kaart instellen om weer te geven:geen aanvankelijk. We zullen dit dan controleren met JavaScript.

De Basic Show en Hide

In plaats van de CSS in te duiken, stellen we eerst de basisactie in van het weergeven en verbergen van de contactgegevens. Hiervoor wordt een beetje JavaScript (en in dit geval jQuery) gebruikt om klassen toe te voegen en te verwijderen, afhankelijk van waarop is geklikt:

// Show the card on clicking the button
$('.show-card').click(function(e) {
  $('.card').addClass('show').css('display', 'block');
  $('.show-card').addClass('hide');
});

// Hide the card on clicking the "x"
$('.card .close').click(function(e) {
  $('.card').css('display', 'none');
});

We zouden nu de kaart moeten kunnen tonen en verbergen met jQuery en de CSS eigenschap weergeven.

Bekijk de basishow en verberg het voorbeeld hier:

Voor het Animeren

Met de lay out op zijn plaats moeten we een paar extra stijlen toevoegen om de verschillende elementen te verbergen, zodat we ze in beeld kunnen brengen.

.close, .name, .description, .headshot img, .icon-bar li {
  opacity: 0;
}
.details {
  height: 0;
}

Deze elementen hebben een vertraging voordat hun animatie van kracht wordt, dus moeten ze in eerste instantie uit het zicht zijn.

Eenvoudige Animaties

Met het mechanisme op zijn plaats om de kaart te tonen en te verbergen, kunnen we beginnen met het toevoegen van animaties. Het bovenstaande JavaScript voegt een show status toe aan de kaart die wordt getoond en we kunnen animaties toevoegen aan deze klasse die de afzonderlijke delen van de kaart zullen introduceren.

Om dit te doen gebruiken we de CSS animatietei genschap en sets met keyframes.

Het is handig om animaties voor algemene doeleinden in CSS te maken en deze opnieuw te gebruiken. Eenvoudige animaties zoals fading in en out kunnen eenmaal worden gedefinieerd en op meerdere plaatsen worden gebruikt.

Om te laten zien hoe keyframes worden gedefinieerd, maken we de fade in en fade out animaties.

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Keyframes zijn een reeks stappen, gedefinieerd als percentages. Dit kunnen een aantal stappen zijn, maar in ons voorbeeld definiëren we alleen de startframe (0%) en het einde (100%) van de keyframes. In de fade-in beginnen we zonder opaciteit (0) en eindigen in volledige dekking (1). De fade-out animatie doet het tegenovergestelde.

We kunnen de animatie eigenschap gebruiken om deze vervagende animaties toe te passen op de knop wanneer deze wordt getoond en verborgen.

.show-card {
  animation: fade-in 0.4s 1s forwards ease-out;
}
.show-card.hide {
  animation: fade-out 0.4s forwards ease-out;
}

De stenografie hier vertelt de kaart dat hij de fade-in animatie moet gebruiken, die 0,4 seconden duurt met een vertraging van 1 seconde. In dit voorbeeld is mijn header echter vrij De animatie wordt eenmaal afgespeeld en stopt aan het einde (vooruit) en gebruikt de easy-out Timing functie.overbodig.

Wanneer de hide klasse op de knop wordt toegepast, wordt de fade-out animatie toegepast.

Bouncy Effect Timing Functie

Het eerste deel dat we zullen introduceren is de pictogrammenbalk. Omdat dit de plaats is waar de links zullen zijn, willen we dat het opvalt en het eerste zijn dat mensen opmerken.

Bij het animeren kunnen we interessante effecten creëren met behulp van de eigenschap timing function. In dit geval gebruiken we een cubic-bezier timingfunctie om wat ''bounce'' toe te voegen wanneer de pictogrambalk verschijnt.

Eerst maken we enkele eenvoudige keyframes om de balk klein te laten worden en in de hoogte te laten groeien.

@keyframes show-icon-bar {
  0% {
    height: 0;
  }
  100% {
    height: 4.5em;
  }
}

We can now apply this set of keyframes to the icon bar when the show class is added to the card.

1	.card.show .icon-bar {
2	animation: show-icon-bar .5s forwards cubic-bezier(.64,1.87,.64,.64);
3	}

The bouncy effect is created by the use of the cubic-bezier timing function. Timing functies beschrijven de snelheidsveranderingen door een animatie en kunnen worden ontworpen om het begin of einde van een animatie te over-schaduwen. Deze animatie gaat iets voorbij, corrigeert en maakt een bounce.

Animatie Vertraging

Met de pictogrambalk geïntroduceerd, moeten we animeren het gedeelte dat de details en headshot bevat. We willen dat deze sectie verschijnt nadat de pictogrambalk is geïntroduceerd. Om dit te bereiken gebruiken we de eigenschap animatie-delay.

1	.card.show .details {
2	animation: show-detail-container 0.7s 0.5s forwards cubic-bezier(.54,-0.38,.34,1.42);
3	}

De animatie toegepast op het detail gedeelte heeft een duur van 0,7 seconden en een vertraging van 0,5 seconde. Dit betekent dat de animatie pas begint nadat de pictogrambalk is geïntroduceerd.

We gebruiken hier ook een cubische bezier timingfunctie om hem wat stuiter te geven.

Vervolgens definiëren we de hoofdframes voor de animatie van deze container.

@keyframes show-detail-container {
  0% {
    height: 0;
  }
  100% {
    height: 13.5em;
  }
}

De animatiehoofdframes voor show-detail-containers beginnen met de container die onzichtbaar is met een hoogte van nul, en animeert tot de volledige hoogte. De cubische bezier timingfunctie zorgt ervoor dat de animatie een beetje overshoot om een beetje bounce te krijgen.

Combinatie van Meerdere Animaties

Meerdere animaties kunnen in één enkele eigenschap worden toegepast. Zolang de animaties niet tegenstrijdig zijn (door te proberen dezelfde eigenschap te animeren), kunnen ze worden gebruikt om nuance toe te voegen aan een animatie. Meerdere animaties worden gedefinieerd als afzonderlijke animaties, maar gescheiden door komma's.

In dit geval gaan we de inhoud van de headshot, de naam en de beschrijving vervagen, terwijl we tegelijkertijd een pop-in functie gebruiken om ze van een afstand verder te laten lijken.

Als we één enkele animatie hadden gebruikt, met een cubische bezier timingfunctie, zou het vervagende effect stuiteren en er vreemd uitzien. In plaats daarvan gebruiken we de fade om een lineaire timingfunctie te gebruiken en heeft de zoomlens het bounce effect.

Eerst definiëren we de pop-in hoofdframes.

@keyframes pop-in {
  0% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}

Dit gebruikt de schaal transformatie om elk element kleiner te laten beginnen en op te schalen naar hun normale grootte.

Laten we de inhoud inbrengen. Elk element heeft twee animaties, en elk van de elementen heeft een iets langere vertraging van de animatie om hun uiterlijk te spreiden.

.card.show .headshot img {
  animation: fade-in 0.4s 1.2s forwards, pop-in 0.6s 1.2s forwards cubic-bezier(.64,1.87,.64,.64);
}
.card.show .name {
  animation: fade-in 0.3s 1.3s forwards, pop-in 0.3s 1.3s forwards cubic-bezier(.64,1.87,.64,.64);
}
.card.show .description {
  animation: fade-in 0.3s 1.4s forwards, pop-in 0.3s 1.4s forwards cubic-bezier(.64,1.87,.64,.64);
}

Pictogram sluiten

De nauwe pictogram animatie maakt gebruik van het fade-in hoofdframes die we eerder gedefinieerd.

1	.card.show .close {
2	animation: fade-in 0.3s 1.3s forwards;
3	}

Oproepen tot Actie

We moeten enkel de pictogrammen nu weergeven. Bij de presentatie van animaties, is het laatste wat geanimeerde waar de aandacht van de kijker zal eindigen. Dit betekent dat de kijkers oog de animatie volgen en eindigen kijken de pictogrammen die we graag om te selecteren.

We opnieuw maken gebruik van de eigenschap delay animatie hiervoor te zorgen ze laatst zijn ingevoerd. Eerst definiëren we hoofdframes van een animatie voor de pictogrammen:

@keyframes show-icon {
  0% {
    opacity: 0;
    transform: rotateZ(-40deg);
  }
  100% {
    opacity: 1;
    transform: rotateZ(0);
  }
}

Elk pictogram zal een beetje draaien als ze vervagen. We kunnen nu deze animatie toevoegen aan elk voor de iconen, met behulp van een vertraging op elk te spreiden ze.

.card.show .icon-bar li {
  animation: show-icon 0.5s forwards cubic-bezier(.64,1.87,.64,.64);
}

.card.show .icon-bar li:nth-child(1) {
  animation-delay: 1.8s;
}
.card.show .icon-bar li:nth-child(2) {
  animation-delay: 1.9s;
}
.card.show .icon-bar li:nth-child(3) {
  animation-delay: 2s;
}

Zet die deze allemaal samen en we hebben nu een kaart die wordt mooi weergegeven wanneer de knop is geselecteerd.

Één Meer Ding

Voordat we eindigen kunnen, moeten we een verbergen actie aan de knop sluiten toevoegen en de kaart weg van animatie voorzien. Eerst werken we de JavaScript. Voor dringende het nauwe pictogram, wacht de JavaScript gedurende één seconde voordat het verwijderen van de kaart met display: none.

$('.show-card').click(function(e) {
  $('.card').addClass('show').css('display', 'block');
  $('.show-card').addClass('hide');
});

$('.card .close').click(function(e) {
  $('.card').addClass('hide');
  setTimeout(function() {
    $('.card').css('display', 'none').removeClass('show').removeClass('hide');
  }, 1000);
  $('.show-card').removeClass('hide');
});

Dit geeft ons een seconde te animeren de kaart – we hebben het vallen van de onderkant van het scherm. De hoofdframes die hiervoor zijn als volgt:

@keyframes drop-card {
  100% {
    bottom: -100%;
    transform: rotateZ(20deg);
    opacity: 0;
  }
}

Vervolgens passen we dit als een animatie naar de kaart.

1	.card.hide {
2	animation: drop-card 1s forwards cubic-bezier(.54,-0.38,.34,1.42);
3	}

Demo

Het allen samen te brengen, kunt je het resultaat hier.

Een Opmerking over de Voorvoegsels en Browser Compatibiliteit

Animaties worden goed ondersteund in browsers. Afhankelijk van je publiek, moeten ze werken in de meeste situaties. Het is de moeite waard om ervoor te zorgen de basic weergeven en verbergen van functies werk en een animatie wordt toegevoegd als een progressieve verbetering.

Samenvatting

Door het gebruik van meerdere animaties, en met name de eigenschap animatie-delay hebben, we genomen wat kon zijn van een zeer eenvoudige widget en maakte het meer aantrekkelijk. De animatie gidsen de kijker door middel van elk van de elementen en stuurt hen naar de oproepen tot actie.

Animatie kunnen zijn een geweldige manier om te communiceren binnen je ontwerpen. Deze mededeling helpt bezoekers begrijpen je bedoeling, alsmede verbetering van de geloofwaardigheid en het vertrouwen in de kwaliteit van je werk.