Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
3.) References
https://developer.android.com/guide/topics/resources/animation-resource
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
4.) References
https://developer.android.com/guide/topics/graphics/drawable-animation.html
Android: frame animation, SVG-based animation
https://developer.android.com/guide/topics/resources/animation-resource
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
6.) References (Cont.)
Project AnimationAndroid • Item Transition Animation
> project TransitionAnimationAndroid
30
© C
. Vog
t, 20
19.
And
roid
: Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
7.) Animations with SurfaceView
Since Android 1.0 / API level 1
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
8.) OpenGL ES
“Open Graphics Library for Embedded Systems”• Close to hardware performant, but cumbersome programming
• Animation of 2D and 3D graphics
Since Android 1.5 / API level 3
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
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
TechnologyArts SciencesTH Köln
8.) References (Cont.)
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