旋轉FloatingActionButton

Question

我相信大多數人都看到了應用程序中的旋轉FloatingActionButton，例如Google keep，push bullet甚至Google inbox應用程序。我試圖通過具有動畫文件，是實現這一旋轉：

<?xml version="1.0" encoding="UTF-8"?> 
<rotate 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:fromDegrees="0" 
android:toDegrees="135" 
android:pivotX="50%" 
android:pivotY="50%" 
android:repeatCount="0" 
android:fillAfter="true" 
android:fillEnabled="true" 
android:duration="100" /> 

現在我使用makovkastar庫做到這一點FAB按鈕。但是，當我將FAB設置爲旋轉時，陰影與FAB按鈕一起旋轉。

有沒有什麼辦法可以在FAB按鈕裏面繪製drawable？

這是我怎麼設置我的動畫

Animation anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate); 
    fab.startAnimation(anim); 

Answer 1

是......你所要做的就是在旋轉的FloatingActionButtonClass mActionIcon。見下文。

public void applyRotation(float start, float end, final int imgRes) { 
    final float centerX = getWidth()/2.0f; 
    final float centerY = getHeight()/2.0f; 

    // The animation listener is used to trigger the next animation 
    final Rotate3dAnimation rotation = new Rotate3dAnimation(start, end, 
      centerX, centerY, 0, true); 
    rotation.setDuration(100); 
    rotation.setFillAfter(true); 
    rotation.setInterpolator(new AccelerateInterpolator()); 

    rotation.setAnimationListener(new AnimationListener() { 

     @Override 
     public void onAnimationStart(Animation animation) { 

     } 

     @Override 
     public void onAnimationRepeat(Animation animation) { 

     } 

     @Override 
     public void onAnimationEnd(Animation animation) { 
      mActionIcon = getResources().getDrawable(imgRes); 
      mActionIcon.setBounds(0, 0, mActionSize, mActionSize); 
      // invalidate(); 
      rotateSecondImage(-45, 0); 
     } 

    }); 

    startAnimation(rotation); 

} 


private void rotateSecondImage(float start, float end) { 
    final float centerX = getWidth()/2.0f; 
    final float centerY = getHeight()/2.0f; 

    // The animation listener is used to trigger the next animation 
    final Rotate3dAnimation rotation = new Rotate3dAnimation(start, end, 
      centerX, centerY, 0, true); 
    rotation.setDuration(100); 
    rotation.setFillAfter(true); 
    rotation.setInterpolator(new DecelerateInterpolator()); 
    startAnimation(rotation); 
} 


public class Rotate3dAnimation 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 Rotate3dAnimation(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.rotateZ(degrees); 
    camera.getMatrix(matrix); 
    camera.restore(); 

    matrix.preTranslate(-centerX, -centerY); 
    matrix.postTranslate(centerX, centerY); 
} 

}

Answer 2

我發現，在預棒棒糖陰影是旋轉的，但在API> = 21一切是正確的。

因此，在pre-Lollipop上，我嘗試通過FAB旋轉ImageView。它效果很好。

這裏是佈局，我們將與同一來源影像的ImageView在FAB：

<FrameLayout> 
    android:id="@+id/rotatingFab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="bottom|end"> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:src="@drawable/ic_autorenew_white_24dp"/> 

    <ImageView 
     android:id="@+id/fabImage" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:background="@color/accent" 
     android:src="@drawable/ic_autorenew_white_24dp" 
     android:visibility="gone"/> 

</FrameLayout> 

我們開始動畫這樣的：

public void startAnimation(Animation animation) { 
    if (Build.VERSION.SDK_INT >= 21) { 
     mFab.startAnimation(animation); 
    } else { 
     mFabImage.setVisibility(VISIBLE); 
     // need post() to image could measure its size 
     mFabImage.post(() -> mFabImage.startAnimation(animation)); 
    } 
} 

並停止它：

public void clearAnimation() { 
    if (Build.VERSION.SDK_INT >= 21) { 
     mFab.clearAnimation(); 
    } else { 
     mFabImage.clearAnimation(); 
     mFabImage.setVisibility(GONE); 
    } 
} 

我在自定義視圖中將FrameLayout包裝起來更舒適，這裏充滿了要點 https://gist.github.com/pengrad/9db82de705b58b10c5e9