Animazioni con Compass

15 settembre 2014

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.

Tutte le lezioni

1 ... 10 11 12 ... 18

Se vuoi aggiornamenti su Animazioni con Compass inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Animazioni con Compass

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy