android: property animation - th-koeln.de · the android programmer must only provide fundamental...
TRANSCRIPT
1
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Android: Property Animation
Prof. Dr. Carsten Vogt
Technische Hochschule KölnInformation, Media, and Electrical Engineering
Köln / Cologne, Germany
2019
2
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Android: Property Animation1. Fundamentals2. ViewPropertyAnimator3. ObjectAnimator: Basics4. ObjectAnimator: Animation of multiple properties5. ObjectAnimator: Timing control (1)6. ObjectAnimator: Timing control (2)7. ObjectAnimator: Property value calculation8. ValueAnimator9. XML-defined Animation
3
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
1. Fundamentals
Objects have properties • aka attributes / members / fields• to store values• with setter methods to change values
A View object e.g.• has properties x and y
• to specify its position on the display• with setters setX() and setY()
private int a;void setA(int a) {this.a = a; }
class MyClass {
}
Viewx
y
4
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Property Animation – Fundamentals
Property animation • modifies property values over time
• from start values to end values• by repeatedly calling the setters • applicable to any object with setter methods
For a View object e.g.:• call setY(yyy)
with yyy increasing from ystart to yend • to move the View vertically
Viewystart
Viewyend
y’
y”View
View
5
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Property Animation – Fundamentals
The Android programmermust only provide fundamental values:• name of the property to be animated• start and end values• duration and timing behaviour
The runtime systemautomatically controls the animation • by repeatedly calling the setters
6
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
2. ViewPropertyAnimator
Class ViewPropertyAnimator:• The easiest way to animate View objects
Limitations:• Only applicable to View objects• Only applicable to some fundamental properties
• Position, size, rotation, transparency• Always linear interpolation between start and end value
7
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
ViewPropertyAnimator – Programming Steps
Step 1: Get the ViewPropertyAnimator of the View• myView.animate()
Step 2: Specify the properties to be animatedwith their end values
• myView.animate().x(endValueX).y(endValueY)
Step 3: Specify the duration of the animation• myView.animate().x(endValueX).y(endValueY).
setDuration(duration)
Step 4: Start the animation• myView.animate().x(endValueX).y(endValueY).
setDuration(duration).start();
Note: The calls can be chained because each callreturns the ViewPropertyAnimator of the View (except start())
8
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
3. ObjectAnimator: Basics
Class ObjectAnimator:• A very flexible way to animate View objects
> Factory methods: To create ObjectAnimator objects• Static methods of class ObjectAnimator • E.g. ObjectAnimator.ofFloat(myView,"x",500):
• Creates an animator for the object myView • that animates its x property• with target value 500
> Setter methods: To specify more details of the animation• E.g. setDuration(): Duration• E.g. setStartDelay(): Delay before start• E.g. setRepeatCount(): Number of repetitions
9
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
ObjectAnimator – Factory Methods• General form of a factory method:ObjectAnimator.ofTYPE(
ANIMATED_OBJECT,PROPERTY_NAME,VALUES)
• TYPE = Argb, Int, Float, MultiInt, MultiFloat, Object • MultiInt/MultiFloat = for setters with multiple parameters• Object = for setters with parameters of class Object
• VALUES: One or multiple values of type TYPE • if one value: end value• if multiple values: start value, (intermediate values, ) end value
• Special forms:• two PROPERTY_NAME parameters: especially x and y
• to animate the position of a View object
• Path object as VALUES parameter• to animate a movement along a geometric path
10
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
ObjectAnimator – Programming Steps
Step 1: Create an ObjectAnimator object• ObjectAnimator myAnimator
= ObjectAnimator.ofXXX(myAnimatedObject,"PropertyName",myAnimationValues);
Step 2: Specify more details of the animation• myAnimator.setDuration(...);myAnimator.setStartDelay(...);...
Step 3: Start the animation• myAnimator.start();
11
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
ObjectAnimator– Value Calculation and Timing Behaviour
Value calculation:• Default:
Linear interpolation between start / intermediate / end values• Alternative: Use a TypeEvaluator object
• to return any sequence of values
Timing behaviour:• Default: constant speed • Alternative: Use a TimeInterpolator object
• e.g. to speed up / slow down the animation
→ Details later
12
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
4. ObjectAnimator: Animation of multiple properties
Class AnimatorSetto combine multiple property animations • any type• any number
Methods e.g.:• playTogether(anim1,anim2,...) • playSequentially(anim1,anim2,...) • setDuration() • setStartDelay() • start()
13
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
ObjectAnimator Animation of multiple properties
Special case: Animation of the object position
> Factory method for two float propertiesObjectAnimator.ofFloat(
ANIMATED_OBJECT,"x","y",PATH)
Class Path: Two-dimensional geometric paths• Straight lines• Arcs• Rectangles• Circles• Ovals• Bezier curves: quadratic, cubic• Multi-segment paths with segments of the above types
14
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
5. ObjectAnimator: Timing control (1)
Specify the timing behaviour of the animation• Default: constant speed• Alternative: Use TimeInterpolator objects
• e.g. to accelerate, decelerate
→ ObjectAnimator method setInterpolator()
Classes implementing TimeInterpolator:• Predefined classes: this section• Self-defined classes: next section
15
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
TimeInterpolator – Predefined Classes
AccelerateInterpolator: Increase speed
DecelerateInterpolator: Decrease speed
AccelerateDecelerateInterpolator: Combination of both
OvershootInterpolator: Overshoot the target
AnticipateInterpolator: Retract from the start
AnticipateOvershootInterpolator: Combination of both
BounceInterpolator: Bounce at the target
CycleInterpolator: Repeat for a number of cycles
...
16
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
6. ObjectAnimator: Timing control (2)
Now: write your own time interpolators• i.e. classes implementing TimeInterpolator • with methodfloat getInterpolation(float tfReal) • Parameter tfReal: elapsed fraction of the animation time
• i.e.: 0 ≤ tfReal ≤ 1• e.g.: tfReal = 0.5 → half of the animation time is over
• Returns: tfVirt = virtual elapsed fraction of time• i.e. also: 0 ≤ tfVirt ≤ 1• if tfVirt > tfReal:
animation is faster than with constant speed
• if tfVirt < tfReal:animation is slower than with constant speed
• Explanation: see next foils
17
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Default case – No time interpolator
Steps without a time interpolator:
• evaluator method evaluate():• is called by the animator with parameter tfreal
• repeatedly with tfreal increasing from 0 to 1
• returns the property value to be used at time tfreal • default: evaluate() is a linear function of tfreal
→ animation at constant speed
animator animatedobject
setproperty
parameter
evaluator:evaluate(tfreal)
tfreal property value at time tfreal
tfreal: elapsed fractionof the animation time
18
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Value calculation without time interpolator
tfreal0.40.2 0.60.0 1.00.8
property value
property value at time 0.6evaluate(tfreal)
property value at time 1.0
property valueat time 0.4
linear animation= constant speed
19
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Application of a time interpolator
Steps with a time interpolator:
• Time interpolator between animator and evaluator• Method getInterpolation() maps tfreal to tfvirt
• evaluate() is now called at time tfreal with parameter tfvirt • if tfvirt > tfreal: animation is faster than normal • if tfvirt < tfreal: animation is slower than normal
animator animatedobjecttfreal
interpolator:getInter-
evaluator:evaluate(tfvirt)
polation(tfreal)
tfvirt
setproperty
property value: calculated by evaluate(tfvirt)but to be used at time tfreal!
20
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Time interpolator – Value calculation
tf0.60.0 1.0
evaluate()
0.00.20.40.60.81.0
0.00.10.3450.6550.91.0
tfreal tfvirt
AccelerateDecelerateInterpolator:
1.) Use getInterpolation()
0.655
getInterpolation() mapping
to map tfreal = 0.6 to tfvirt = 0.655
At time tfreal = 0.6 :
21
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Time interpolator – Value calculation
tf0.60.0 1.0
0.00.20.40.60.81.0
0.00.10.3450.6550.91.0
tfreal tfvirt
0.655
2.) Calculate evaluate(tfvirt=0.655)[at time tfreal=0.6 !]
22
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Time interpolator – Value calculation
tf0.40.2 0.60.0 1.00.8
0.00.20.40.60.81.0
0.00.10.3450.6550.91.0
tfreal tfvirtAccelerateDecelerateInterpolator:property values for the
23
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Time interpolator – Programming steps
Step 1: Implement the TimeInterpolator interface• class MyInterpolator
implements TimeInterpolator {public float getInterpolation(float tf_real) {... calculate tf_virt ...return tf_virt;
}}
• E.g. tf_virt = tf_real*tf_real*tf_real*tf_real; • to accelerate the animation speed
24
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Time interpolator – Programming steps
Step 2: Create an ObjectAnimator objectand set its time interpolator
• ObjectAnimator myObjAnim = ...;myObjAnim.setInterpolator(new MyInterpolator());
Step 3: Start the animation• myObjAnim.setDuration(...);myObjAnim.start();
25
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
7. ObjectAnimator: Property value calculation
Specify the sequence of property values during the animation
Remember previous section:evaluate() method to calculate property values
• evaluate() in the default case:linear interpolation between start and end value
Alternative: Use your own evaluator• I.e. write your own evaluate() method• Implement any formula for any property type
animator animatedobject
setproperty
evaluator:evaluate(tf)
property value at time tftf: elapsed fraction
of the animation time(either tfReal or tfVirt)
26
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Type evaluator – Programming steps
Step 1: Implement the TypeEvaluator interface• class MyEvaluator
implements TypeEvaluator<Type> {public Type evaluate(
float tf, Type startValue, Type endValue) {... calculate and return the property
value at time tf ... }}
• Note: TypeEvaluator is a generic interface• Type = class of the animated property• E.g. Float for the x position of a view • Can be any property type
27
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Type evaluator – Programming steps
Step 2: Create an ObjectAnimator objectand set its type evaluator
• ObjectAnimator myObjAnim = ...;myObjAnim.setEvaluator(new MyEvaluator());
Step 3: Start the animation• myObjAnim.setDuration(...);myObjAnim.start();
28
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
8. ValueAnimator
Value animator: to specify and control an animation
Generalization of an object animator• Class ValueAnimator: superclass of ObjectAnimator • Based on (like object animator)
• Type evaluator and• Time interpolator
• Additionally: Update listener • called for each animation step• explicitly assigns property values
and can perform other operations
29
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Value animator: Fundamental structure
onAnimationUpdate(): Callback method of update listener• Called by the runtime system for each animation step• Written by the programmer
• to assign the animation value to the object property• to perform other operations
→ Operations in each animation stepunder full program control
http://developer.android.com
30
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Value animator – Programming steps
Step 1: Implement the AnimatorUpdateListener interface• class MyAnimatorUpdateListener implements
ValueAnimator.AnimatorUpdateListener {public void onAnimationUpdate(
ValueAnimator animator) {propValue = animator.getAnimatedValue();myAnimatedView.setXXX(propValue);... additional operations ... }
} • Note: The update listener
• explicitly assigns the property value• may perform additional operations
• e.g. outputs on the display
31
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
Value animator – Programming steps
Step 2: Create a value animator and assign the update listener• ValueAnimator myValAnim = new ValueAnimator();myValAnim.addUpdateListener(
new MyAnimatorUpdateListener());
Step 3: Start the animation• myValAnim.setDuration(...);myValAnim.start();
32
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
9. XML-defined Animation
Animations can also be defined in XML• elements:
• <set> • i.e. animator set
• <objectAnimator> • <valueAnimator>
• attributes e.g.:• propertyName • duration • valueFrom • valueTo
33
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
XML-defined animation – Programming steps
Step 1: Write an XML file in res/animator • Example:<set ...
android:ordering="together"><objectAnimatorandroid:propertyName="x"android:duration="2000"android:valueTo="350"android:valueType="floatType"/>
<objectAnimatorandroid:propertyName="y"...>
...>
34
© C
. Vog
t, 20
19.
Prop
erty
Ani
mat
ion
Prof
. Dr.
Car
sten
Vog
t
TechnologyArts SciencesTH Köln
XML-defined animation – Programming steps
Step 2: Create an animator set from the XML file• AnimatorSet animSet = (AnimatorSet)
AnimatorInflater.loadAnimator(...,R.animator.myXmlFile);
Step 3: Connect the animator set with the animated view• animSet.setTarget(animatedView);
Step 4: Start the animation• animSet.start();