Pamiętam jak do złożonych animacji wykorzystywało się Flash’a. Starsi użytkownicy powinni pamiętać, jak instalowało się dodatki Acrobat Flash do przeglądarki, by działały niektóre elementy lub nawet całe strony. Pisanie w ActionScript nie należało do najprzyjemniejszych. Ustawianie animacji “prawie” klatka po klatce - też nie, choć Flash starał się ułatwić ten proces, jak tylko mógł. Umówmy się. Flash nie był do tego. Gry wykonane w nim, sterowanie filmem - to było przeznaczenie flash’a, a nie pojedyncze animacje, czy reklamy.
.1.Bye, bye Flash
Flash odszedł. Moim zdanie to dobrze. Dzisiaj wykorzystujemy i łączymy ze sobą techniki, które nie wymagają dodatków w przeglądarce, by cieszyć nasze oko. Oczywiście, taki sam efekt możemy osiągnąć wykorzystując jedynie JavaScript, tylko po co. Staram się do zwykłych zadań nie wykorzystywać JS, lub wykorzystywać go jak najmniej, w myśl zasady, że do zerwania jednego źdźbła nie potrzebuję kombajna, który zaora całe pole.
Do dzisiejszej animacji wykorzystam SVG, CSS i troszkę JS.
.2.Punkt pierwszy - SVG
Zacznę od vectora svg. Ten kto nie wie, co to svg zachęcam do zapoznania się z wpisem na wikipedii{target=”_blank”}.
Do wykonywania grafiki użytkowej i plików wektorowych używam Inkscape.
W Inkscape tworzę pole tekstowe z treścią np. “POST”. Wybieram dość grubą czcionkę, gdyż będę animowała głównie krawędzie liter. Cały tekst przekształcam w krzywe, a sam plik zapisuję jako zoptymalizowany SVG.
Do dalszej konwersji, z wygody lub też z lenistwa używam aplikacji icomoon, która “standaryzuje “ mi mój plik svg, usuwa ewentualne grupy i przelicza wszystkie ścieżki tak aby móc wprost go użyć, dzięki czemu z zapisu inkscape otrzymuję taki vector:
1
2
3
4
5
6
7
8
9
10
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="122" height="32" viewBox="0 0 122 32">
<!-- P -->
<path d="M0 0.559h13.201q5.888 0 9.028 2.624 3.161 2.603 3.161 7.437 0 4.855-3.161 7.479-3.14 2.603-9.028 2.603h-5.247v10.701h-7.954zM7.954 6.323v8.615h4.4q2.314 0 3.574-1.116 1.26-1.136 1.26-3.202t-1.26-3.181-3.574-1.116z"></path>
<!-- O -->
<path d="M45.079 5.756q-3.636 0-5.64 2.686t-2.004 7.561q0 4.855 2.004 7.541t5.64 2.686q3.657 0 5.66-2.686t2.004-7.541q0-4.876-2.004-7.561t-5.66-2.686zM45.079-0.008q7.437 0 11.652 4.256t4.214 11.755q0 7.479-4.214 11.734t-11.652 4.256q-7.417 0-11.652-4.256-4.214-4.256-4.214-11.734 0-7.499 4.214-11.755 4.235-4.256 11.652-4.256z"></path>
<!-- S -->
<path d="M88.399 1.519v6.528q-2.541-1.136-4.958-1.715t-4.565-0.578q-2.851 0-4.214 0.785t-1.363 2.438q0 1.24 0.909 1.942 0.93 0.682 3.347 1.178l3.388 0.682q5.144 1.033 7.313 3.14t2.169 5.991q0 5.103-3.037 7.603-3.016 2.479-9.234 2.479-2.934 0-5.888-0.558t-5.908-1.653v-6.714q2.954 1.57 5.702 2.376 2.768 0.785 5.33 0.785 2.603 0 3.987-0.868t1.384-2.479q0-1.446-0.95-2.231-0.93-0.785-3.739-1.405l-3.078-0.682q-4.628-0.992-6.776-3.161-2.128-2.169-2.128-5.846 0-4.607 2.975-7.086t8.553-2.479q2.541 0 5.227 0.393 2.686 0.372 5.557 1.136z"></path>
<!-- T -->
<path d="M93.752 0.559h28.427v6.012h-10.226v24.832h-7.954v-24.832h-10.247z"></path>
</svg>
Nad powyższym wektorem trzeba trochę popracować. Moim założeniem jest przesunięcie liter i sekwencyjna ich animacja dzięki css.
W powyższym SVG, każdy element path to poszczególna litera. Kopiuję path razy 3 i grupuję je w znacznik g tak aby był jako, taki porządek i by można było sterować nimi z css’a.
Dodaje klasę odpowiadającą za kolor i ewentualne przesunięcie poszczególnych liter: color1, color2, color3. Mniej więcej wygląda to tak:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="125" height="40" viewBox="0 0 125 40">
<!-- litera P -->
<g class="letter">
<g>
<path class="color1" d="M0 0.559h13.201q5.888 0 9.028 2.624 3.161 2.603 3.161 7.437 0 4.855-3.161 7.479-3.14 2.603-9.028 2.603h-5.247v10.701h-7.954zM7.954 6.323v8.615h4.4q2.314 0 3.574-1.116 1.26-1.136 1.26-3.202t-1.26-3.181-3.574-1.116z"></path>
</g>
<g>
<path class="color2" d="M0 0.559h13.201q5.888 0 9.028 2.624 3.161 2.603 3.161 7.437 0 4.855-3.161 7.479-3.14 2.603-9.028 2.603h-5.247v10.701h-7.954zM7.954 6.323v8.615h4.4q2.314 0 3.574-1.116 1.26-1.136 1.26-3.202t-1.26-3.181-3.574-1.116z"></path>
</g>
<g>
<path class="color3" d="M0 0.559h13.201q5.888 0 9.028 2.624 3.161 2.603 3.161 7.437 0 4.855-3.161 7.479-3.14 2.603-9.028 2.603h-5.247v10.701h-7.954zM7.954 6.323v8.615h4.4q2.314 0 3.574-1.116 1.26-1.136 1.26-3.202t-1.26-3.181-3.574-1.116z"></path>
</g>
</g
.
.
.
</svg>
Aby nadać efekt rysowania, będziemy zmieniać jedynie wartości ` stroke-dasharray i stroke-dashoffset`. Nie będę rozpisywać się dokładnie. Wystarczy, że zamieszczę poniżej kod z działającą już animacją.
Style dla naszego vectora to:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
$firstColor:#fff;
$secondColor:#e91e63;
$thirdColor:#00BCD4;
$bgColor: #454545;
body{background:$bgColor }
svg{
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
transform:scale(3);
path{
fill:none;
stroke-width: 1px;
&.color1 {
stroke: $firstColor;
animation-delay: .2s;
transform:translate3d(1px ,1px,0);
}
&.color2 {
transform:translate3d(2px ,2px,0);
stroke: $secondColor;
animation-delay: .5s;
z-index: 9999;
}
&.color3 {
transform:translate3d(2px ,2px,0);
stroke: $thirdColor;
animation-delay: .6s;
}
}
}
div{
&.animate path{
animation-name:stroke;
animation-iteration-count: 1;
animation-duration:5s;
animation-direction:alternate;
}
}
@keyframes stroke {
from {
stroke-dasharray: 20;
stroke-dashoffset: 0px
}
to {
stroke-dasharray:600;
stroke-dashoffset:200px
}
}
Kod JS jak widać dodany jest jedynie po to by rozpocząć animację od nowa