Question

我相信大多数人都看过像Google这样的应用程序中的旋转FloatingActionButton，推送子弹甚至Google收件箱应用程序。我试图通过一个动画文件来实现这种旋转：

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

是的......你要做的就是在FloatingActionButton Class中旋转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

我发现在Lollipop之前阴影正在旋转，但在API＆gt; = 21时，一切都是正确的。

所以，在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

旋转FloatingActionButton

2 个答案: