Introduzione ad AutoAnimate in React

AutoAnimate è una piccola ma potennte libreria per creare animazioni in Javascript e Typescript.

E' compatibile con diverse librerie / framework; in questo articolo vediamo come usarla in React.

Usare le animazioni in Angular

Angular dispone già di un modulo per creare delle animazioni.

Non c'è da installare nulla, va solo attivato: BrowserAnimationsModule.

Applicare filtri alle immagini con i CSS

Ho scoperto che con i CSS è possibile applicare filtri alle immagini in maniera molto semplice.

Questi sono i filtri disponibili:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

A parte il filtro url() gli altri hanno una sintassi molto semplice, e sono tutti filtri "pre-impostati".

Generare animazioni CSS 3 online

Come sappiamo, la nuova specifica CSS (versione 3) è in grado di effettuare animazioni nelle pagine web senza l'aiuto di Flash o Javascript.

Questo rende molto più veloce le pagine e più facili da gestire anche lato codice (CSS è più semplice da imparare, soprattu rispetto a Flash).

Bene, se dobbiamo creare parecchie animazioni o animazioni particolari, ma non vogliamo perdere troppo tempo possiamo provare questo tool online: CSS3 Keyframes Animation Generator.

Il servizio è totalmente gratuito, e abbastanza semplice da usare.

Usare le animazioni in Android

Impostare le animazioni nelle nostre app in Android non è per nulla difficile, almeno per quelle di base.

Android, inoltre, già fornisce alcune animazioni di base, ma noi ne andremo a creare una nostra.

La nostra animazione farà si che la view parta dall'angolo superioe a sinistra, per spostarsi verso il centro dello schermo.

Prima di tutto dentro alla cartella res creiamo una cartella denominata anim; questa conterrà le nostre animazioni in formato XML.

Per il nostro scopo ci serviranno due file, uno per la posizione di partenza e uno per quella finale.

Cominciamo dal secondo, che ho chiamato zero.xml:

<?xml version="1.0" encoding="utf-8"?>

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toXDelta="0"
    android:toYDelta="0" />

Altro non faccio che impostare le coordinate X e Y da zero a zero.