Lecture 3 Animation Graphics Topics Animation Graphics Drawing

Lecture 3: Animation & Graphics Topics: Animation, Graphics, Drawing

High Five! https: //youtu. be/u. Fpo. Xq 73 HHY

Concepts

What is Animation? • To create an illusion of motion or change. • By rapid succession of sequential, minimally different images. By Janke - Own work, CC BY-SA 2. 5 https: //commons. wikimedia. org/w/index. php? curid=433430

What is (Computer) Graphics? • To generate/Synthesize images using computers. • e. g. , pixel arts, sprites, vectors, 3 D • Tools/API: Open. GL, Vulkan, Direct 3 D A 2 D graphic (tree) is synthesized by using basic shapes (circles and a rectangle)

What is Computer Vision? • To understand images using computers. • e. g. , identifying objects in images • Tools/API: Open. CV, Open. VX An image is analyzed to detect and count cars using computer vision algorithms. https: //www. youtube. com/watch? v=x. Vwsr 9 p 3 ir. A

What is a GPU? • Specialized HW for graphics processing. • Large number of cores and threads. • Limited features (instruction types, OS interactions) ALU Control ALU ALU Cache RAM CPU RAM GPU

Android: Source and Resource • Source: e. g. . java • Resources: e. g. layout, string, bitmap, animation. • Benefits: multiple languages, multiple screens, easy to manage. Resource Source aapt tool R. java Packed Resources Compile classes. dex Libraries Can you guess how to implement animations in Android?

Android: What is a Drawable? • Drawable – Something that can be drawn. • It’s more than just an image/bitmap. • Drawable ≠ View (e. g. can’t receive events) Various Types of Drawables Bitmap 9 -Patch Shape State Transition Animation

Android Animation

Types of Animation 1. Drawable Animation 2. View Animation 3. Property Animation Hello World X(t)

1. Drawable Animation • We can load and display a series of Drawable resources (e. g. images) one after another.

2. Drawable Animation • Define animation-list in XML: res/drawable XML: <? xml version="1. 0" encoding="utf-8"? > <animation-list xmlns: android="http: //schemas. android. com/apk/res/android" android: oneshot=“false"> <item android: drawable="@drawable/pic 1" android: duration=“ 1000" /> <item android: drawable="@drawable/pic 2" android: duration=“ 1000" /> </animation-list> • Use Animation. Drawable inside your Java code to start the animation Java: some. Img. View. set. Background. Resource(R. drawable. abovexml); ((Animation. Drawable)some. Img. View. get. Background()). start();

We’ll try this today: • Get some images and put into: res/drawable/ • Create an XML file: res/drawable/my_anim_list • Add an Image. View and set Background • Use Animation. Drawable to start animation

2. View Animation • You can animate a View e. g. , by scaling, rotating, and translating an Image. View.

2. View Animation • Define the Animation in XML: res/anim XML: <? xml version="1. 0" encoding="utf-8"? > <rotate xmlns: android="http: //schemas. android. com/apk/res/android" android: from. Degrees="0" android: to. Degrees="360" android: to. YScale="0. 0" android: pivot. X="50%" android: pivot. Y="50%" android: start. Offset=“ 1000" android: duration="10000" /> • Use Animation to fetch it, then apply it to a View. Java: Animation x = Animation. Utils. load. Animation( get. Application. Context(), R. anim. abovexmlfile ); some. View. start. Animation(x);

3. Property Animation (Value) • Changing value of a variable over a period: Value. Animator anim = Value. Animator. of. Float(0 f, 40 f); anim. set. Duration(40); anim. start(); • Use set. Interpolator() to change behavior. Limitation?

3. Property Animation (Object) • Changing a property of an object. Hello World Object. Animator anim = Object. Animator. of. Float(my. Text. View, “text. Size”, 10 f, 30 f); anim. set. Duration(5000); anim. start(); Object Variable

Summary of Android Animation • List of XML tags and Java Classes: Animation Type XML Tag Java Class Drawable Animation animation-list Animation. Drawable View Animation Property Animation rotate translate scale set Value. Animator Object. Animator

Android Graphics

Graphics Approches • Canvas and Drawables • Open. GL (framework API and NDK) S 2 E 9

2 D Drawing 1. Drawable: • Put Drawables (in a View) • Less work, less control, less efficiency 2. Canvas: • Draw on the Canvas (of a View) • More work, more control, more efficiency

1. Using Drawables • Two ways of putting Drawables into a View Four Button. Views res/drawable/queen. png res/drawable/tfade. xml

1(a) Image from Project Resource • Copy images into res/drawable/ • Use it inside the layout xml <Image. View android: layout_width="match_parent" android: layout_height="wrap_content" android: id="@+id/img 1" android: src="@drawable/my_image"/> • You can also do the same by writing code: Image. View i = new Image. View(this); i. set. Image. Resource(R. drawable. my_image); Linear. Layout ll = new Linear. Layout(this); ll. add. View(i); set. Content. View(ll); //instead of set. Content. View(R. layout. somexmllayoutfile)

1(b) XML with drawable properties • e. g. Transition Drawable: res/drawable/something. xml <transition xmlns: android="http: //schemas. android. com/apk/res/android"> <item android: drawable="@drawable/image 1"> <item android: drawable="@drawable/image 2"> </transition> • Now, take an Image. View to show it (them): Transition. Drawable td; td = (Transition. Drawable) get. Resources(). get. Drawable(R. drawable. something); td. set. Cross. Fade. Enabled(true); Image. View img; img = (Image. View) find. View. By. Id(R. id. img 1); img. set. Image. Drawable(td); td. start. Transition(5000);

Nine Patch Image • Regular. png images + defining stretchable regions From a terminal: Run the draw 9 patch command from your SDK sdk/tools directory to launch the tool.

2. Using Canvas • Canvas holds all of your draw*() calls. • Drawing is performed upon an underlying Bitmap. draw. Rect() draw. Circle() … Canvas (logical) Bitmap (physical)

2. Using Canvas • Canvas holds all of your draw*() calls. • Drawing is performed upon an underlying Bitmap b = Bitmap. create. Bitmap(100, Bitmap. Config. ARGB_8888); Canvas c = new Canvas(b); Paint p = new Paint(); p. set. Color(Color. GREEN); c. draw. Rect(10, 90, p); • Two ways to use the Canvas of a View: • Custom View • Surface View

Custom View • Good for low frame-rate applications (e. g. chess or snake game). • You define a new View and add it in the layout XML file (like you do for a Text. View, Image. View etc. ) • Android provides you the Canvas as you extend a View and override its on. Draw() method. • To request a redraw, use: invalidate(). Outside main Activity’s thread, use post. Invalidate().

Custom View • Create your own View Class (Custom. View. java) public class Custom. View extends View { //Declare all four types of constructors here. @Override protected void on. Draw(Canvas canvas) { super. on. Draw(canvas); //Use canvas. draw*() } } • Use the View in the layout xml <edu. unc. nirjon. projectname. Custom. View android: id="@+id/mycustomview" android: layout_width="match_parent" android: layout_height="match_parent" /> • To force a redraw: invalidate()

Let’s try this: • Create 2 Buttons: Up and Down • Create a Custom View • Draw a circle at location (X, Y) • Every time the buttons are clicked, the point will move. (Hint: use invalidate() to force redraw).

References (study these) • http: //developer. android. com/guide/topics/graphics/overview. html • http: //developer. android. com/guide/topics/graphics/prop-animation. html • http: //developer. android. com/guide/topics/graphics/view-animation. html • http: //developer. android. com/guide/topics/graphics/drawable-animation. html • http: //developer. android. com/guide/topics/graphics/2 d-graphics. html • http: //www. vogella. com/tutorials/Android. Drawables/article. html