android: animation · 3 © c. vogt, 2019. android: animation prof. dr. carsten vogt technology arts...

1

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t

TechnologyArts SciencesTH Köln

Android: Animation

Prof. Dr. Carsten Vogt

Technische Hochschule KölnFakultät Informations-, Medien- und Elektrotechnik

Nov. 2019

2

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


Animation Types in Android

1.) Frame animation:Play a sequence of images

2.) Tween animation:Basic animation operations on ImageViews(scaling, rotation, ...) defined in XML

3.) Property animation:Modify any attribute values of objects of any type over time

4.) SVG-based animation:XML-defined animation of 2D SVG graphics

5.) Physics-based animation:Movement of objectscontrolled by a spring force or slowed down by friction

3

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


Animation Types in Android (Cont.)

6.) Transition animation:Animated transitions between activities/ between scenes within an activity/ between representations of a View

7.) Animation by a dedicated thread: draw() operations called by a thread on a SurfaceView

8.) OpenGL-based animation:Animation of 2D and 3D objectsthrough the Open Graphics Library

4

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


General References

https://developer.android.com/training/animation Android: Overview of various animation techniques

• Does, however, not cover all available techniques• Structure and explanation sometimes not clear enough

http://www.nt.th-koeln.de/vogt/vma/tutorials.html http://www.nt.th-koeln.de/

vogt/vma/tutorials.html#property_animation A collection of video tutorials with Android projects and foils

Project AnimationAndroid • With references to further specific projects

5

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


1.+2.) View Animation: Frame and Tween Animation

Frame Animation and Tween AnimationOldest animation techniques• “Pre-3.0 animation”: since API level 1• Now considered to be outdated

6

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


1.) Frame Animation

Plays a sequence of images (= drawables)

Based on classandroid.graphics.drawable.AnimationDrawable

Programming steps:• Specify the image sequence by an animation-list:<animation-list>

<item drawable="..." duration="..."><item drawable="..." duration="...">...

</animation-list> • Use this animation-list as background of an ImageView • Display this ImageView • Start the animation

by calling the AnimationDrawable method start() on the background of the ImageView

7

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


2.) Tween Animation

Transformations of a View • Changing its size, position, rotation/oriention, transparency

Based on package android.view.animationwith class Animation and its subclasses

Programming steps:• Define the animation by an XML file in res/anim • Display the View• Start the animation

by calling the View method startAnimation()with the animation from res/anim as a parameter

8

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


1.-4.) References

https://developer.android.com/guide/topics/resources/animation-resource

Android: frame / tween / property animation

https://developer.android.com/guide/topics/graphics/drawable-animation.html

Android: frame animation, SVG-based animation

Project AnimationAndroid • Item Frame Animation > project GrafAnimMMAndroid • Item Tween Animation > project GrafAnimMMAndroid

9

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


3.) Property Animation

Since Android 3.0 / API level 11

Transforms / animates the properties of objectsby repeatedly calling setter methods for object attributes• Not limited to View objects• More flexible than View Animation

Details: see my talk “Android: Property Animation”

10

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


3.) References


Android: frame / tween / property animation

https://developer.android.com/guide/topics/graphics/prop-animation.html

Android: property animation

Project AnimationAndroid • Item Property Animation (1) > project GrafAnimMMAndroid • Item Property Animation (2)

> project PropertiesAnimationAndroid • Item Property Animation (3)

> project UtilitiesPropAnimCV_Demo

11

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


4.) SVG-Based Animation

Since Android 5.0 / API level 21• For earlier Android versions: compatibility libraries

Animation of 2D SVG graphics• I.e. graphics specified by SVG paths• E.g. icons

Android classes:• VectorDrawable:

specifies a static drawable object by SVG paths• ObjectAnimator:

specifies an animation of an object property• AnimatedVectorDrawable:

links ObjectAnimators to VectorDrawables

12

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


4.) SVG-Based Animation: Programming

Programming steps:• Specify the objects to be displayed

• as VectorDrawables • by XML files in res/drawable • SVG paths to define the geometry• groups of paths to define a hierarchical structure

• Specify the animations• as ObjectAnimators• by XML files in res/animator • refer to object properties,

specify their animations (duration, start value, end value, ...)

13

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


4.) SVG-Based Animation: Programming (Cont.)

• Link VectorDrawables and ObjectAnimators• by AnimatedVectorDrawables• pairs of names:

(path or group name within VectorDrawable,ObjectAnimator name)

• Display the AnimatorVectorDrawables• Start the animations

by calling the AnimationDrawable method start()

14

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


4.) References

https://developer.android.com/guide/topics/graphics/drawable-animation.html

Android: frame animation, SVG-based animation


Android: SVG-based animation• With an instructive video:

https://youtu.be/wlFVIIstKmA

https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html

Detailed introduction to Android SVG animationwith online examples

15

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


4.) References (Cont.)

https://medium.com/androiddevelopers/understanding-androids-vector-image-format-vectordrawable-ab09e41d5c68

Android: class VectorDrawable for static SVG graphics

https://www.w3.org/TR/SVG/paths.htmlSpecification of SVG paths

https://developer.android.com/studio/write/vector-asset-studio.html

Tool “Vector Asset Studio”to import vector graphics (e.g. icons)

Project AnimationAndroid • Item Vector Graphics Animation

> project VectorGraphicsAndroid

16

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


5.) Physics-Based Animation

Introduced 2017 in the Support Library (now: Android Jetpack)• Package android.support.animation.*

Animation based on physical principles:• Spring-based animation:

Move objects as if attached to a spring• Fling-based animation:

Move objects linearly slowed down by friction

17

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


5.) Physics-Based Animation: Programming

Programming steps:• Include the support library in your app’s build.gradle file:dependencies {

...implementation 'com.android.support:

support-dynamic-animation:28.0.0'...

} • Import the package into your Java code:import android.support.animation.*;

18

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


5.) Physics-Based Animation: Programming (Cont.)

• Generate SpringAnimation and FlingAnimation objectsfor individual object properties • position, scaling factor, rotation, transparency• SpringAnimation: damping ratio, stiffness• FlingAnimation: friction

• Start the animations by callingthe SpringAnimation / FlingAnimation method start()

19

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


5.) References

https://developer.android.com/guide/topics/graphics/spring-animation.html.../fling-animation.html

Overview of spring- and fling-based animation

Project AnimationAndroid • Item Physics-based Animation

> project PhysicsBasedAnimationAndroid

20

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


6.) Transition Animation

Since Android 4.4 / API level 19• Now part of Android Jetpack

a.) Cross-activity animation• Animated switches between activities

b.) Animated layout changes• Animated modifications of the GUI layout of one activity

21

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


6.a) Cross-Activity Animation

Animation of• enter transitions: how an activity layout appears• exit transitions: how an activity layout disappears• shared elements transition:

how views shared by two activitiesare animated in an activity switch

Supported enter and exit transitions:• Explode: views appear in / disappear from the center• Slide: views appear / disappear at an edge of the display• Fade: views appear / disappear by changing their opacities

22

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


6.a) Cross-Activity Animation:Programming Enter-Exit Transitions

Programming steps for enter-exit transitions:• Specify enter-exit transitions in styles.xml, e.g.:<item name="android:windowEnterTransition">

@android:transition/slide_left</item><item name="android:windowExitTransition">

@android:transition/slide_right</item><item name="android:windowReturnTransition">

@android:transition/fade</item><item name="android:windowReenterTransition">

@android:transition/fade</item> • Refer to these transitions in startActivity() calls• Transitions are automatically applied

when returning from / to an activity

23

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


6.a) Cross-Activity Animation:Programming Shared-Element Transitions

Programming steps for shared-element transitions:• Enable shared-element transitions in styles.xml:<item name="android:windowActivityTransitions">

true</item> • Give view elements in different layouts

the same “transition name”• these will be the origin and the target of an animated change

• Switch between activities,referring to a shared view and a transition name

24

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


6.b) Animated Layout Changes

Animation of layout changes within an activity• To add, delete, modify GUI elements

Supported techniques:• Transitions between scenes

• scene = layout with views• Transitions between representations of a view

• appearance, disappearance, size, rotation angle• Animated apperance and disapperance of views

• adding / removing views to / from a layout

25

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


6.b) Animated Layout Changes:Programming Transitions Between Scenes

Programming steps for transitions between scenes:• Create Scene objects for the start and the end layout• Specify transitions in res/transitions

= animations of scene changes• Call go() to show the first scene• Call transitionTo() to switch to other scenes

26

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


6.b) Animated Layout Changes:Programming Animated Transitions Between View Repres.

Programming steps for transitions between view repres.:• Define a view or a layout that shall be animated• Create Transition objects to specify the animations

• To let the view appear / disappearby fading / exploding / sliding

• To change the size of the view• To change the rotation angle of the view

• Call TransitionManager.beginDelayedTransition()to play an animation

27

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


6.b) Animated Layout Changes:Programming Animated View Appearances / Disappearences

Programming steps for animated view (dis-)appearances:• Decide for which view groups in the layout

the adding / removal of views shall be animated.• Enable animations for these view groups:androidAnimateLayoutChanges="true"

• Add views to a view group: viewGroup.addView(...) • Remove views from a view group:

viewGroup.removeView(...)

28

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


6.) References

https://developer.android.com/training/transitions/start-activity.htmlAndroid: animated switches between activities

https://developer.android.com/training/transitions/ Android: animation of layout changes

https://www.androiddesignpatterns.com/2014/12/activity-fragment-transitions-in-android-lollipop-part1.html Detailed explanation of some transition animation techniques

https://github.com/lgvalle/Material-Animations Code example

https://www.youtube.com/watch?v=S3H7nJ4QaD8 Video on Android transition animation

29

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t



Project AnimationAndroid • Item Transition Animation

> project TransitionAnimationAndroid

30

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


7.) Animations with SurfaceView


Based on classes SurfaceView and Thread

Programming steps:• Write a subclass of SurfaceView

• with an onDraw() method specifying what to display• onDraw() should depend

on attributes of the SurfaceView object• Write a subclass of Thread

to control the drawing of the SurfaceView • with an infinite loop that repeatedly

> modifies the attribute values of the SurfaceView and> calls its onDraw() method

• Create a Thread object and start it

31

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


7.) References

https://developer.android.com/reference/android/view/SurfaceView

Documentation of the SurfaceView class

https://www.youtube.com/watch?v=sBykXthKemgVideo tutorial on SurfaceView-based animation

Project AnimationAndroid • Item SurfaceView Animation > project GrafAnimMMAndroid

32

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


8.) OpenGL ES

“Open Graphics Library for Embedded Systems”• Close to hardware performant, but cumbersome programming

• Animation of 2D and 3D graphics


Package android.opengl.* with:• GLSurfaceView:SurfaceView subclass for views

to draw (“render”) graphical objects on• GLSurfaceView.Renderer:

Interface with callback methodswhere to create and draw objects

• Utility classes

33

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


8.) OpenGL ES: Programming

Programming steps:• Define classes for the graphical objects

with draw methods• executing OpenGL code to draw the object• to be called by the renderer

• Define a class for the renderer,implementing the GLSurfaceView.Renderer interface:• onSurfaceCreated()

> called when the view to be rendered is created> can, e.g., create the objects to be drawn

• onDrawFrame()> called when the view shall be (re-)drawn> calls the draw methods of the graphical objects

• onSurfaceChanged()> called when the size of the view changes

34

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


8.) OpenGL ES: Programming (Cont.)

• Define a subclass of GLSurfaceView • with a constructor registring the renderer

• Create a renderer• i.e. an object of the Renderer class defined above

• Create a view• i.e. an object of your GLSurfaceView subclass• registring the renderer through the constructor

• Display the view on the screen

35

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t


8.) References

https://developer.android.com/guide/topics/graphics/opengl

Android: OpenGL-based animation

https://developer.android.com/training/graphics/opengl/

https://learnopengl.com/A very detailed tutorial on OpenGL

https://stuff.mit.edu/afs/sipb/project/android/docs/guide/topics/graphics/opengl.html

A short, concise intro to Android OpenGL-based animation

http://www.learnopengles.com/android-lesson-one-getting-started/

A very detailed tutorial on Android OpenGL-based animation

36

© C

. Vog

t, 20

19.

And

roid

: Ani

mat

ion

Prof

. Dr.

Car

sten

Vog

t



https://code.tutsplus.com/tutorials/how-to-use-opengl-es-in-android-apps--cms-28464

Another Android tutorial

https://github.com/learnopengles/Learn-OpenGLES-TutorialsExample with source code

https://www.khronos.org/opengl/wiki/Main_PageOpen GL Wiki

Project AnimationAndroid • Item OpenGL Animation > project OpenGLAndroid

android: animation · 3 © c. vogt, 2019. android: animation prof. dr. carsten vogt technology arts...

Documents