Durante la visita al Codemotion di Roma la nostra attenzione si è focalizzata in particolare sul talk di Aga Naplocha.
Abbiamo imparato come inserire, gestire ed animare un SVG all'interno di un progetto web.
Grazie a questa tecnologia è possibile disegnare su software grafico come Illustrator delle figure, esportarle come SVG e successivamente gestirle attraverso il CSS per creare molti tipi di animazioni.
I vantaggi legati all'uso di SVG sono molteplici:
Si può incollare il codice all'interno del tag SVG, questo metodo è preferibile se il file di riferimento è semplice e con un numero di tracciati limitati.
Per animazioni e SVG non complesse secondo noi potrebbe essere la soluzione migliore
Vediamo un esempio
< svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.19 67.19" >
< defs >
< style >.cls-1{fill:none;stroke:#1d1d1b;stroke-miterlimit:10;}< /style >
< /defs >
< title>quadrato
< rect class="cls-1" x="0.5" y="0.5" width="66.19" height="66.19"/ >
< /svg >
Un SVG si può gestire in maniera semplice da CSS, infatti ogni tracciato può essere identificato attraverso una classe, cosi facendo da CSS si può dare ad esso la tipologia di regola scelta.
Vediamo un esempio
.linea_1, .linea_2 {
animation: rotazione 10s linear forwards;
transform-origin: 50% 50%;
}
@keyframes rotazione{
0% {
transform:rotate(0deg) ;
}
50% {
transform:rotate(-360deg) ;
}
100% {
transform:rotate(-720deg) ;
}
}
.catena {
stroke-dasharray: 1;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.scritta {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
}
.result {
position: relative;
height: 50rem;
}
#Catena, #Scritta, #Croce {
position: absolute;
}
#Croce {
top:10px;
}
#Catena {
top: 53px;
left: 50px;
}
#Scritta {
right: -62px;
top: 60px;
}
Dopo aver fatto un pò di esercizi sulle SVG abbiamo deciso di provare a creare un mini-gioco, un modo per rendere questo workshop ancora più divertente, ma soprattutto per imparare sempre qualche cosa di nuovo.
Ecco come abbiamo realizzato il gioco animato
/*.game-show {
height: 300px;
position: relative;
width: 600px;
display: block;
margin: 0 auto;
background-color: #52a245;
border-radius: 5%;
}
#Barra_1, #Barra_2, #Barra_3, #Ball {
position: absolute;
}
#Barra_1 {
left: 0%;
top: 150px;
}
#Barra_2 {
right: 0%;
top: 40%;
}
#Barra_3 {
right: 50%;
top: 0%;
}
#Ball {
top: 50%;
right: 50%;
}
#Ball {
animation: ball-move 10s linear infinite;
transform-origin: 50% 50%;
animation-delay: 3s
}
@keyframes ball-move {
0% {
transform: translateX(300px);
top: 150px;
}
10% {
transform: translateX(-300px);
top:20px;
}
20% {
transform: translateX(300px);
top:30px;
}
30% {
transform: translateX(-300px);
top:190px;
}
40% {
transform: translateX(300px);
top:70px;
}
50% {
transform: translateX(-300px);
top:100px;
}
60% {
transform: translateX(300px);
top:10px;
}
70% {
transform: translateX(-300px);
top:280px;
}
80% {
transform: translateX(300px);
top:150px;
}
90% {
transform: translateX(-300px);
top:250px;
}
100% {
transform: translateX(300px);
top:150px;
}
}
#Barra_1 {
animation: barra-move 10s linear infinite;
transform-origin: 50% 50%;
animation-delay: 3s
}
@keyframes barra-move {
0% {
top:150px;
}
10% {
top:10px;
}
20% {
top:100px;
}
30% {
top:100px;
}
40% {
top:50px;
}
50% {
top:50px;
}
60% {
top:200px;
}
70% {
top:200px;
}
80% {
top:150px;
}
90% {
top:180px;
}
100% {
top:180px;
}
}
#Barra_2 {
animation: barra-move2 10s linear infinite;
transform-origin: 50% 50%;
animation-delay: 3s
}
@keyframes barra-move2 {
0% {
top:150px;
}
10% {
top:10px;
}
20% {
top:10px;
}
30% {
top:100px;
}
40% {
top:50px;
}
50% {
top:50px;
}
60% {
top:10px;
}
70% {
top:200px;
}
80% {
top:150px;
}
90% {
top:180px;
}
100% {
top:150px;
}
}
#Barra_3 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 30s linear forwards;
animation-delay: 1s;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}*/