模仿荷包啓動動畫

原地址：http://www.jianshu.com/p/50c358e2155a

用荷包App的時候發現啓動動畫做的挺好玩的，於是便模仿實現了一下。
gif效果圖：

animation.gif

實現思路：

仔細觀察，可以看出動畫的執行分爲兩個階段：
第一階段爲硬幣掉落。
第二階段爲錢包反彈。

佈局xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
            xmlns:tools="http://schemas.android.com/tools" 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".MainActivity">
    <ImageView
        android:id="@+id/coin_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/coin"/>
   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="70dp"
        android:layout_marginLeft="70dp"
        android:src="@mipmap/version"/>
    <ImageView
        android:id="@+id/wallet_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/wallet"/>
    <Button
        android:id="@+id/start_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:layout_marginBottom="10dp"
        android:text="start"/>
</FrameLayout>

硬幣掉落：

硬幣掉落的過程中執行兩種動畫，位移和旋轉。
位移動畫使用了補間動畫，xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="-50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toYDelta="0%"/>

旋轉動畫採用了重寫Animation並利用android.hardware.Camera類來實現。

public class ThreeDRotateAnimation extends Animation {  
  int centerX, centerY; 
  Camera camera = new Camera(); 
   @Override
   public void initialize(int width, int height, int parentWidth,  int parentHeight) {    
    super.initialize(width, height, parentWidth, parentHeight);   
    // 中心點座標
    centerX = width / 2;   
    centerY = height / 2;  
    setDuration(500);   
    setInterpolator(new LinearInterpolator());  
  }    
@Override    
protected void applyTransformation(float interpolatedTime, Transformation t) {   
    final Matrix matrix = t.getMatrix();
    camera.save(); 
    // 繞y軸旋轉
    camera.rotateY(360 * interpolatedTime);   
    camera.getMatrix(matrix);   
    // 設置翻轉中心點 
    matrix.preTranslate(-centerX, -centerY); 
    matrix.postTranslate(centerX, centerY);     
    camera.restore();   
 }
}

這裏簡單說下animation裏面的preTranslate和postTranslate方法，preTranslate是指在rotateY前平移,postTranslate是指在rotateY後平移，注意他們參數是平移的距離,而不是平移目的地的座標!
由於旋轉是以(0,0)爲中心的,所以爲了把硬幣的中心與(0,0)對齊,就要preTranslate(-centerX, -centerY), rotateY完成後,調用postTranslate(centerX, centerY),再把圖片移回來,這樣看到的動畫效果就是硬幣從中心不停的旋轉了。

最後同時執行以上兩種動畫，實現掉落旋轉效果。

private void startCoin() {
// 掉落
Animation animationTranslate = AnimationUtils.loadAnimation(this,R.anim.anim_top_in);

// 旋轉
ThreeDRotateAnimation animation3D = new ThreeDRotateAnimation();
animation3D.setRepeatCount(10);

AnimationSet animationSet = new AnimationSet(true);
animationSet.setDuration(800);
animationSet.addAnimation(animation3D);
animationSet.addAnimation(animationTranslate);
mCoinIv.startAnimation(animationSet);
｝

錢包反彈：

在執行硬幣掉落的同時，啓動一個ValueAnimator動畫，來判斷錢包反彈的時機。

private void setWallet() {
final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.setDuration(800);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
   @Override    public void onAnimationUpdate(ValueAnimator animation) {
        float fraction = animation.getAnimatedFraction();
        // 大概掉落到錢包的上邊緣位置的時候，取消ValueAnimator動畫，並執行錢包反彈效果
        if (fraction >= 0.75) {
            valueAnimator.cancel();
            startWallet();
        } 
   }});
valueAnimator.start();
｝

最後執行錢包反彈效果動畫，這裏採用了ObjectAnimator 。

private void startWallet() {
    // x軸縮放
    ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mLogoIv, "scaleX", 1, 1.1f, 0.9f, 1);
    objectAnimator1.setDuration(600);
    // y軸縮放  
    ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(mLogoIv, "scaleY", 1, 0.75f, 1.25f, 1);
    objectAnimator2.setDuration(600);

    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.setInterpolator(new LinearInterpolator()); 
   // 同時執行x，y軸縮放動畫 
    animatorSet.playTogether(objectAnimator1, objectAnimator2);
    animatorSet.start();}

這樣一個簡單的荷包啓動動畫效果就差不多出來了，唯一遺憾的是對錢包進行y軸縮放的時候會對整個y軸進行縮放，要想保持錢包底部不動，只有錢包上部反彈，暫時還沒有想到什麼好的方法，小弟不才還望大神賜教！謝謝！

完整源碼：

完整源碼在GitHub
如果覺得還不錯，記得star╰(￣▽￣)╮喲~

文／咖枯（簡書作者）
原文鏈接：http://www.jianshu.com/p/50c358e2155a
著作權歸作者所有，轉載請聯繫作者獲得授權，並標註“簡書作者”。