<< Sesta parte

Animazione e interattività

L'animazione è creata dalla visualizzazione in rapida successione (e a intervalli regolari)di immagini lievemente differenti tra loro.
In Blend l'animazione si basa su Keyframe; per creare un'animazione di un oggetto, ad esempio il movimento da sinistra a destra di un rettangolo dovete: indicare la posizione iniziale del rettangolo nel primo keyframe (supponiamo al secondo 0), indicare la posizione finale del rettangolo nell'ultimo keyframe (supponiamo al secondo 2), indicare un eventuale percorso e eventuali trasformazioni e il SW attraverso un'interpolazione creerà l'animazione.
Blend52
Sarebbe possibile anche creare animazioni frame x frame, ma è un metodo di lavoro sicuramente + lento (dovreste disegnare ogni frame) e il file risulterebbe anche + pesante.
In Blend inoltre potete decidere se un determinato oggetto deve essere visibile o no in determinati momenti attraverso la proprietà "Visibility" (Properties panel -> tab "Appearance").
Nella Timeline c'è la struttura per le sequenza animate della vostra applicazione; un'animazione in Blend è composta di una timeline in cui sono registrati i vari keyframe, ogni keyframe rappresenta il momento in cui le proprietà dell'oggetto vengono modificate.
Se la vostra animazione non deve essere riutilizzata da qualche altra parte potete crearla direttamente nel documento come in questo esempio:
create un nuovo progetto (menù "File" -> New project), nell'artboard disegnate un rettangolo che sarà il soggetto di questa semplice animazione, premete F7, nel pannello Object and timeline" cliccate sul tasto con il "+" (create new timeline) date un nome alla nuova timeline e premete "ok".
Blend53
Nel pannello interaction -> tab "Triggers" troviamo di default "When Window.Loaded is raised" e sotto "nome della timeline".begin": sta a significare che una volta caricata la finestra dell'applicazione l'animazione della timeline appena creata andrà in play. Se volete aggiungere una semplice interattività potreste modificare l'event trigger in "When object.PreviewMouseDown is raised" in modo tale da far partire l'animazione della nuova timeline al click del mouse sull'oggetto.
Blend54
Selezionate il rettangolo e nel pannello "Object and timeline" cliccate sul tasto "Record Keyframe"
Blend55
Spostate l'indicatore giallo nella timeline fino al frame in cui volete far terminare la vostra animazione e spostate il rettangolo (potete anche applicare delle trasformazioni o modifiche di altre proprietà come il colore), in automatico verrà creato il secondo keyframe e l'animazione interpolata.
Blend56
Per visualizzare un'anteprima nell'artboard dell'animazione premete il tasto "Play" nel pannello "objects and timeline", altrimenti salvate il project e premete il tasto F5
Per uscire dalla modalità "timeline recording" selezionate "default" nel box sotto la scritta "Objects and timeline"
Blend57
Se invece avete bisogno di riusare l'animazione + volte nello stesso documento o in altre applicazioni potete crearla in un "user control", l'user control con l'animazione poi può essere inserito nell'artboard come qualsiasi altro control. Per creare un user control le procedure possono essere 2:

1. File -> new project, selezionate "Control Library" come tipo di progetto e selezionate il linguaggio di programmazione del code-behind. A questo punto create la vostra animazione e una volta terminata nel menù "Project" scegliete l'opzione "Build project" (Ctrl + Shift + B) per creare il file .dll che verrà salvato nella cartella \bin\debug. Questo file .dll potrà essere richiamato in altri progetti con il comando Menù "Project" -> "Add reference" in modo d'averlo a disposizione nell'asset library (custom control), da qui potete trascinarlo direttamente nell'artboard

2. potete creare un user control anche all'interno di un progetto esistente attraverso il comando "File- > New Item" (Ctrl + N), scegliete il template "UserControl" e poi seguite la procedura del punto precedente, naturalmente nel progetto in cui avete creato questo user control non ci sarà bisogno di richiamare il file .dll, sarà già presente nell'asset library.

Se volete che tutti i control di un determinato tipo (ad esempio i button) siano animati allo stesso modo potreste creare l'animazione all'interno del "control's template"; ciò non significa che tutti i control saranno identici, usando un "template binding" ogni control potrebbe avere un colore diverso (o altre proprietà). Per aggiungere un'animazione a un button la procedura è la seguente:
disegnate un SimpleButton (Asset Library -> Simple Style) nell'artboard, nel pannello Object and timeline selezionate il button e con il tasto destro scegliete l'opzione "Edit Control Parts (Template) -> Edit Template" per entrare nella modalità di editing del template
Blend58
Per uscire dalla modalità di editing del template e ritornare al documento cliccate sull'icona "Scope up" nell'interaction panel
Blend59
Tornati nella modalità di editing del template cancellate l'elemento child "border" e cliccate 2 volte sul grid per attivarlo, in modo tale da poter aggiungere nuovi elementi child.
Blend60
Disegnate un rettangolo all'interno del grid, cliccate con il tasto destro sul rettangolo e selezionate "Order -> Send to back", nel pannello properties cambiate il colore al rettangolo in quello che sarà il colore di "default" del button.
Blend61
Nel pannello "Interaction" sotto "Triggers" selezionate il trigger "IsMouseOver = True" e in "Action when activating" cliccate sul tasto con il "+" (add new action) per aggiungere un'animation timeline. Di default l'azione sarà quella di far iniziare la timeline che avete appena creato, lasciate così questa azione.
Blend62
Spostate il cursore della timeline al secondo uno e modificate il colore del rettangolo, verrà creato in automatico un keyframe
Blend63
Selezionate di nuovo il trigger "IsMouseOver = True" e in "Action when Deactivating" aggiungete una nuova action. Modificate l'azione da Begin a Stop in modo tale che il tasto ritorni alla condizione iniziale
Blend64
Salvate e premete F5 per testare l'applicazione, nella finestra dell'applicazione provate a posizionarvi con il mouse sopra il button e poi a uscire dall'area attiva.

Keyframe
Un keyframe indica sulla timeline il momento in cui una proprietà di un elemento è modificata, ci sono 4 tipi di keyframe:
1. object - level keyframe: si applicano a qualsiasi elemento e indicano che una delle proprietà di un elemento child è stata modificata (riga "rectangle" nell'immagine d'esempio)
Blend65
2. Compound keyframe: indica che una proprietà ha delle proprietà child che sono state animate (riga "traslatino" nell'immagine d'esempio)
Blend66
3. Simple Keyframe: rappresentano le singole proprietà modificate nel tempo (righe "X" e "Y" nell'immagine d'esempio), si lavora con questi keyframe per settare determinate azioni come ad esempio quelle di loop (cliccate con il tasto destro su questi keyframe e selezionate "Repeat Count", nella finestra potrete settare il numero di ripetizione o "forever" con il tasto accanto a destra del text box)
Blend67
4. Implicit keyframe: sono presenti quando un'animazione è interrotta da un'altra e la seconda non ha un marker al secondo 0 (zero)

Cliccando con il tasto destro sui keyframe si possono impostare le opzioni di interpolazione (Erase In, Erase Out, Hold out, Linear) che controllano l'accelerazioni e decelerazioni dell'animazione.
Il frame rate determina quanti frame ci sono in un secondo, l'applicazione viene eseguita al massimo frame rate possibile. È possibile settare il valore di snap del cursore della timeline, questo valore si setta dallo "Snapping" (icona in alto a destra nel pannello "object and timeline".

Motion Path
Usando il tool "convert to motion Path" è possibile creare un percorso da far seguire a un oggetto.
Disegnate nell'artboard un elemento che sarà l'oggetto dell'animazione e dategli un nome, disegnate un percorso da seguire (potete usare il tool pen, pencil, ellipse, rectangle, line), aggiungete una timeline.
Selezionate il percorso e scegliete l'opzione "menù Object -> Path -> Motion path", come target selezionate il primo oggetto e premete "ok". Per modificare il tempo di riproduzione del movimento espandete il nodo nella timeline e nella riga "Motion path" spostate le barrette blu d'inizio e fine
Blend68

La struttura della timeline permette di avviare diverse animazioni allo stesso momento:
aprite un nuovo progetto e premete F7 per entrare nell'animation Workspace.
Disegnate un'ala di farfalla, copiatela, flippatela; selezionate le 2 ali e raggruppatele in un grid, a questo punto rinominatele.
Disegnate il corpo della farfalla e un percorso ellittico x il volo della farfalla, con Convert to motion path" collegate il corpo e le ali al percorso e impostate il volo sullo stesso numero di frame, ora potete rendere invisibile o cancellare la path che vi è servita per creare il percorso.
Con il tasto destro del mouse cliccate sui i frame dei 2 "<> Motion path" e settate il counter su "forever". Se premete il tasto F5 potrete vedere un'anteprima della vostra applicazione, una volta caricata la finestra dell'applicazione la farfalla inizierà a girare in tondo.
Blend69

Nel pannello "Object and timeline" aggiungete una nuova timeline con il tasto "+" e chiamatela "flap", con il tasto "record keyframe" settate un keyframe al frame 0 (zero) e 1, spostate il cursore della timeline al frame 0,5, selezionate il grid "Ali" e con il tasto "alt" premuto nell'artboard scalate in X e in Y le ali in modo tale che sembrino quasi chiuse. (Se scalate un elemento con il tasto "alt" la scala verrà applicata dal centro dell'elemento).
Nella timeline cliccate con il tasto destro sui frame della riga "<> Scale X" e "<> Scale Y" e settate il repeat counter su "forever".
Blend70
Premendo F5 potete avere un'anteprima della vostra applicazione in cui la farfalla vola in tondo sbattendo le ali.

Triggers
I trigger servono a modificare lo stato di un oggetto nell'artboard in risposta a un evento o a un cambiamento di proprietà. Possono essere usati per comandare la riproduzione di una timeline, di default una timeline parte al caricamento ma potreste decidere ad esempio di farla partire al click del mouse (o qualsiasi altra azione).
Durante lo svolgimento di un'applicazione gli oggetti subiscono dei cambiamenti al proprio stato (ad esempio un button)
Blend71
Solitamente lo stato di un elemento cambia in seguito a delle azioni (con il mouse o da tastiera) da parte dell'utente. Questi valori (.ISMouseOver, .IsPressed…) non sono proprietà visibili da parte dell'utente quindi bisogna collegare delle proprietà visive (ad esempio il cambiamento di colore o di forma, come nell'esempio precedente dell'animazione all'interno di un button).
Esistono 2 tipi di trigger:
1. property trigger: il meccanismo x il quale un cambiamento di una proprietà innesca un cambiamento (statico o animato) in un'altra proprietà

2. Event trigger: la modifica (statica o animata) di una proprietà viene innescata da un evento

In quest'immagine d'esempio ci sono 2 "property trigger" (IsMouseOver e IsPressed) e un "Event trigger" (target-element.loaded). il property trigger "IsMouseOver" è selezionato e potete vedere le proprietà che va a modificare (properties when active) e la timeline che va a controllare (Timeline1)
Blend72

Event handlers: sono i metodi per l'avvio di una procedura che coinvolge diversi settaggi di una proprietà o una timeline e in risposta a un determinato evento. Vengono definiti nel code-behind file del vostro documento e sono scritti in C# o in MS Visual basic .NET

Coded animation: le applicazioni create in Blend fondamentalmente sono applicazioni Windows Presentation Foundation (WPF), quindi è possibile creare e modificare i propri progetti anche direttamente da codice. L'applicazione precedente della farfalla in linguaggio XAML si presenta così (riporto solo la prima parte di codice):

 <Window

			xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

			xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

			x:Class="UntitledProject14.Window1"

			x:Name="Window"

			Title="Window1"

			Width="640" Height="480" Background="#FFFFFFFF">



			<Window.Resources>

						<Storyboard x:Key="Timeline1">

								   <DoubleAnimationUsingPath BeginTime="00:00:00" Duration="00:00:04" RepeatBehavior="Forever" Storyboard.TargetName="Ali" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X">


Nell'ottava parte parlo di Control e Style

---
Questo articolo è stato importato automaticamente dal forum il 31/lug/2014
Per vedere il post originale e/o i commenti sul forum prima di quella data clicca qui