Android: Property Animation - th-koeln.de · The Android programmer must only provide fundamental values: • name of the property to be animated • start and end values • duration

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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



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



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


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


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


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


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


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


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


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


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


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


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


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


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();

Documents

Android: Property Animation - th-koeln.de · The Android programmer must only provide fundamental values: • name of the property to be animated • start and end values • duration