Lecture 3: Animation & Graphics
Topics: Animation, Graphics, Drawing
High Five!
[Link]
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
[Link]
What is (Computer) Graphics?
• To generate/Synthesize images using computers.
• e.g., pixel arts, sprites, vectors, 3D
• Tools/API: OpenGL, Vulkan, Direct3D
A 2D 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: OpenCV, OpenVX
An image is analyzed to detect
and count cars using computer
vision algorithms.
[Link]
What is a GPU?
• Specialized HW for graphics processing.
• Large number of cores and threads.
• Limited features (instruction types, OS interactions)
ALU ALU
Control ALU Control ALU
ALU ALU
Cache Cache
Cache
RAM RAM
CPU GPU
Android: Source and Resource
• Source: e.g. .java
• Resources: e.g. layout, string, bitmap, animation.
• Benefits: multiple languages, multiple screens, easy to manage.
aapt Packed
Resource [Link]
tool Resources
Source Compile [Link]
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 Shape
9-Patch 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="[Link]
android:oneshot=“false">
<item android:drawable="@drawable/pic1" android:duration=“1000" />
<item android:drawable="@drawable/pic2" android:duration=“1000" />
<item android:drawable="@drawable/pic1" android:duration=“1000" />
<item android:drawable="@drawable/pic2" android:duration=“1000" />
</animation-list>
• Use AnimationDrawable inside your Java code to
start the animation
Java:
[Link]([Link]);
((AnimationDrawable)[Link]()).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 ImageView and set Background
• Use AnimationDrawable to start animation
2. View Animation
• You can animate a View e.g., by scaling, rotating,
and translating an ImageView.
2. View Animation
• Define the Animation in XML: res/anim
XML:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="[Link]
android:fromDegrees="0"
android:toDegrees="360"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset=“1000"
android:duration="10000"
/>
• Use Animation to fetch it, then apply it to a View.
Java:
Animation x = [Link](
getApplicationContext(), [Link] );
[Link](x);
3. Property Animation (Value)
• Changing value of a variable over a period:
ValueAnimator anim = [Link](0f, 40f);
[Link](40);
[Link]();
• Use setInterpolator() to change behavior.
Limitation?
3. Property Animation (Object)
• Changing a property of an object.
Hello World Hello World Hello World
ObjectAnimator anim =
[Link](myTextView, “textSize”, 10f, 30f);
[Link](5000);
[Link]();
Object Variable
Summary of Android Animation
• List of XML tags and Java Classes:
Animation Type XML Tag Java Class
Drawable Animation animation-list AnimationDrawable
View Animation rotate Animation
translate
scale
set
Property Animation ValueAnimator
ObjectAnimator
Android Graphics
Graphics Approches
• Canvas and Drawables
• OpenGL (framework API and NDK)
S2E9
2D 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
ButtonViews
res/drawable/[Link]
res/drawable/[Link]
1(a) Image from Project Resource
• Copy images into res/drawable/
• Use it inside the layout xml
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/img1"
android:src="@drawable/my_image"/>
• You can also do the same by writing code:
ImageView i = new ImageView(this);
[Link]([Link].my_image);
LinearLayout ll = new LinearLayout(this);
[Link](i);
setContentView(ll); //instead of setContentView([Link])
1(b) XML with drawable properties
• e.g. Transition Drawable: res/drawable/[Link]
<transition xmlns:android="[Link]
<item android:drawable="@drawable/image1">
<item android:drawable="@drawable/image2">
</transition>
• Now, take an ImageView to show it (them):
TransitionDrawable td;
td = (TransitionDrawable)
getResources().getDrawable([Link]);
[Link](true);
ImageView img;
img = (ImageView) findViewById([Link].img1);
[Link](td);
[Link](5000);
Nine Patch Image
• Regular .png images + defining stretchable regions
From a terminal:
Run the draw9patch 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.
drawRect()
drawRect()
drawCircle()
…
Canvas (logical) Bitmap (physical)
2. Using Canvas
• Canvas holds all of your draw*() calls.
• Drawing is performed upon an underlying Bitmap.
Bitmap b = [Link](100, 100,
[Link].ARGB_8888);
Canvas c = new Canvas(b);
Paint p = new Paint();
[Link]([Link]);
[Link](10, 10, 90, 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 TextView, ImageView etc.)
• Android provides you the Canvas as you extend a
View and override its onDraw() method.
• To request a redraw, use: invalidate(). Outside main
Activity’s thread, use postInvalidate().
Custom View
• Create your own View Class ([Link])
public class CustomView extends View {
//Declare all four types of constructors here.
@Override
protected void onDraw(Canvas canvas) {
[Link](canvas);
//Use [Link]*()
}
}
• Use the View in the layout xml
<[Link]
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)
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
