1. Animation

2. Android Animation Two main types of animations
Tween Animation – creates an animation by performing a series of transformations (rotate, scale, etc.) on a single image.
Frame Animation – creates an animation by showing a sequence of images in order.
Note: Animation can be applied to any View object.
©SoftMoore Consulting

3. Tween Animation Four types of tween transformations:
alpha – translates the transparency of the view from 0.0 (transparent) to 1.0 (opaque)
rotate – spins the view clockwise or counterclockwise around a pivot point
scale – stretches the view vertically and horizontally from a pivot point
translate – moves the view from one position on the screen to another
©SoftMoore Consulting

4. Defining Tween Animations
Tween animations can be defined programmatically in the Java code or declaratively as XML resource files in the /res/anim folder.
Java classes (package android.view.animation)
AlphaAnimation – RotateAnimation
ScaleAnimation – TranslateAnimation
XML elements
<alpha> – <rotate>
<scale> – <translate>
It is also possible to define a “set” of transformations to be applied to a view; e.g., rotate and translate.
©SoftMoore Consulting

5. Example: Tween Animation
Copy image android.jpg to folder res/drawable.
Create file res/anim/rotate.xml.
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="3000" />
rotate clockwise 360o
around the center of the view
over a 3-second interval
©SoftMoore Consulting

6. Example: Tween Animation (continued)
Define a view within the layout file for the image.
...
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
/>
Note: No file extension.
©SoftMoore Consulting

7. Example: Tween Animation (continued)
Define Java code to start the rotation.
Button rotateButton = (Button)
findViewById(R.id.rotateButton);
rotateButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
Animation rotate =
AnimationUtils.loadAnimation(MainActivity.this,
R.anim.rotate);
imageView.startAnimation(rotate); }
});
©SoftMoore Consulting

8. Example: Tween Animation (continued)
©SoftMoore Consulting

9. Example: Alpha Animation
<?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android=" android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="3000" />
©SoftMoore Consulting

10. Example: Scale Animation
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android=" android:pivotX="50%" android:pivotY="50%" android:fromXScale="0.5" android:fromYScale="0.5" android:toXScale="1.5" android:toYScale="1.5" android:duration="3000" />
©SoftMoore Consulting

11. Example: Translate Animation
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android=" android:fromXDelta="-200" android:toXDelta="200" android:duration="3000" />
©SoftMoore Consulting

12. Example: Pulse Animation
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android=" android:pivotX="50%" android:pivotY="50%" android:fromXScale="0.75" android:fromYScale="0.75" android:toXScale="1.25" android:toYScale="1.25" android:duration="1000" android:repeatCount="4" />
©SoftMoore Consulting

13. Example: Tumble Animation
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android=" <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="3000" /> <translate android:fromXDelta="-200" android:toXDelta="200" </set>
Note: Order of animations
within the set is important.
Changing the order can
change the appearance of
the animation.
©SoftMoore Consulting

14. Example: Frame Animation
Copy images asteroid01.png, asteroid02.png, …, asteroid12.png to folder res/drawable.
Create file res/drawable/astroid_animation.xml.
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="
<item
android:duration="200" />
...
</animation-list>
©SoftMoore Consulting

15. Example: Frame Animation (continued)
Define a view within the layout file for the image.
...
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
©SoftMoore Consulting

16. Example: Frame Animation (continued)
Define Java code to start the rotation.
AnimationDrawable asteroidAnimation;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView asteroidView =
(ImageView) findViewById(R.id.asteroidImage);
asteroidView.setBackgroundResource
(R.drawable.asteroid_animation);
asteroidAnimation = (AnimationDrawable)
asteroidView.getBackground(); }
©SoftMoore Consulting

17. Example: Frame Animation (continued)
Define Java code to start the rotation (continued).
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN)
asteroidAnimation.start();
return true; }
return super.onTouchEvent(event);
©SoftMoore Consulting

18. Example: Frame Animation (continued)
Imagine the
asteroid rotating
in place.
©SoftMoore Consulting

19. Tween Animation on the Asteroid Image
In the layout file
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center“
/>
©SoftMoore Consulting

20. Tween Animation on the Asteroid Image (continued)
In resource file anim/fall.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="
android:shareInterpolator="false">
<rotate
android:fromDegrees="0"
android:toDegrees="720"
android:pivotX="50%"
android:pivotY="50%"
android:duration="3000" />
<translate
android:fromXDelta="-250"
android:fromYDelta="-30"
android:toXDelta="260"
android:toYDelta="700"
</set>
©SoftMoore Consulting

21. Tween Animation on the Asteroid Image (continued)
In the Java source code
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN)
Animation fall
= AnimationUtils.loadAnimation(AnimationDemo.this,
R.anim.fall);
asteroidView.startAnimation(fall);
return true; }
return super.onTouchEvent(event);
©SoftMoore Consulting

22. Tween Animation on the Asteroid Image (continued)
Imagine the
asteroid rotating
as it falls from
left to right across
the screen.
©SoftMoore Consulting

23. Relevant Links Animation and Graphics Overview Property Animation
Property Animation
View Animation
Drawable Animation
Animation Resources
©SoftMoore Consulting