学步园

package com.example.android.apis.animation;<br /> import com.example.android.apis.R;<br /> import android.app.Activity;<br /> import android.os.Bundle;<br /> import android.widget.ListView;<br /> import android.widget.ArrayAdapter;<br /> import android.widget.AdapterView;<br /> import android.widget.ImageView;<br /> import android.view.View;<br /> import android.view.ViewGroup;<br /> import android.view.animation.Animation;<br /> import android.view.animation.AccelerateInterpolator;<br /> import android.view.animation.DecelerateInterpolator;<br /> /**<br /> * This sample application shows how to use layout animation and various<br /> * transformations on views. The result is a 3D transition between a<br /> * ListView and an ImageView. When the user clicks the list, it flips to<br /> * show the picture. When the user clicks the picture, it flips to show the<br /> * list. The animation is made of two smaller animations: the first half<br /> * rotates the list by 90 degrees on the Y axis and the second half rotates<br /> * the picture by 90 degrees on the Y axis. When the first half finishes, the<br /> * list is made invisible and the picture is set visible.<br /> */<br /> public class Transition3d extends Activity implements<br /> AdapterView.OnItemClickListener, View.OnClickListener {<br /> private ListView mPhotosList;<br /> private ViewGroup mContainer;<br /> private ImageView mImageView;<br /> // Names of the photos we show in the list<br /> private static final String[] PHOTOS_NAMES = new String[] {<br /> "Lyon",<br /> "Livermore",<br /> "Tahoe Pier",<br /> "Lake Tahoe",<br /> "Grand Canyon",<br /> "Bodie"<br /> };<br /> // Resource identifiers for the photos we want to display<br /> private static final int[] PHOTOS_RESOURCES = new int[] {<br /> R.drawable.photo1,<br /> R.drawable.photo2,<br /> R.drawable.photo3,<br /> R.drawable.photo4,<br /> R.drawable.photo5,<br /> R.drawable.photo6<br /> };<br /> @Override<br /> protected void onCreate(Bundle savedInstanceState) {<br /> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.animations_main_screen);<br /> mPhotosList = (ListView) findViewById(android.R.id.list);<br /> mImageView = (ImageView) findViewById(R.id.picture);<br /> mContainer = (ViewGroup) findViewById(R.id.container);<br /> // Prepare the ListView 为ListView使用<br /> final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,<br /> android.R.layout.simple_list_item_1, PHOTOS_NAMES);<br /> mPhotosList.setAdapter(adapter);<br /> mPhotosList.setOnItemClickListener(this);//Item点击监听<br /> // Prepare the ImageView<br /> mImageView.setClickable(true);//可点击<br /> mImageView.setFocusable(true); //可Touch<br /> mImageView.setOnClickListener(this);//点击监听<br /> // Since we are caching large views, we want to keep their cache<br /> // between each animation 使用缓存<br /> mContainer.setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE);<br /> }<br /> /**<br /> * Setup a new 3D rotation on the container view.<br /> *<br /> * @param position the item that was clicked to show a picture, or -1 to show the list<br /> * @param start the start angle at which the rotation must begin<br /> * @param end the end angle of the rotation<br /> */<br /> private void applyRotation(int position, float start, float end) {<br /> // Find the center of the container 计算中间屏幕中间坐标<br /> final float centerX = mContainer.getWidth() / 2.0f;<br /> final float centerY = mContainer.getHeight() / 2.0f;<br /> // Create a new 3D rotation with the supplied parameter<br /> // The animation listener is used to trigger the next animation<br /> final Rotate3dAnimation rotation =<br /> new Rotate3dAnimation(start, end, centerX, centerY, 310.0f, true);<br /> rotation.setDuration(500);//动画时间<br /> rotation.setFillAfter(true);//<br /> rotation.setInterpolator(new AccelerateInterpolator());//动画加速曲线<br /> rotation.setAnimationListener(new DisplayNextView(position));//动画监听<br /> mContainer.startAnimation(rotation);<br /> }<br /> public void onItemClick(AdapterView parent, View v, int position, long id) {<br /> // Pre-load the image then start the animation<br /> mImageView.setImageResource(PHOTOS_RESOURCES[position]);<br /> applyRotation(position, 0, 90);<br /> }<br /> public void onClick(View v) {<br /> applyRotation(-1, 180, 90);<br /> }<br /> /**<br /> * This class listens for the end of the first half of the animation.<br /> * It then posts a new action that effectively swaps the views when the container<br /> * is rotated 90 degrees and thus invisible.<br /> */<br /> private final class DisplayNextView implements Animation.AnimationListener {<br /> private final int mPosition;<br /> private DisplayNextView(int position) {<br /> mPosition = position;<br /> }<br /> public void onAnimationStart(Animation animation) {<br /> }<br /> public void onAnimationEnd(Animation animation) {<br /> mContainer.post(new SwapViews(mPosition));//加入消息队列在线程中执行<br /> }<br /> public void onAnimationRepeat(Animation animation) {<br /> }<br /> }<br /> /**<br /> * This class is responsible for swapping the views and start the second<br /> * half of the animation.<br /> */<br /> private final class SwapViews implements Runnable {<br /> private final int mPosition;<br /> public SwapViews(int position) {<br /> mPosition = position;<br /> }<br /> public void run() {<br /> final float centerX = mContainer.getWidth() / 2.0f;<br /> final float centerY = mContainer.getHeight() / 2.0f;<br /> Rotate3dAnimation rotation;</p> <p> if (mPosition > -1) {//如果列表动画结束、图片动画开始<br /> mPhotosList.setVisibility(View.GONE);<br /> mImageView.setVisibility(View.VISIBLE);<br /> mImageView.requestFocus();<br /> rotation = new Rotate3dAnimation(90, 180, centerX, centerY, 310.0f, false);<br /> } else {<br /> mImageView.setVisibility(View.GONE);<br /> mPhotosList.setVisibility(View.VISIBLE);<br /> mPhotosList.requestFocus();<br /> rotation = new Rotate3dAnimation(90, 0, centerX, centerY, 310.0f, false);<br /> }<br /> rotation.setDuration(500);<br /> rotation.setFillAfter(true);<br /> rotation.setInterpolator(new DecelerateInterpolator());<br /> mContainer.startAnimation(rotation);<br /> }<br /> }<br /> }<br />

/*<br /> * Copyright (C) 2007 The Android Open Source Project<br /> *<br /> * Licensed under the Apache License, Version 2.0 (the "License");<br /> * you may not use this file except in compliance with the License.<br /> * You may obtain a copy of the License at<br /> *<br /> * http://www.apache.org/licenses/LICENSE-2.0<br /> *<br /> * Unless required by applicable law or agreed to in writing, software<br /> * distributed under the License is distributed on an "AS IS" BASIS,<br /> * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.<br /> * See the License for the specific language governing permissions and<br /> * limitations under the License.<br /> */<br /> package com.example.android.apis.animation;<br /> import android.view.animation.Animation;<br /> import android.view.animation.Transformation;<br /> import android.graphics.Camera;<br /> import android.graphics.Matrix;<br /> /**<br /> * An animation that rotates the view on the Y axis between two specified angles.<br /> * This animation also adds a translation on the Z axis (depth) to improve the effect.<br /> */<br /> public class Rotate3dAnimation extends Animation {<br /> private final float mFromDegrees;<br /> private final float mToDegrees;<br /> private final float mCenterX;<br /> private final float mCenterY;<br /> private final float mDepthZ;<br /> private final boolean mReverse;<br /> private Camera mCamera;<br /> /**<br /> * Creates a new 3D rotation on the Y axis. The rotation is defined by its<br /> * start angle and its end angle. Both angles are in degrees. The rotation<br /> * is performed around a center point on the 2D space, definied by a pair<br /> * of X and Y coordinates, called centerX and centerY. When the animation<br /> * starts, a translation on the Z axis (depth) is performed. The length<br /> * of the translation can be specified, as well as whether the translation<br /> * should be reversed in time.<br /> *<br /> * @param fromDegrees the start angle of the 3D rotation<br /> * @param toDegrees the end angle of the 3D rotation<br /> * @param centerX the X center of the 3D rotation<br /> * @param centerY the Y center of the 3D rotation<br /> * @param reverse true if the translation should be reversed, false otherwise<br /> */<br /> public Rotate3dAnimation(float fromDegrees, float toDegrees,<br /> float centerX, float centerY, float depthZ, boolean reverse) {<br /> mFromDegrees = fromDegrees;<br /> mToDegrees = toDegrees;<br /> mCenterX = centerX;<br /> mCenterY = centerY;<br /> mDepthZ = depthZ;<br /> mReverse = reverse;<br /> }<br /> @Override<br /> public void initialize(int width, int height, int parentWidth, int parentHeight) {<br /> super.initialize(width, height, parentWidth, parentHeight);<br /> mCamera = new Camera();<br /> }<br /> @Override<br /> protected void applyTransformation(float interpolatedTime, Transformation t) {<br /> final float fromDegrees = mFromDegrees;<br /> float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);<br /> final float centerX = mCenterX;<br /> final float centerY = mCenterY;<br /> final Camera camera = mCamera;<br /> final Matrix matrix = t.getMatrix();<br /> camera.save();<br /> if (mReverse) {//true 动画前图片不变后图片缩小interpolatedTime为0<br /> camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);<br /> } else {//false 动画前图片缩小后至原大小<br /> camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));<br /> }<br /> camera.rotateY(degrees);<br /> camera.getMatrix(matrix);<br /> camera.restore();<br /> matrix.preTranslate(-centerX, -centerY);<br /> matrix.postTranslate(centerX, centerY);<br /> }<br /> }<br />

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