Complex View Animation
deepak - Sun Oct 28 2012 10:01:31 GMT-0400 (EDT)
Problem Statement
Need to make an animation where letters
move together to form a word. Animation
needed is a slide right and left animation.
deepak - Sun Oct 28 2012 10:21:57 GMT-0400 (EDT)
Here is what i need to achieve
deepak - Sun Nov 04 2012 18:56:41 GMT-0500 (EST)
Steps To Achieve this
1) Create a Relative layout and add all the images
which represent the Alphabets in the initial
Reverse order.
2) Final step is to move the images in the first place
to the last place, second place to the second last
place and do the same thing with all the other
images.
3) Note that the animation needs to happen together
for all images.
deepak - Sun Nov 04 2012 19:10:28 GMT-0500 (EST)
Challenges
To execute step 2 we need to know the position
of the images placed on the screen. The challenge
i faced was that on the oncreate method of the
activity, the view is not yet painted. Because
of this i have to let the oncreate method complete
the view creation. I have to use a Handler to trigger
the animation separately.
deepak - Sun Nov 04 2012 19:41:28 GMT-0500 (EST)
Here is the Sample Code
package com.scramble.anim;
import android.app.Activity;
import android.graphics.Rect;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class ScrambleAnimationActivity extends Activity {
private int spot1XLoc = 0;
private int spot1YLoc = 0;
private int spot2XLoc = 0;
private int spot2YLoc = 0;
private int spot3XLoc = 0;
private int spot3YLoc = 0;
private int spot4XLoc = 0;
private int spot4YLoc = 0;
private int spot5XLoc = 0;
private int spot5YLoc = 0;
private int spot6XLoc = 0;
private int spot6YLoc = 0;
private int spot7XLoc = 0;
private int spot7YLoc = 0;
private int spot8XLoc = 0;
private int spot8YLoc = 0;
private int spot9XLoc = 0;
private int spot9YLoc = 0;
private int spot10XLoc = 0;
private int spot10YLoc = 0;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
//display each item in a single line
applyTransformtion();
}
};
@Override
protected void onStart() {
super.onStart();
// create a new thread
Thread background=new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(1000);
handler.sendMessage(handler.obtainMessage());
} catch (Exception e) {
Log.v("Error", e.toString());
}
}
});
background.start();
}
public void getLocationOfAllSpots()
{
ImageView img1 =
(ImageView) this.findViewById(R.id.image1);
int[] values= new int[2];
img1.getLocationOnScreen(values);
spot1XLoc = values[0];
spot1YLoc = values[1] ;
ImageView img2 = (ImageView)
this.findViewById(R.id.image2);
img2.getLocationOnScreen(values);
spot2XLoc = values[0];
spot2YLoc = values[1] ;
ImageView img3 = (ImageView)
this.findViewById(R.id.image3);
img3.getLocationOnScreen(values);
spot3XLoc = values[0];
spot3YLoc = values[1] ;
ImageView img4 = (ImageView)
this.findViewById(R.id.image4);
img4.getLocationOnScreen(values);
spot4XLoc = values[0];
spot4YLoc = values[1] ;
ImageView img5 = (ImageView)
this.findViewById(R.id.image5);
img5.getLocationOnScreen(values);
spot5XLoc = values[0];
spot5YLoc = values[1] ;
ImageView img6 = (ImageView)
this.findViewById(R.id.image6);
img6.getLocationOnScreen(values);
spot6XLoc = values[0];
spot6YLoc = values[1] ;
ImageView img7 = (ImageView)
this.findViewById(R.id.image7);
img7.getLocationOnScreen(values);
spot7XLoc = values[0];
spot7YLoc = values[1] ;
ImageView img8 = (ImageView)
this.findViewById(R.id.image8);
img8.getLocationOnScreen(values);
spot8XLoc = values[0];
spot8YLoc = values[1] ;
ImageView img9 = (ImageView)
this.findViewById(R.id.image9);
img9.getLocationOnScreen(values);
spot9XLoc = values[0];
spot9YLoc = values[1] ;
ImageView img10 = (ImageView)
this.findViewById(R.id.image10);
img10.getLocationOnScreen(values);
spot10XLoc = values[0];
spot10YLoc = values[1] ;
}
public void applyTransformtion()
{
getLocationOfAllSpots();
ImageView img1 =
(ImageView) this.findViewById(R.id.image1);
ImageView img2 =
(ImageView) this.findViewById(R.id.image2);
ImageView img3 =
(ImageView) this.findViewById(R.id.image3);
ImageView img4 =
(ImageView) this.findViewById(R.id.image4);
ImageView img5 =
(ImageView) this.findViewById(R.id.image5);
ImageView img6 =
(ImageView) this.findViewById(R.id.image6);
ImageView img7 =
(ImageView) this.findViewById(R.id.image7);
ImageView img8 =
(ImageView) this.findViewById(R.id.image8);
ImageView img9 =
(ImageView) this.findViewById(R.id.image9);
ImageView img10 =
(ImageView) this.findViewById(R.id.image10);
startAnimation(img1, spot10XLoc-spot1XLoc,1);
startAnimation(img10, -(spot10XLoc-spot1XLoc),2);
startAnimation(img2, spot9XLoc - spot2XLoc+2,3);
startAnimation(img9, -(spot9XLoc - spot2XLoc),4);
startAnimation(img3, spot8XLoc - spot3XLoc+5,5);
startAnimation(img8, -(spot8XLoc - spot3XLoc),6);
startAnimation(img4, spot7XLoc - spot4XLoc-10,7);
startAnimation(img7, -(spot7XLoc - spot4XLoc),8);
startAnimation(img5, spot6XLoc - spot5XLoc-10,9);
startAnimation(img6, -(spot6XLoc - spot5XLoc)-15,10);
}
public void startAnimation
(ImageView img,int XDelta,int flag)
{
TranslateAnimation a =
new TranslateAnimation(
0,XDelta,0,0);
a.setDuration(1000);
a.setFillAfter(true);
img.startAnimation(a);
}
}
deepak - Sun Nov 04 2012 19:43:16 GMT-0500 (EST)
Here is the Handler code from The full codeset
Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
//display each item in a single line
applyTransformtion();
}
};
@Override
protected void onStart() {
super.onStart();
// create a new thread
Thread background=new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(1000);
handler.sendMessage(handler.obtainMessage());
} catch (Exception e) {
Log.v("Error", e.toString());
}
}
});
background.start();
}