Session-Animation and Graphics.pptx

7/30/2019 Session-Animation and Graphics.pptx

1/68

ANDROIDGRAPHICS AND

ANIMATIONFOR BEGINNERS

Mihir Gokani, Pushpak Burange


2/68

Session Outline

Drawing with Canvas 14:30

View Animation

Property AnimationBreak 15:15

Property Animation (Contd) 15:30

OpenGL ES


3/68

Mihir Gokani

Drawing with Canvas


4/68

Motivation

2D Drawing

Custom UI

Simple GamesAny 2D Graphics / Animation


5/68

How to Draw?

STEP 1: Referencing Canvas

Override onDraw() and get reference of

Canvas

class MyView extends View {@Override

void onDraw(Canvas canvas) {// Do something with canvas

}}

Snippet 1: Overriding onDraw()

32


6/68

How to Draw?

STEP 2: Draw

Option 1: Use various drawXXX()

methods of the Canvas

canvas.drawCircle(cx, cy, radius, paint);canvas.drawRect(left, top, right, bottom, paint);canvas.drawText(text, posx, posy, paint);

Snippet 2: Using Canvas.drawXXX() (CanvasDemo1)

31


7/68

How to Draw?

STEP 2: Draw

Option 2: Use draw() method of

a Drawable

myShapeDrawable.draw(canvas);

Snippet 3: Using Drawable.draw() (CanvasDemo3a,3b)

31


8/68

How to Draw?

STEP 3: Redraw!

Call invalidate() orpostInvalidate()

321

ShapeDrawable drawable =new ShapeDrawable(touchShape);

drawable.setBounds((int) e.getX() - 25,(int) e.getY() - 25,(int) e.getX() + 25,(int) e.getY() + 25);

drawables.add(drawable);invalidate();

Snippet 4: Invalidate example onTouch()

(CanvasDemo3c)


9/68

How to Draw?

STEP 3: Redraw!


Only a request

321

while (y < 500){drawBallAt(x, y);y++;invalidate();

}

Snippet 5: How NOT to draw


10/68

How to Draw?

STEP 3: Redraw!


Only a request

321

new Thread(new Runnable() {public void run() {

while (y < 500){drawBallAt(x, y);y++;postInvalidate();

}}

}

Snippet 6: How to draw (CanvasDemo4c)


11/68

Paint

Change Color

Change Style

For both Shapes and Text

setColor() // Color-> intsetFlags() // Dithering, Anti-aliassetTextSize() // floatsetTextAlign() // Alignenum

Snippet 7: Paint


12/68

Coordinate System

View


13/68

Coordinate System

(0, 0) X

Y

5 10

5


14/68

Coordinate System

(0, 0) X

Y

5 10

5


15/68

Coordinate System

(0, 0) X

Y

5 10

5

(9, 4)


16/68

Translating multiple objects

Coordinate System (Advanced)

(0, 0) X

Y

5 10

5

(9, 4)


17/68



(0, 0) X

Y

5 10

5

(9, 4)


18/68



(0, 0) X

Y

5 10

5

(9, 4)


19/68



(0, 0) X

Y

(0, 0) X

Y

5 10

5


20/68



(0, 0) X

Y

(0, 0) X

Y

5 10

5

(9, 4)


21/68



(0, 0) X

Y

(0, 0) X

Y

5 10

5

(9, 4)


22/68

Rotating multiple objects


(0, 0) X

Y

(0, 0) X

Y

5 10

5

(9, 4)


23/68



(0, 0) X

Y


24/68



X

Y


25/68

How to Draw? (Advanced)

Transforming multiple objects

canvas.save(); //


26/68

How to Draw? (Advanced)

Transforming multiple objects

canvas.save(); //


27/68

Pushpak Burange

View Animation


28/68

Animation is the rapid display of a

sequence of images to create an

illusion of movementExample of animations:

Games, Cartoons etc.

Used for animating algorithms,science experiments to help students

understand better

What is animation?


29/68

Various types of Animation

View Animation,

Property Animation,Canvas and Drawable Animation,

OpenGL

Well talk about View Animation

More on Animation


30/68

View Animation

Adding animation to Android Views

such as TextViews

Rotate Text, Translate Text, Changecolor etc.

After the basics, you are encouraged

to explore more


31/68

Getting Started

Animations on views are defined in

XMLs.

The animation XML file belongs inthe res/anim/ directory of your

Android project.


32/68

Animation Class

For performing animations on views,

we need an object ofAnimationclass

The animation information is storedinside theAnimationobject


33/68

Defining an Animation Object

Here, a is the object ofAnimation

class

R.anim.translateis the translate.xmlwhich specifies the translation to be

applied

Animation a = AnimationUtils.loadAnimation(this, R.anim.translate);

Snippet 1: Loading Animation


34/68

Animation on TextViews

Here, translateTextis a TextView

Calling this API will translate the

TextViewaccording to the XML

translateText.startAnimation(a);

Snippet 2: Starting Animation


35/68

Triggering Multiple animations

Set anAnimationListener

AnimationListenerhas three

methods:onAnimationStart()

onAnimationRepeat()

onAnimationEnd()


36/68

Triggering Multiple animations

It is possible to animate multiple

views one after the other on a single

clickTo animate recursively, call

startAnimation() inside

onAnimationEnd()


37/68

Summary

Creating XML

CreatingAnimation

object

Applyinganimation to

View


38/68

Mihir Gokani

Property Animation


39/68

View vs. Property Animation

View AnimationProperty

Animation

Specifically for views ANY object(including views +)

Only few properties Any property ++

Only drawingof views,Not the actual view

itself!

Any property ofview and

drawables

Less code to write More code to write#


40/68

Class Hierarchy

Animator+AnimationListener

ValueAnimator

+AnimationUpdateListener

ObjectAnimator

AnimatorSet


41/68

Animator

Duration and Start delay

Repeat count and Reverse behaviour

Time interpolation and Typeevaluation

Animation Listener

Since API 11 (Android 3.0)


42/68

Animator

Time interpolation and Type

evaluation


Wespecifystart /end

values,

duration

Animatorcomputes

values in [0,1] uniformlyover duration

(PROGRESS)

Animator usesTimeInterpolatorto tweak the

progress

(FRACTION)

Animator usesTypeEvaluator

to mapnormalizedfraction to

appropriateVALUE for givenstart / end values


43/68

Animator

Time Interpolators:

Bui l t - in:Linear, Accelerate, Decelerate,

Anticipate, Overshoot, Bounce, Cycle,

Custom


CurrentAnimationProgress

getInterpolation()

InterpolatedFRACTION

Float value between

0 (start of animation)

and

1.0 (end of

animation)

Can be less than 0

(for undershooting)

or can be more

than 1.0 (for

overshooting)


44/68

Animator

Type Evaluators:

Bui l t - in:Float, Int, Argb

Custom


InterpolatedFraction, Start value,

End valueevaluate()

AnimatedVALUE

: Float value (not

necessarily in [0, 1.0])

, : Values of type

T

A value of type

T interpolated

for0 and 1

Simple linear

interpolation

+ ( )


45/68

Animator

Elapsed

Time

(ms)

Current

Progress

for

1000ms

Linear

Interpltd

Fract ion

(f loat)

Compute

d Value

[100, 300]

0 0.0 0.0 100.0

200 0.2 0.2 140.0

400 0.4 0.4 180.0

600 0.6 0.6 220.0

800 0.8 0.8 260.0

1000 1.0 1.0 300.0


(INPUT)

Current

Progress

1.0

0

(OUTPUT)

Fraction / Value

1


46/68

Animator

Elapsed

Time

(ms)

Current

Progress

for

1000ms

Accel.-Decelerate

Interpltd

Fract ion

(f loat)

Compute

d Value

[100, 300]

0 0.0 0.0 100.0

200 0.2 0.1 120.0

400 0.4 0.345 169.0

600 0.6 0.8 260.0

800 0.8 0.9 280.0

1000 1.0 1.0 300.0


(INPUT)

Current

Progress

1.0

0

(OUTPUT)

Fraction / Value

1


47/68

Animator

Elapsed

Time

(ms)

Current

Progress

for

1000ms

Anticipate-

Overshoot

Interpltd

Fract ion

(f loat)

Compute

d Value

[100, 300]

0 0.0 0.0 100.0

200 0.2 -0.112 77.6

400 0.4 0.064 112.8

600 0.6 0.936 287.2

800 0.8 1.112 322.4

1000 1.0 1.0 300.0


(INPUT)

Current

Progress

1.0

0

(OUTPUT)

Fraction / Value

1


48/68

Animator

Demo

Linear

Accelerate-Decelerate

Anticipate-Overshoot


49/68

Animator

Animation Listeners

animation.addListener(new Animator.AnimatorListener() {

public void onAnimationStart(Animator a) {}public void onAnimationRepeat(Animator a) {}public void onAnimationCancel(Animator a) {}public void onAnimationEnd(Animator a) {}

});

Snippet 1



50/68

Value Animator

Working


Wespecifystart /end

values,duratio

n

Animatorcomputes

values in [0,1] uniformlyover duration(PROGRESS

)


progress(FRACTION)





51/68

Value Animator

Working


Wespecifystart /end

values,duratio

n

Animatorcomputes

values in [0,1] uniformlyover duration(PROGRESS

)


progress(FRACTION)





52/68

Value Animator

Working


Welisten to

theupdate

event

Wespecifystart /end

values,

duration

Animatorcomputes


(PROGRESS)

We get theanimatedVALUE

We then use it

in any way wewant


53/68

Value Animator

Working


Welisten to

theupdate

event

Wespecifystart /end

values,

duration

Animatorcomputes


(PROGRESS)

We get theanimatedVALUE

We then use it

in any way wewant


54/68

Value Animator

Animation Update Listener

animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {public void onAnimationUpdate(ValueAnimator a){

// do something when the value is updatedFloat value =

(Float) animation.getAnimatedValue();

// Use value e.g. for animation}

});

Snippet 2: Animation Update Listener

(AnimatorDemo1)



55/68

Object Animator

Example


MyObject o = new MyObject();// ...

// Later...// Assuming MyObject has defined properties// float getProp() and setProp(float)ObjectAnimator anim =

ObjectAnimator.ofFloat(o, prop", 0f, 250f);anim.setDuration(1000);anim.start();

Snippet 3: Object Animator


56/68

Keyframed Animation

Manual mapping between

animation progress and computed

value



57/68

Animator Set

Group any animators (play())

Specify timeline relations (before(),

after(), with())Start the animation (start())



58/68

Animator Set

Example


ObjectAnimator animX =ObjectAnimator.ofFloat(myView, "x", 50f);ObjectAnimator animY =

ObjectAnimator.ofFloat(myView, "y", 100f);

AnimatorSet animSetXY = new AnimatorSet();

animSetXY.playTogether(animX, animY);animSetXY.start();

Snippet 4: AnimatorSet


59/68

Animation in XML

Save in res/animator/ directory (vs.

res/anim/)

CorrespondenceValueAnimator

ObjectAnimator

AnimatorSet


60/68

Animation in XML

Snippet 5: Animator in XML

AnimatorSet set =(AnimatorSet)AnimatorInflater.loadAnimator(

myContext, R.anim.property_animator);set.setTarget(myView);

Snippet 6: Loading Animator


61/68

View Property Animator

While animating a view, if number of

aimated properties gets too large

Internally uses Animator

myView.animate().x(50f).y(100f);

Snippet 7: ViewPropertyAnimator (AnimatorDemo2)



62/68

Pushpak Burange

OpenGL ES


63/68

OpenGL ES

Knowledge of linear algebra and

matrix theory is useful

Uses3D Drawing

3D Games

Any 3D Graphics / AnimationLive Wallpaper (LWP)

O G S


64/68

OpenGL ES

3D Graphics

Creating a 3D scene

Play with camera

Projection views

Texture mapping

LightingShading

A S


65/68

A Scene

T t M i


66/68

Texture Mapping

Li hti


67/68

Lighting

Sh di


68/68

Shading

Session-Animation and Graphics.pptx

Documents

Transcript of Session-Animation and Graphics.pptx