Android--旋转封面的设计与实现

废话不多说，先看效果图 

 

1. cancelLastAnimation()：取消上一个动画。在动画开始前调用 cancelLastAnimation() 方法来取消上一个动画。

2. rotateAnimator = ValueAnimator.ofFloat(currentRotation, currentRotation + 360)：创建一个值动画（ValueAnimator），从当前旋转角度 currentRotation 到 currentRotation + 360，即一圈的角度范围。这个动画用于实现旋转效果。

3. rotateAnimator.setDuration(20000)：设置动画的持续时间为 20000 毫秒，即 20 秒。

4. rotateAnimator.setInterpolator(new LinearInterpolator())：设置动画的插值器为线性插值器（LinearInterpolator）。线性插值器会使动画的变化速度保持匀速。

5. rotateAnimator.setRepeatCount(ValueAnimator.INFINITE)：设置动画的重复次数为无限次。

6. rotateAnimator.setRepeatMode(ValueAnimator.RESTART)：设置动画的重复模式为重新开始（RESTART）。当动画重复播放时，会从起始状态重新开始。

7. rotateAnimator.addUpdateListener(animation -> {...})：为动画添加更新监听器。在每次动画的值更新时，会调用这个监听器中的代码块。在代码块中，将最新的动画值设置给视图对象，并更新当前的旋转角度 currentRotation。

8. rotateAnimator.start()：开始执行动画。

旋转封面，开始旋转操作，在合适的位置调用即可

public void startRotation() {
        cancelLastAnimation();
        ValueAnimator rotateAnimator = ValueAnimator.ofFloat(currentRotation, currentRotation + 360);
        rotateAnimator.setDuration(20000);
        rotateAnimator.setInterpolator(new LinearInterpolator());
        rotateAnimator.setRepeatCount(ValueAnimator.INFINITE);
        rotateAnimator.setRepeatMode(ValueAnimator.RESTART);

        rotateAnimator.addUpdateListener(animation -> {
            float value = (float) animation.getAnimatedValue();
            mSetRotation(value);
            currentRotation = value;
        });
        rotateAnimator.start();
}

 旋转封面，结束旋转操作，在合适的位置调用即可

public void pauseRotation() {
    if (rotateAnimator != null) {
        rotateAnimator.cancel();
    }
}

 取消动画操作

@Override
public void cancelLastAnimation() {
    circleBlack.animate().cancel();
    ivCurrentImage.animate().cancel();
}

为要旋转的控件设置旋转角度

@Override
public void mSetRotation(float value) {
    circleBlack.setRotation(value);
    ivCurrentImage.setRotation(value);
}

布局文件代码

第一个 view为最底部的阴影圆形区域

第二个view为唱片区域

第三个ImageView为专辑封面区域

<!--旋转专辑图片-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="570dp"
android:gravity="center"
android:layerType="hardware"
android:scaleType="centerCrop">

<View
    android:id="@+id/circle_white"
    android:layout_width="330dp"
    android:layout_height="330dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="38.5dp"
    android:layout_marginTop="120dp"
    android:layout_marginEnd="38.5dp"
    android:layout_marginBottom="120dp"
    android:background="@drawable/image_circle_style_02" />

<View
    android:id="@+id/circle_black"
    android:layout_width="325dp"
    android:layout_height="325dp"
    android:layout_alignStart="@+id/circle_white"
    android:layout_alignTop="@+id/circle_white"
    android:layout_alignEnd="@+id/circle_white"
    android:layout_alignBottom="@+id/circle_white"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="10dp"
    android:background="@drawable/rc" />

<ImageView
    android:id="@+id/iv_current_image"
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:layout_alignStart="@+id/circle_black"
    android:layout_alignTop="@+id/circle_black"
    android:layout_alignEnd="@+id/circle_black"
    android:layout_alignBottom="@+id/circle_black"
    android:layout_marginStart="45dp"
    android:layout_marginTop="45dp"
    android:layout_marginEnd="45dp"
    android:layout_marginBottom="45dp"
    android:background="@drawable/image_circle_style"
    android:layerType="hardware"
    android:scaleType="centerCrop"
    android:src="@drawable/onepiece_music_list_background" />

</RelativeLayout>