Animazioni con Compass

Le animation non fanno parte dei moduli base di Compass. Esistono alcuni plugin che mettono a disposizione alcuni semplici mixin per la gestione delle animazioni. Per il nostro esempio utilizzeremo il plugin animation compatibile con la versione 0.12 di Compass.

Per installare il plugin il primo passo consiste nell'eseguire da riga di comando la seguente
istruzione:

gem install animation —pre

Il secondo consiste nell'aggiungere il require della libreria all'interno del file config.rb aggiungendo l'istruzione :

require 'animation'

Come terzo step modifichiamo il file SCSS, in cui aggiungiamo l'istruzione di import dei mixin del plugin:

@import "animation";

Cerchiamo di realizzare una semplice bussola e animiamo il movimento dell'ago (provalo online).

Definiamo il codice HTML:

<div class="compass">
	<div class="north">N</div>
	<div class="east">E</div>
	<div class="west">W</div>
	<div class="south">S</div>
	<div class="freccia">
		<div class="freccia-up"></div>
		<div class="freccia-down"></div>
	</div>
</div>

Passiamo poi a creare il nostro file SCSS:

@import "compass/reset";
@import "compass/css3";
@import "animation";
body {
	background: #000;
}
.compass {
	width: 300px;
	height: 300px;
	background-color: #FFF;
	border-radius: 100%;
	position: relative;
	margin: 30px auto;
}
.freccia {
	height: 100%;
	width: 30px;
	left: 135px;
	position: relative;
	padding-top: 5px;
	@include box-sizing(border-box);
	@include rotate(20deg);
	@include animation(spin 2.0s alternate infinite);
}
.freccia-up {
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 145px solid #EF5052;
	position: relative;
}
.freccia-down {
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 145px solid #F3F3F3;
	position: relative;
	@include rotate(180deg);
}
.north {
	font-size: 24px;
	color: #000;
	position: absolute;
	width: 300px;
	left: 0px;
	top: 10px;
	text-align: center;
}
.east {
	font-size: 24px;
	color: #000;
	position: absolute;
	right: 10px;
	top: 145px;
}
.west {
	font-size: 24px;
	color: #000;
	position: absolute;
	left: 10px;
	top: 145px;
}
.south {
	font-size: 24px;
	color: #000;
	position: absolute;
	width: 300px;
	text-align: center;
	left: 0px;
	bottom: 10px;
}
@include keyframes(spin) {
	0%{
		@include rotate(0deg);
	}
	50% {
		@include rotate(80deg);
	}
	100% {
		@include rotate(-180deg);
	}
}

In questo esempio, dopo aver definito il css essenziale per disegnare la bussola, abbiamo
implementato una animazione che ruota l'ago di 80° e -180°.

Abbiamo sfruttato il mixin keyframe che ci permette di definire i vari stati dell'animazione e abbiamo incluso l'animazione sfruttando il mixin animation che ci permette di richiamare il keyframe e definire iteration-count e direction dell'animazione.