Simple tween animation example

Question

I'm trying to implement the "hyperspace" tween animation described at http://developer.android.com/guide/topics/resources/animation-resource.html ("Animation Resources") - however it does not seem to work as written. When I run the application, I just get a blank view below the application title bar. What am I doing wrong?

Per the example, here is my code. I've created res/anim/hyperspace_jump.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0" 
        android:toXScale="1.4" 
        android:fromYScale="1.0" 
        android:toYScale="0.6" 
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set
        android:interpolator="@android:anim/accelerate_interpolator"
        android:startOffset="700">
        <scale
            android:fromXScale="1.4" 
            android:toXScale="0.0"
            android:fromYScale="0.6"
            android:toYScale="0.0" 
            android:pivotX="50%" 
            android:pivotY="50%" 
            android:duration="400" />
        <rotate
            android:fromDegrees="0" 
            android:toDegrees="-45"
            android:toYScale="0.0" 
            android:pivotX="50%" 
            android:pivotY="50%"
            android:duration="400" />
    </set>
</set>

I've also created a layout/main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
<ImageView android:id="@+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>

</LinearLayout>

Finally I have an activity:

package com.tomoreilly.geology;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView image = (ImageView) findViewById(R.id.ImageView01);
        Animation hyperspaceJump = 
            AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
        image.startAnimation(hyperspaceJump);
    }
}

Yet I do not see any animation when I run the app. Am I missing some detail that is not covered in the "Animation Resources" example?

Thanks, Tom

Answer 1

To add a different answer, you could also try the Universal Tween Engine to animate your android UIs. Indeed, your animation, which requires quite a few lines in its XML format, would be described like this:

Timeline.createSequence()
    // First, set your pivot (Tween.set() works instantly)
    .push(Tween.set(image, ViewAccessor.PIVOT_XY).target(0.5f, 0.5f))

    // Then, animate your scale and rotation as you want
    .push(Tween.to(image, ViewAccessor.SCALE_XY, 0.7f).target(1.4f, 0.6f))
    .beginParallel()
        .push(Tween.to(image, ViewAccessor.SCALE_XY, 0.4f).target(0, 0))
        .push(Tween.to(image, ViewAccessor.ROTATION, 0.4f).target(-45))
    .end()

    // Finally, start the animation!
    .start();

It may be more readable when you have a big set of actions to sequence. The engine is heavily optimized for android, and especially for games, and doesn't allocate anything, to provide the best performance.

It is completely open-source, heavily documented, and released with an Apache-2 license.

You can give the Android demo a try if you want :)