0

我相信你们中的大多数人都在 Google Keep、Push Bullet 甚至 Google 收件箱应用等应用中看到了旋转的 FloatingActionButton。我试图通过拥有一个动画文件来实现这种旋转：

<?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 按钮内的可绘制动画？

这就是我设置动画的方式

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

2 回答 2

0

是的...您要做的是旋转 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);
}

}

于 2015-04-03T05:12:46.937 回答
0

我发现在棒棒糖之前的阴影是旋转的，但是在 API >= 21 上一切都是正确的。

所以，在棒棒糖之前，我试图在 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

于 2015-10-16T11:13:33.153 回答