matrix 實現動畫3D旋轉效果

首先看下效果:

大概效果就是這樣 如果是你需要的 就繼續往下看 

如果是簡單實現一個那就容易了 那也不需要用到matrix

代碼如下:

AnimatorSet animatorSetCionOne=new AnimatorSet();
ObjectAnimator objectAnimatorCionOneRotation=ObjectAnimator.ofFloat(mImageViewCionOne,"rotation",250f,-30f,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneRotationX=ObjectAnimator.ofFloat(mImageViewCionOne,"rotationX",-200f,0f,180,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneRotationY=ObjectAnimator.ofFloat(mImageViewCionOne,"rotationY",169f,-60f,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneTranslationY=ObjectAnimator.ofFloat(mImageViewCionOne,"translationY",150f,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneTranslationX=ObjectAnimator.ofFloat(mImageViewCionOne,"translationX",200f,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneScaleX= ObjectAnimator.ofFloat(mImageViewCionOne,"scaleX",0,1f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneScaleY= ObjectAnimator.ofFloat(mImageViewCionOne,"scaleY",0,1f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneAlpha= ObjectAnimator.ofFloat(mImageViewCionOne,"alpha",0,1.0f).setDuration(mDurationTime);
animatorSetCionOne.setStartDelay(600);
animatorSetCionOne.playTogether(objectAnimatorCionOneTranslationY,objectAnimatorCionOneTranslationX,objectAnimatorCionOneScaleX,
        objectAnimatorCionOneRotation,objectAnimatorCionOneRotationX,objectAnimatorCionOneRotationY,objectAnimatorCionOneScaleY,objectAnimatorCionOneAlpha);

分別設置一下繞X軸,Y軸,Z軸 旋轉旋轉 再搞點位移,再搞點縮放 再搞點透明漸變就可以了 很炫酷了 


但是 如果像我這樣 有十幾個金幣啥的 就比較煩了  代碼寫的老多了

所以 需求就是學習的動力 

下面就開始上代碼了

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Camera;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class CoinsView extends View {

    private int times = 0;
    private int coinsNumber = 1;
    private int moveXLenth = 0;
    private int moveYLenth = 0;
    private int mCenterX = 650;
    private int mCenterY = 700;


    private final static String X_KEY = "Xpos";
    private final static String Y_KEY = "Ypos";
    private List<Map<String, Integer>> mListPoint = new ArrayList<Map<String, Integer>>();
    //設置每個目標的圖片
    private int[] BITMAPLIST = {R.drawable.ic_main_cion, R.drawable.ic_cion_two,
            R.drawable.ic_cion_three, R.drawable.ic_cion_four, R.drawable.ic_cion_five,
            R.drawable.ic_cion_six, R.drawable.ic_cion_seven,R.drawable.ic_cion_eight};

    private int[] RECTWITH = {100, 200, 100, 110, 150};
    private Matrix matrix; //作用矩陣
    private Camera camera;

    Paint mPaint = new Paint();

    public CoinsView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public CoinsView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CoinsView(Context context) {
        super(context);
        init();
    }

    private void init() {
        /*showBmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.flower);
        centerX = showBmp.getWidth()/2 ;
        centerY = showBmp.getHeight()/2 ;*/
        matrix = new Matrix();
        camera = new Camera();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.YELLOW);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.translate(500, 600);
        for (int i = 0; i < coinsNumber; i++) {
            if (times > 0) {
                //取出各種不同的圖片
                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), BITMAPLIST[i]);
//                Rect bitmaprect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
                //計算位移
                moveXLenth = ((mListPoint.get(i).get(X_KEY) - mCenterX) * times) / 100;
                moveYLenth = ((mListPoint.get(i).get(Y_KEY) - mCenterY) * times) / 100;
                float proportion=(float) times/100;
                Log.d("gggggggggg", "onDraw: "+proportion);
                //matrix要做出3D旋轉效果很麻煩,所以我們藉助了camera這個類
                camera.save();
                //設置繞xyz三個軸都旋轉,其中times是通過valueAnimator動態傳進來的值
                camera.rotate(times * 360, 2 * times * 360, 360 * times / 100);
                //設置camera作用矩陣
                camera.getMatrix(matrix);
                camera.restore();
                //設置圖片縮放
                matrix.postScale(proportion*0.5f, proportion*0.5f);
                //設置翻轉中心點
                matrix.preTranslate(-bitmap.getWidth() / 2, -bitmap.getHeight() / 2);
                matrix.postTranslate(bitmap.getWidth() / 2, bitmap.getWidth() / 2);
                matrix.postTranslate(moveXLenth, moveYLenth);
                //設置透明漸變
                /*ColorMatrix mColorMatrix = new ColorMatrix(new float[] {
                        1, 0, 0, 0, 0,
                        0, 1, 0, 0, 0,
                        0, 0, 1, 0, 0,
                        0, 0, 0, proportion, 0,//這裏是設置透明度的 上面三個分別是設置RGB的 這個屬於A
                });
               //把透明度設置上去
                mPaint.setColorFilter(new ColorMatrixColorFilter(mColorMatrix));*/
                //通過matrix繪製圖片
                canvas.drawBitmap(bitmap, matrix, mPaint);
//                Rect rect = new Rect(mCenterX + moveXLenth, mCenterY + moveYLenth, mCenterX + RECTWITH[i] + moveXLenth, mCenterY + moveYLenth + RECTWITH[i]);
//                canvas.drawBitmap(bitmap, bitmaprect, rect, mPaint);
            }
        }

    }
//設置目標點的集合
    public void setCoinsPointList(List<Map<String, Integer>> list) {
        if (list.size() > 0) {
            mListPoint = list;
            coinsNumber = list.size();
        }
    }

    //讓動畫開始動起來
    public void setDurationTime(int time) {
        times = time;
        invalidate();
    }

這是自定義的一個類 

使用的話如下:

佈局文件:

<com.example.yanwei.myapplication.CoinsView
    android:visibility="visible"
    android:id="@+id/coin_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

代碼中調用順序:

mCoinsView = (CoinsView) findViewById(R.id.coin_view);
//設值給控件

private void initDate(){
    Map<String, Integer> temp0 = new HashMap<String, Integer>();
    temp0.put(X_KEY,DisplayUtils.dp2Px(this,150));//這個可以直接設值
    temp0.put(Y_KEY,DisplayUtils.dp2Px(this,180));
    mListPoint.add(temp0);
    Map<String, Integer> temp1 = new HashMap<String, Integer>();
    temp1.put(X_KEY, 180);
    temp1.put(Y_KEY, 300);
    mListPoint.add(temp1);
    Map<String, Integer> temp2 = new HashMap<String, Integer>();
    temp2.put(X_KEY, 100);
    temp2.put(Y_KEY,1200);
    mListPoint.add(temp2);
    Map<String, Integer> temp3 = new HashMap<String, Integer>();
    temp3.put(X_KEY, 400);
    temp3.put(Y_KEY, 400);
    mListPoint.add(temp3);
    Map<String, Integer> temp4 = new HashMap<String, Integer>();
    temp4.put(X_KEY, 800);
    temp4.put(Y_KEY, 200);
    mListPoint.add(temp4);
    Map<String, Integer> temp5 = new HashMap<String, Integer>();
    temp5.put(X_KEY, 800);
    temp5.put(Y_KEY, 1200);
    mListPoint.add(temp5);
    Map<String, Integer> temp6 = new HashMap<String, Integer>();
    temp6.put(X_KEY, 500);
    temp6.put(Y_KEY, 220);
    mListPoint.add(temp6);
    Map<String, Integer> temp7 = new HashMap<String, Integer>();
    temp7.put(X_KEY, 150);
    temp7.put(Y_KEY, 350);
    mListPoint.add(temp7);
    mCoinsView.setCoinsPointList(mListPoint);
}

開啓valueAnimator,動態傳值給控件

ValueAnimator animator = ValueAnimator.ofInt(0,100);
animator.setStartDelay(1500);
animator.setDuration(2000);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.start();
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        int curValue = (int)animation.getAnimatedValue();
        mCoinsView.setDurationTime(curValue);
    }
});


好像差不多了 

接下來自己摸索

發佈了25 篇原創文章 · 獲贊 13 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章