Animation 2
satya - Wednesday, November 19, 2008 9:26:30 AM
A container for a list view: example
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="@android:id/list"
android:persistentDrawingCache="animation|scrolling"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layoutAnimation="@anim/layout_bottom_to_top_slide" />
<ImageView
android:id="@+id/picture"
android:scaleType="fitCenter"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="gone" />
</FrameLayout>
satya - Wednesday, November 19, 2008 9:27:00 AM
What is android FrameLayout and how is it used?
What is android FrameLayout and how is it used?
satya - Wednesday, November 19, 2008 9:27:46 AM
You can take this layout file and set it as the view for any activity.
It doesn't have to be a list actiity. we will see it later
satya - Wednesday, November 19, 2008 9:35:58 AM
You will need a layout for each list item
But there are some defaults laid out in android.R
satya - Wednesday, November 19, 2008 9:37:59 AM
These are
simple_list_item_1
simple_list_item_2
simple_list_item_checked
simple_list_item_multiple_choice
simple_list_item_single_choice
More of these are at http://code.google.com/android/reference/android/R.layout.html
satya - Wednesday, November 19, 2008 9:44:46 AM
A listview also needs a list of items to display
private static final
String[] PHOTOS_NAMES = new String[] {
"Lyon",
"Livermore",
"Tahoe Pier",
"Lake Tahoe",
"Grand Canyon",
"Bodie"
};
satya - Wednesday, November 19, 2008 9:49:20 AM
A listview works with an adapter to display list items
//Set the activity layout first
setContentView(R.layout.animations_main_screen);
//get the list view
mPhotoListView = (ListView) findViewById(android.R.id.list);
//get an adapter
ArrayAdapter<String> adapter =
new ArrayAdapter<String>(this
,android.R.layout.simple_list_item_1
,PHOTOS_NAMES);
//Notice how it uses a predefined view
//for the list item
//Attach the adapter to the list
mPhotosListView.setAdapter(adapter);
satya - Wednesday, November 19, 2008 11:17:25 AM
You will have to implement OnItemClickListener
satya - Wednesday, November 19, 2008 11:21:26 AM
You will have to implement one method
public void onItemClick(AdapterView parent
, View v
, int position
, long id)
{
// Pre-load the image then start the animation
mImageView.setImageResource(PHOTOS_RESOURCES[position]);
applyRotation(position, 0, 90);
}
position: The position of the view in the adapter
id: The row id of the item that was clicked
satya - Wednesday, November 19, 2008 11:21:53 AM
How is postion different from id in onItemClick Method?
How is postion different from id in onItemClick Method?
Search for: How is postion different from id in onItemClick Method?
satya - Wednesday, November 19, 2008 11:27:11 AM
Here is how you hook up the listener
mPhotosListView.setOnItemClickListener(this);
Where "this" should point to a class that implements the AdapterView.OnItemClickListener interface
satya - Wednesday, November 19, 2008 11:29:46 AM
Here is the story on FrameLayout
satya - Wednesday, November 19, 2008 11:30:31 AM
To quote
FrameLayout is designed to block out an area on the screen to display a single item. You can add multiple children to a FrameLayout, but all children are pegged to the top left of the screen. Children are drawn in a stack, with the most recently added child on top. The size of the frame layout is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits). Views that are GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true.
satya - Thursday, November 20, 2008 10:39:29 AM
Lets see how we can rotate view in 3D
private void applyRotation(int position, float start, float end)
{
// Find the center of the container
final float centerX = mContainer.getWidth() / 2.0f;
final float centerY = mContainer.getHeight() / 2.0f;
// Create a new 3D rotation with the supplied parameter
// The animation listener is used to trigger the next animation
final Rotate3dAnimation rotation =
new Rotate3dAnimation(start, end, centerX,
centerY, 310.0f, true);
rotation.setDuration(500);
rotation.setFillAfter(true);
rotation.setInterpolator(new AccelerateInterpolator());
rotation.setAnimationListener(new DisplayNextView(position));
mContainer.startAnimation(rotation);
}
satya - Thursday, November 20, 2008 10:58:56 AM
whats up with android.graphics.Camera
whats up with android.graphics.Camera
satya - Thursday, November 20, 2008 11:04:22 AM
what are yaw, roll, and pitch in animation?
what are yaw, roll, and pitch in animation?
satya - Thursday, November 20, 2008 11:22:34 AM
graphics matrix translation
graphics matrix translation
satya - Thursday, November 20, 2008 12:12:35 PM
Read this discussion on rotation
satya - Friday, November 21, 2008 9:03:15 AM
How to create your own animator class deriving from animation
public class Rotate3dAnimation extends Animation
{
public Rotate3dAnimation(....){}
@Override
public void initialize(int width, int height,
int parentWidth, int parentHeight)
{
super.initialize(width, height, parentWidth, parentHeight);
....your stuff
}
@Override
protected void applyTransformation(float interpolatedTime
,Transformation t)
{
}
protected void applyTransformationNew(float interpolatedTime
,Transformation t)
{
final Matrix matrix = t.getMatrix();
//Change this matrix in some manner
}
}
satya - Friday, November 21, 2008 9:05:16 AM
You can apply an animation like this on any view
view.startAnimation(YourAnimationObject)
satya - Friday, November 21, 2008 9:46:00 AM
Lets see how the built in TranslateAnimation is coded up
public class TranslateAnimation extends Animation {
private int mFromXType = ABSOLUTE;
private int mToXType = ABSOLUTE;
private int mFromYType = ABSOLUTE;
private int mToYType = ABSOLUTE;
private float mFromXValue = 0.0f;
private float mToXValue = 0.0f;
private float mFromYValue = 0.0f;
private float mToYValue = 0.0f;
private float mFromXDelta;
private float mToXDelta;
private float mFromYDelta;
private float mToYDelta;
public TranslateAnimation(float fromXDelta, float toXDelta,
float fromYDelta, float toYDelta) {
mFromXValue = fromXDelta;
mToXValue = toXDelta;
mFromYValue = fromYDelta;
mToYValue = toYDelta;
mFromXType = ABSOLUTE;
mToXType = ABSOLUTE;
mFromYType = ABSOLUTE;
mToYType = ABSOLUTE;
}
*/
public TranslateAnimation(int fromXType, float fromXValue,
int toXType, float toXValue,
int fromYType, float fromYValue, int toYType, float toYValue)
{
mFromXValue = fromXValue;
mToXValue = toXValue;
mFromYValue = fromYValue;
mToYValue = toYValue;
mFromXType = fromXType;
mToXType = toXType;
mFromYType = fromYType;
mToYType = toYType;
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t)
{
float dx = mFromXDelta;
float dy = mFromYDelta;
if (mFromXDelta != mToXDelta) {
dx = mFromXDelta + ((mToXDelta - mFromXDelta) * interpolatedTime);
}
if (mFromYDelta != mToYDelta) {
dy = mFromYDelta + ((mToYDelta - mFromYDelta) * interpolatedTime);
}
t.getMatrix().setTranslate(dx, dy);
}
@Override
public void initialize(int width, int height, int parentWidth, int parentHeight)
{
super.initialize(width, height, parentWidth, parentHeight);
mFromXDelta = resolveSize(mFromXType, mFromXValue, width, parentWidth);
mToXDelta = resolveSize(mToXType, mToXValue, width, parentWidth);
mFromYDelta = resolveSize(mFromYType, mFromYValue, height, parentHeight);
mToYDelta = resolveSize(mToYType, mToYValue, height, parentHeight);
}
}
satya - Friday, November 21, 2008 3:48:57 PM
How do you use that animation Rotation3dAnimation
private void applyRotation(int position, float start, float end) {
// Find the center of the container
final float centerX = mContainer.getWidth() / 2.0f;
final float centerY = mContainer.getHeight() / 2.0f;
// Create a new 3D rotation with the supplied parameter
// The animation listener is used to trigger the next animation
final Rotate3dAnimation rotation =
new Rotate3dAnimation(start, end, centerX, centerY, 310.0f, true);
rotation.setDuration(500);
rotation.setFillAfter(true);
rotation.setInterpolator(new AccelerateInterpolator());
rotation.setAnimationListener(new DisplayNextView(position));
mContainer.startAnimation(rotation);
}
satya - Friday, November 21, 2008 3:50:41 PM
where ..
where "mContainer" is the view group pointing to a FrameLayout
You start the animation with startAnimation and then you register a callback when the animation finishes.
satya - Friday, November 21, 2008 3:58:19 PM
How to write the callback
private final class DisplayNextView
implements Animation.AnimationListener
{
private final int mPosition;
private DisplayNextView(int position) {
mPosition = position;
}
public void onAnimationStart(Animation animation) {}
public void onAnimationEnd(Animation animation)
{
mContainer.post(new SwapViews(mPosition));
}
public void onAnimationRepeat(Animation animation) {
}
}
satya - Friday, November 21, 2008 4:11:31 PM
Implementing SwapViews
private final class SwapViews implements Runnable {
private final int mPosition;
public SwapViews(int position) {
mPosition = position;
}
public void run() {
final float centerX = mContainer.getWidth() / 2.0f;
final float centerY = mContainer.getHeight() / 2.0f;
Rotate3dAnimation rotation;
if (mPosition > -1) {
mPhotosList.setVisibility(View.GONE);
mImageView.setVisibility(View.VISIBLE);
mImageView.requestFocus();
rotation =
new Rotate3dAnimation(90, 180, centerX, centerY,
310.0f, false);
} else {
mImageView.setVisibility(View.GONE);
mPhotosList.setVisibility(View.VISIBLE);
mPhotosList.requestFocus();
rotation = new Rotate3dAnimation(90, 0, centerX,
centerY, 310.0f, false);
}
rotation.setDuration(500);
rotation.setFillAfter(true);
rotation.setInterpolator(new DecelerateInterpolator());
mContainer.startAnimation(rotation);
}
}
satya - Friday, November 21, 2008 4:12:12 PM
android post runnable
android post runnable
satya - Friday, November 21, 2008 4:16:24 PM
post runs the action on the UI theread
post runs the action on the UI theread
satya - Friday, November 21, 2008 4:19:55 PM
Lets now look at the implementation of the 3d rotation
protected void applyTransformationOld(float interpolatedTime,
Transformation t)
{
final float fromDegrees = mFromDegrees;
float degrees = fromDegrees +
((mToDegrees - fromDegrees) * interpolatedTime);
final float centerX = mCenterX;
final float centerY = mCenterY;
final Camera camera = mCamera;
final Matrix matrix = t.getMatrix();
camera.save();
if (mReverse) {
camera.translate(0.0f, 0.0f,
mDepthZ * interpolatedTime);
} else {
camera.translate(0.0f, 0.0f,
mDepthZ * (1.0f - interpolatedTime));
}
camera.rotateY(degrees);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
satya - Friday, November 21, 2008 4:20:50 PM
Important Classes
Camera
Matrix
Animation
and its derived classes
satya - Friday, November 21, 2008 4:21:46 PM
Setting up an image view
// Prepare the ImageView
mImageView.setClickable(true);
mImageView.setFocusable(true);
mImageView.setOnClickListener(this);
satya - Friday, November 21, 2008 4:22:29 PM
what is this?
mContainer.
setPersistentDrawingCache(
ViewGroup.PERSISTENT_ANIMATION_CACHE);
satya - Friday, November 21, 2008 4:22:37 PM
what is setPersistentDrawingCache
what is setPersistentDrawingCache