Animation - York University · • Current quotation expands and fades out (animated) • Random...
Transcript of Animation - York University · • Current quotation expands and fades out (animated) • Random...
-
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