Animation

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

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

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

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="http://schemas.android.com/apk/res/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

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

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

Example: Tween Animation (continued) ©SoftMoore Consulting

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

Example: Scale Animation <?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/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

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

Example: Pulse Animation <?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/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

Example: Tumble Animation <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/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

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="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/asteroid01" android:duration="200" /> android:drawable="@drawable/asteroid02" ... </animation-list> ©SoftMoore Consulting

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

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

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

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

Tween Animation on the Asteroid Image In the layout file <ImageView android:id="@+id/asteroidImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center“ android:src="@drawable/asteroid01" /> ©SoftMoore Consulting

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

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

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

Relevant Links Animation and Graphics Overview Property Animation http://developer.android.com/guide/topics/graphics/overview.html Property Animation http://developer.android.com/guide/topics/graphics/prop-animation.html View Animation http://developer.android.com/guide/topics/graphics/view-animation.html Drawable Animation http://developer.android.com/guide/topics/graphics/drawable-animation.html Animation Resources http://developer.android.com/guide/topics/resources/animation-resource.html ©SoftMoore Consulting