簡單實現(xiàn)Android圖片翻轉(zhuǎn)動畫效果
作者:佚名
下面給大家分享一個有趣的動畫:這里比較適合一張圖片的翻轉(zhuǎn),如果是多張圖片,可以參考APIDemo里的例子,就是加個ArrayAdapter,還是簡單的,也可以自己發(fā)揮修改,實現(xiàn)自己想要的。這里的代碼基本上可以直接運行項目了。
什么都不說,先看效果
這是原始圖片的樣子
這是翻轉(zhuǎn)后的效果圖
如果是你想要的效果,那么繼續(xù)往下看,如果不是,那可以跳過了。這是一個動畫,而不是用matrix實現(xiàn)的直接翻轉(zhuǎn)圖片。
我這個是根據(jù)APIDemo簡單修改寫的
需要一個Rotate3d 類,繼承Animation
- public class Rotate3d extends Animation{
- private final float mFromDegrees;
- private final float mToDegrees;
- private final float mCenterX;
- private final float mCenterY;
- private final float mDepthZ;
- private final boolean mReverse;
- private Camera mCamera;
- public Rotate3d(float fromDegrees, float toDegrees,
- float centerX, float centerY, float depthZ, boolean reverse) {
- mFromDegrees = fromDegrees;
- mToDegrees = toDegrees;
- mCenterX = centerX;
- mCenterY = centerY;
- mDepthZ = depthZ;
- mReverse = reverse;
- }
- @Override
- public void initialize(int width, int height, int parentWidth, int parentHeight) {
- super.initialize(width, height, parentWidth, parentHeight);
- mCamera = new Camera();
- }
- @Override
- protected void applyTransformation(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);
- }
- }
這個類可以直接拷過去,不用做任何的修改。其中的方法自己找相關(guān)資料研究。
#p#
在main.xml里加個ImageView,如
- <?xml version="1.0" encoding="utf-8"?>
- <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/container"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <ImageView
- android:id="@+id/image"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="Rotate"
- android:textSize="50px"
- android:layout_x="150px"
- android:layout_y="30px"
- android:src="@drawable/ro">
- ></ImageView>
- </FrameLayout>
這個不需要解釋吧,都可以看懂的
***,還需要一個activity類
如:
- public class TestRotate extends Activity implements OnClickListener{
- private mageView imageview;
- private ViewGroup mContainer;
- /**
- *這個變量設置的是圖片,如果是多張圖片,那么可以用數(shù)組,如
- *private static final int IMAGE = new int[]{
- * R.drawable.ro,
- * R.drawable.icon
- *};
- *有多少圖片就放多少,我這里做的只是一張圖片的翻轉(zhuǎn)
- *
- */
- private static final int IMAGE = R.drawable.ro;
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- imageview = (ImageView) findViewById(R.id.image);
- mContainer = (ViewGroup) findViewById(R.id.container);
- /**
- * 設置***顯示的圖片
- * 如果是數(shù)組,那么可以寫成IMAGE[int]
- *
- */
- imageview.setImageResource(IMAGE);
- /**
- *
- * 設置ImageView的OnClickListener
- *
- */
- imageview.setClickable(true);
- imageview.setFocusable(true);
- imageview.setOnClickListener(this);
- }
- 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;
- final Rotate3d rotation =
- new Rotate3d(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);
- }
- @Override
- public void onClick(View v) {
- // TODO Auto-generated method stub
- /**
- *
- * 調(diào)用這個方法,就是翻轉(zhuǎn)圖片
- * 參數(shù)很簡單,大家都應該看得懂
- * 簡單說下,***個是位置,第二是開始的角度,第三個是結(jié)束的角度
- * 這里需要說明的是,如果是要回到上一張
- * 把***個參數(shù)設置成-1就行了
- *
- */
- applyRotation(0,0,90);
- }
- 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) {
- }
- }
- /**
- * This class is responsible for swapping the views and start the second
- * half of the animation.
- */
- 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;
- Rotate3d rotation;
- if (mPosition > -1) {
- imageview.setVisibility(View.VISIBLE);
- imageview.requestFocus();
- rotation = new Rotate3d(90, 180, centerX, centerY, 310.0f, false);
- } else {
- imageview.setVisibility(View.GONE);
- rotation = new Rotate3d(90, 0, centerX, centerY, 310.0f, false);
- }
- rotation.setDuration(500);
- rotation.setFillAfter(true);
- rotation.setInterpolator(new DecelerateInterpolator());
- mContainer.startAnimation(rotation);
- }
- }
- }
【編輯推薦】
責任編輯:zhaolei
來源:
互聯(lián)網(wǎng)