Loading

Animation
UI Design
[ANDROID] & [WINDOWS PHONE]
AnimationDrawable
• Un obiect utilizat pentru crearea animațiilor farme-by-frame, definit
de o serie de obicete tip Drawable.
Este o metoda simplificată de a implementa animații unde totul se
începe de la definirea resurselor Drawable în XML.
Obiectul de tip AnimationDrawable definite de către voi în XML este
alcătuit din <animation-list> și o serie de elemente declarate în cadrul
tagului <item>.

Cum arată un astfel de fișier XML?

AnimationDrawable - XML
<animation-list android:id="@+id/selected" android:oneshot="false">
<item android:drawable="@drawable/item0" android:duration="50" />
<item android:drawable="@drawable/item1" android:duration="50" />
<item android:drawable="@drawable/item2" android:duration="50" />
<item android:drawable="@drawable/item3" android:duration="50" />
<item android:drawable="@drawable/item4" android:duration="50" />
<item android:drawable="@drawable/item5" android:duration="50" />
…
</animation-list>

• Fiecare element „copil” <item> se va stabili pentru el 2 parametri de baza:

1. Resursa
2. Durata ei de afișare
• Durata de afișare variază de la animația aleasă de voi. Nu e obligatoriu de a
defini un standard pentru afișarea fiecărui element. Închipuiți-vă această
acțiune – timing ca o formă programatică de FLIP BOOK Animation.
AnimationDrawable - CODE

// alegem un ImageView care va incarca animatia noastra

// setam pe fundal (background) obiectul nostru AnimationDrawable XML din resurse.
ImageView img = (ImageView)findViewById(R.id.animation_image);
img.setBackgroundResource(R.drawable.spin_animation);

// Preluam de la obictul nostru fundalul care e definit de AnimationDrawable object.

AnimationDrawable animation = (AnimationDrawable) img.getBackground();

// Lansam animatia (un ciclu infinit).

animation.start();
LET'S DO REAL MAGIC
GIF – Graphics Interchange Format

Formatul de imagine GIF este un standard definit

de CompuServe’s pentru imaginile color animate sau
mai bine zis interschimbătoare pe cadre.
CUM LĂMURIM
Compoziție:
- straturi
- starea
- timp
- număr de
ordine
GIF EXPLODE
• https://ezgif.com – un instrument online de a extrage cadrele din GIF
VECTOR
• Cuvantul vector este un sinonim pentru linie.
Imaginea vector este o colectie de linii si curbe conectate care
alcatuiesc obiectele. Cand se creeaza o imagine vector intr-un
program de ilustrare vector, se introduc puncte nod sau de desen,
iar liniile si curbele unesc punctele.
Fiecare nod, linie si curba este definit de softul grafic printr-o
descriere matematica.
RASTER to VECTOR?

https://vectormagic.com

• Vector Magic – este un

instrument rapid și
simplu de utilizat pentru
convertarea imaginilor
raster (.png, .jpg, .gif,
etc.) în imagini de tip
vectorial.
• În final vom primi pentru
fiecare frame fișiere de
tip .AI (Adobe Illustrator)
VECTOR to TEXT (CODE)?
• Microsoft Expression Design 4
• A very powerful vector drawing program that
helps you develop graphics for application user
interfaces like the internet or mobile mediums.
• If you are new to vector graphics, it has a full help
section that will walk you through the process of
developing images that are vector based or blend
vector/bitmap images together. Combined with
the community support and training videos
available, the program can help you advance from
novice to pro in no time.
CUM CONVERTEZ?

1. Open .AI File

2. Export...
3. XAML Silverlight 4 / WPF Canvas
REZULTAT
<Canvas x:Name="Layer_1" Width="196" Height="200" Canvas.Left="0" Canvas.Top="0">
<Path x:Name="Path" Width="195.497" Height="197.682" Canvas.Left="0.809307" Canvas.Top="1.80767" Stretch="Fill"
Fill="#FF00FF99" Data="F1 M 124.067,13.64C 125.453,15.8667 127.253,17.9733 127.76,20.64C 132.587,24.1733
136.573,29.04 142.4,30.96C 147.213,32.9067 152.213,34.3066 156.987,36.2933C 160.107,36.4933 163.2,37.0933
166.173,38.12C 163.227,35.0667 160.667,31.4933 156.787,29.5467C 153.48,26.7867 149.827,24.5067 146.187,22.2133C
144.24,21.5733 142.4,20.6933 140.773,19.4533C 138.44,18.8133 136.173,17.9866 134.067,16.8133C 130.707,15.8133
127.6,13.9467 124.067,13.64 Z M 60.7867,9.65332C 78.6933,1.25334 99.1067,0.559982 118.467,3.12C 120.44,4.97331
122.067,7.18665 122.44,9.96001C 125.347,9.8 128.093,10.84 130.52,12.4C 134.667,13.5067 138.547,15.3733 142.56,16.88C
151.707,23.2666 161.467,29.2266 168.773,37.8533C 170.6,37.8133 172.427,37.7867 174.267,37.76C 179.133,41.5733
182.173,47.1333 185.213,52.4133C 186.64,55.0667 188.253,57.6267 189.373,60.4533C 192.587,68.84 195.893,77.5067
196.307,86.5733C 195.693,95.1866 195.28,103.867 196.08,112.493C 195.213,109.973 193.64,107.813 191.547,106.16C
191.667,112.64 195.987,119 193.333,125.427C 191.147,131.307 190.053,137.667 186.84,143.107C 185.947,145.08
184.693,146.987 182.48,147.587C 181.053,148.28 178.96,148.44 178.4,150.2C 176.267,155.813 176.347,162.827
171,166.653C 163.173,175.187 154.16,182.64 143.707,187.693C 141.987,188.653 140.213,189.533 138.413,190.347C
136.253,191.307 134.013,192.12 131.773,192.88C 122.52,196.413 112.56,198.56 102.587,198.067C 100.027,199.933
96.5067,200 93.9733,198.053C 87.1733,198.333 80.4,197.333 73.8667,195.427C 68.8267,194.52 63.8,193.16
59.4933,190.293C 57.76,189.613 56.08,188.827 54.5333,187.8C 51.6133,186.627 48.88,185.08 46.16,183.52C
44.0667,182.853 42.4133,181.413 41.08,179.733C 34.1333,175.427 27.5333,169.88 23.08,163.013C 21.5467,161.387
19.9467,159.76 19.0667,157.68C 17.24,155.76 15.5067,153.733 14.4667,151.28C 13.36,149.133 12.2267,147.013
11.2667,144.813C 10.2267,143.053 9.29331,141.24 8.50665,139.373C 6.75999,134.893 4.66665,130.493 3.86666,125.707C
2.97333,119.747 0.546651,114.013 0.839986,107.907C 0.986654,101.92 -2.03451e-005,95.36 3.29331,90C 3.67999,87.1333
4.54665,84.3466 5.86666,81.7733C 6.83999,79.52 7.98665,77.3466 9.18665,75.2133C 10.3067,72.7733 11.5733,70.3333
13.8133,68.72C 15.64,65.3866 18.08,62.4667 20.44,59.4933C 20.0533,58.84 19.28,57.52 18.8933,56.8533C 16.6533,56.24
14.4267,55.6267 12.16,55.1733C 12.4533,53.8133 12.7333,52.4533 13.0267,51.1066C 16.0667,47.32 18.3333,42.96
21.7467,39.4667C 23.3867,35.72 26.9467,33.44 29.6133,30.4933C 34.4,25.1467 40.44,21.2133 46.0533,16.8133C
47.5733,16.1733 49.08,15.4933 50.6,14.8267C 52.2133,13.6667 53.8667,12.5333 55.4933,11.3866C 57.2666,10.8533
59.0267,10.2666 60.7867,9.65332 Z "/>
</Canvas>
COMPARĂM