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

Your imageview has to have a source defined in either the xml or your activity.

xml:

<ImageView android:id="@+id/ImageView01" 
   android:src="@drawable/someimage" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content">
</ImageView>

activity:

ImageView image = (ImageView) findViewById(R.id.ImageView01);
image.setImageResource(R.drawable.some_image);

Answer 2

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 :)

Answer 3

I Guess ViewFlipper is required. Because when u want to animation between animation you required ViewFlipper for doing animation.

do following things. I guess solve problem.

Create New XML file and add ViewFlipper tab in it...

use include tab to include all other layout when you want to do animation.

and than use the following code

flipper = (ViewFlipper) findViewById(R.id.flipper);

Button button1 = (Button) findViewById(R.id.Button01); // Button in one activity

Button button2 = (Button) findViewById(R.id.Button02); // Button in second activity

// Other Methods

private Animation inFromRightAnimation() {

        // Animation inFromRight = new TranslateAnimation(
        /*
         * Animation inFromRight = new ScaleAnimation(
         * Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT,
         * 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
         * Animation.RELATIVE_TO_PARENT, 0.0f);
         */
        Animation inFromRight = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, -1.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);

        inFromRight.setDuration(500);
        inFromRight.setInterpolator(new AccelerateInterpolator());
        return inFromRight;
    }

    private Animation outToLeftAnimation() {
        // Animation outtoLeft = new TranslateAnimation(
        /*
         * Animation outtoLeft = new
         * ScaleAnimation(Animation.RELATIVE_TO_PARENT, 0.0f,
         * Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT,
         * 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
         */
        Animation outtoLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, -1.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
        outtoLeft.setDuration(500);
        outtoLeft.setInterpolator(new AccelerateInterpolator());
        return outtoLeft;
    }

    private Animation inFromLeftAnimation() {
        // Animation inFromLeft = new TranslateAnimation(
        /*
         * Animation inFromLeft = new
         * ScaleAnimation(Animation.RELATIVE_TO_PARENT, 0.0f,
         * Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT,
         * 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
         */
        Animation inFromLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, -1.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
        inFromLeft.setDuration(500);
        inFromLeft.setInterpolator(new AccelerateInterpolator());
        return inFromLeft;
    }

    private Animation outToRightAnimation() {
        // Animation outtoRight = new TranslateAnimation(
        /*
         * Animation outtoRight = new
         * ScaleAnimation(Animation.RELATIVE_TO_PARENT, 0.0f,
         * Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT,
         * 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
         */
        Animation outtoRight = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, -1.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
        outtoRight.setDuration(500);
        outtoRight.setInterpolator(new AccelerateInterpolator());
        return outtoRight;
    }

Answer 4

package com.example;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ViewFlipper;

 public class TeeenAni extends Activity {

ViewFlipper flipper;
@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.);
    image.startAnimation(hyperspaceJump);
   flipper = (ViewFlipper) findViewById(R.anim.hyperspace_jump);

    Button button1 = (Button) findViewById(R.id.Button01); 

    Button button2 = (Button) findViewById(R.id.Button02);
}
    private Animation inFromRightAnimation() {


        Animation inFromRight = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, -1.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);

        inFromRight.setDuration(500);
        inFromRight.setInterpolator(new AccelerateInterpolator());
        return inFromRight;
    }

    private Animation outToLeftAnimation() {

        Animation outtoLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, -1.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
        outtoLeft.setDuration(500);
        outtoLeft.setInterpolator(new AccelerateInterpolator());
        return outtoLeft;
    }

    private Animation inFromLeftAnimation() {

        Animation inFromLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, -1.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
        inFromLeft.setDuration(500);
        inFromLeft.setInterpolator(new AccelerateInterpolator());
        return inFromLeft;
    }

    private Animation outToRightAnimation() {

        Animation outtoRight = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, -1.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
        outtoRight.setDuration(500);
        outtoRight.setInterpolator(new AccelerateInterpolator());
        return outtoRight;
    }

[R.anim.hyperspace_jump][1] }

<?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>

<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent" 
android:layout_height="fill_parent"/>

 <Button android:id="@+id/Button01" 
 android:layout_height="wrap_content" 
 android:layout_width="wrap_content" 
 android:text="Home"></Button>
<Button android:id="@+id/Button02" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:text="Gallary"></Button>