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



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



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


Note: A version of this demo program is available on the Google Play Store. To locate it, search on “MacConcentrate”.

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)


1 Develop | API Guides | Animation and Graphics | View Animation

Demo_CardAnimation


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


DemoCardAnimation.java

(called from onSingleTap)


card_flip_enter.xml

(See source file for additional comments)

Demo_CardAnimation


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


DemoCardAnimation.java

(called from onFling)


card_slide_left_enter.xml

Demo_Quotation


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


• 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


DemoQuotation.java

(called from onSingleTap)


view_appear_enter.xml

Thank You


animation - york university · • current quotation expands and fades out (animated) • random...

Documents