Animation
EECS4443 – Mobile User Interfaces
AnimationScott MacKenzieYork University
© Scott MacKenzie
Three Ways to Animate
• Roll your own• Using Property Animation• Using View Animation (via XML)
2© Scott MacKenzie
Three Ways to Animate
• Roll your own• Using Property Animation• Using View Animation (via XML)
3© Scott MacKenzie
Roll Your Own
• Use timers for sequencing, calculating animation values, etc
• Do the work in onDraw• Example: Demo_Scale (next slide)
4© Scott MacKenzie
Demo_Scale
5© Scott MacKenzie
Code
Fling gesture
6© Scott MacKenzie
1
2
3
See…PaintPanel.java
Three Ways to Animate
• Roll your own• Using Property Animation• Using View Animation (via XML)
7© Scott MacKenzie
Property Animation
• Android SDK includes a property animation system
• See Property Animation in the API Guides1• Change an object’s property (a field in an object) over a specified length of time
• Specify – the object property to animate– how long to animate it for– what values to animate between
• E.g., Demo_GridView (next slide)
8© Scott MacKenzie1 Develop | API Guides | Animation and Graphics | Property Animation
Demo_GridView
• Double‐tap an image to zoom in (3) or zoom out (1)• Transitions are smoothed (animated)
9© Scott MacKenzie
DoubleTap
Tap
DoubleTap
Tap
Code
10© Scott MacKenzie
ImageViewerActivity.java
Notes: 1. Default duration is 300 ms (see ValueAnimator API)2. See ViewPropertyAnimator API for other animation methods
Concentrate
11© Scott MacKenzie
Note: A version of this demo program is available on the Google Play Store. To locate it, search on “MacConcentrate”.
Three Ways to Animate
• Roll your own• Using Property Animation• Using View Animation (via XML)
12© Scott MacKenzie
View Animation
• Android SDK includes a view animation system• See View Animation in the API Guides1
• Recommended method is to declare the animation in an XML resource
• Resource file is referenced from FragmentManager when swapping fragments
• E.g., Demo_CardAnimation (next slide)
13© Scott MacKenzie
1 Develop | API Guides | Animation and Graphics | View Animation
Demo_CardAnimation
14© Scott MacKenzie
Tap
Tap
• Tap a card to turn it over and read about the news story• Card appears to “flip” (animated)• Code: (next slide)
Card Flip Code
15© Scott MacKenzie
DemoCardAnimation.java
(called from onSingleTap)
16© Scott MacKenzie
card_flip_enter.xml
(See source file for additional comments)
Demo_CardAnimation
17© Scott MacKenzie
Card Exit / Enter
• Swipe a card to transition to the next news story• Exiting card moves to the right and fades out (animated)• Entering card arrives from left and fades in (animated)
Code
18© Scott MacKenzie
DemoCardAnimation.java
(called from onFling)
19© Scott MacKenzie
card_slide_left_enter.xml
Demo_Quotation
20© Scott MacKenzie
Photo Flip
• Swipe a photo to turn it over and read a short bio• Photo appears to “flip” (animated)• Only applies to the photo (quotation stays)• Code: (same as the card flip animation in Demo CardAnimation)
Demo_Quotation
21© Scott MacKenzie
• Tap transitions from current quotation to random quotation• Current quotation expands and fades out (animated)• Random quotation begins invisible and small, then expands and fades in (animated)• Separate fragments for the photo and the text (both animated)• Code: (next slide)
Tap
QuotationExit / Enter
22© Scott MacKenzie
DemoQuotation.java
(called from onSingleTap)
23© Scott MacKenzie
view_appear_enter.xml
Thank You
24© Scott MacKenzie