Android用View实现球形旋转滚动效果（中秋篇）

引文

本文的球形是用View封装实现的，并非实际意义上的3D球形

最近中秋节将至，想到如此佳节的月亮如此美丽，我冒出了将月球放到App中进行呈现出来的想法，同时我想用最简单的View来实现这个效果，功夫不负有心人，在经历了3个小时的奋战下，我用View弄了一个3D球形的效果（不是真3D）。

效果图

能力支持：

• 月食旋转效果
• 月球表面进行旋转移动的效果

还是老规则，先上效果图：

核心实现代码

如果你不想看下面的实现流程，到这里就可以直接复制这块代码拿去用了，当然里面涉及一个切图需要到 这里 下载

package com.ftd.myapplication

import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.util.Log
import android.view.View
import androidx.core.graphics.scale


class MoonView(context: Context, attributeSet: AttributeSet) : View(context, attributeSet) {


    private var moonRadius = 0f // 圆形半径

    private val zoom = 0.8f //相较外层View宽高的缩放倍率 0~1
    private var centerOvalDistance = 0f //椭圆距离中心长度 用以做月球圆弧等内容的变化
    private var bgMoveLegth = 0f //椭圆距离中心长度 用以做月球圆弧等内容的变化

    private var moonCenterX = 0f    //固定月亮的中心X位置
    private var moonCenterY = 0f    //固定月亮的中心Y位置


    private val innerMoonPath = Path() //月球切月形状


    private val moonRectF = RectF()   //月球形状
    private val centerOvalRectF = RectF() //

    private lateinit var moonBg: Bitmap //背景切图

    var moonType=MoonType.LunarEclipse //展示View的类型

    private lateinit var bgMatrix: Matrix //切图和Viwe进行适配缩放

    private val valueAnimator = ValueAnimator() //动画

    private var isLeftStart = true //是否从做开始

    var distance=1f


    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        Log.e("TEST", "onSizeChanged${w}::${h}")

        moonRadius = if (w <= h) {
            w * zoom / 2
        } else {
            h * zoom / 2
        }
        moonCenterX = w / 2f
        moonCenterY = h / 2f

        moonRectF.left = moonCenterX - moonRadius
        moonRectF.right = moonCenterX + moonRadius
        moonRectF.top = moonCenterY - moonRadius
        moonRectF.bottom = moonCenterY + moonRadius


        centerOvalRectF.top = moonCenterY - moonRadius
        centerOvalRectF.bottom = moonCenterY + moonRadius

        val options = BitmapFactory.Options()
        options.inScaled = true
        options.inSampleSize = 1
        moonBg = BitmapFactory.decodeResource(resources, R.mipmap.moon_bg, options)
            .copy(Bitmap.Config.ARGB_8888, true)
        //绘制背景Bitmap大小的矩阵
        bgMatrix = Matrix() //如果在构造器中初始化，需要使用reset()方法
        bgMatrix.postTranslate(-moonBg.width + moonRadius * 2, moonRectF.top)
        bgMatrix.preScale(
            1f,
            h * zoom / moonBg.height
        )
        moonBg.scale(moonBg.width, h, false)

        valueAnimator.setFloatValues(moonRadius)
        valueAnimator.repeatMode = ValueAnimator.RESTART
        valueAnimator.repeatCount = -1
        centerOvalDistance = -moonRadius

        valueAnimator.addUpdateListener {
            if (moonType==MoonType.Moon){
                roateMoon(distance)
            }else if (moonType==MoonType.LunarEclipse){
                moveMoon(distance)
            }
            postInvalidate()
        }

        valueAnimator.start()
        super.onSizeChanged(w, h, oldw, oldh)

    }


    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        if (centerOvalDistance <= 0) {
            centerOvalRectF.left = moonCenterX + centerOvalDistance
            centerOvalRectF.right = moonCenterX - centerOvalDistance
        } else {
            centerOvalRectF.left = moonCenterX - centerOvalDistance
            centerOvalRectF.right = moonCenterX + centerOvalDistance
        }//计算内部椭圆左右弧线的矩形框

        innerMoonPath.reset()
        canvas!!.save()

        innerMoonPath.reset()
        if (isLeftStart) {
            innerMoonPath.arcTo(moonRectF, 90f, 180f, true)
        } else {
            innerMoonPath.arcTo(moonRectF, 270f, 180f, true)
        }//画外圆左右弧线

        if (centerOvalDistance <= 0) {
            innerMoonPath.arcTo(centerOvalRectF, 270f, 180f)
        } else {
            innerMoonPath.arcTo(centerOvalRectF, 90f, 180f)
        }//画内部椭圆左右弧线
        innerMoonPath.fillType = Path.FillType.EVEN_ODD

        canvas.clipPath(innerMoonPath)  //裁剪
        canvas.drawBitmap(moonBg, bgMatrix, null)


    }

    //仅旋转月亮
    private fun roateMoon(distance: Float) {
        if (bgMoveLegth >= moonBg.width / 2 + moonRadius) {
            bgMoveLegth -= moonBg.width / 2
            bgMatrix.postTranslate((-moonBg.width / 2).toFloat(), 0f)
        } else {
            bgMoveLegth += distance
            bgMatrix.postTranslate(distance, 0f)
        }
        postInvalidate()
    }


    //旋转月亮加月食效果
    private fun moveMoon(distance: Float) {
        if (centerOvalDistance <= -moonRadius) {
            centerOvalDistance = moonRadius
            isLeftStart = !isLeftStart
        }
        centerOvalDistance -= distance
        roateMoon(distance)
    }


    //类型
     enum class MoonType {
        LunarEclipse,//月食
        Moon
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

实现原理

球面滚动

实现原理其实比较简单，如下在下面放置一个Bitmap切面，我们将这个切面按我们相要的形状进行展示，同时不断的去滚动（滑动）这个切面就能实现类似3D的效果。

切图注意

当然这个切图最好由两个完整的球形切面进行拼接，这样就能达到不断滚动的效果，如下是我拼接的月球切面：

其中月球切面原素材可点 此链接 去Nasa进行下载 , 而拼接素材可至此处 下载

当然，只有你去换这个切面素材就能实现其他的星球滚动效果，原理是一样。如果有这样好用的素材网址可在下方留言，我找了好久没找到其他的，太难了！
如下即是滚动和旋转的相关代码，本处是用Matrix实现的

 //仅旋转月亮
    private fun roateMoon(distance: Float) {
        if (bgMoveLegth >= moonBg.width / 2 + moonRadius) {
            bgMoveLegth -= moonBg.width / 2
            bgMatrix.postTranslate((-moonBg.width / 2).toFloat(), 0f)
        } else {
            bgMoveLegth += distance
            bgMatrix.postTranslate(distance, 0f)
        }
        postInvalidate()
    }
1
2
3
4
5
6
7
8
9
10
11

月食效果

而其中的月食效果，我们可以通过画两条线进行切图来实现，这样最上层呈现出来的效果就是我们需要的形状
月食形状主要有两部分组成，一个是圆形左边的外圆弧线，一个是内部椭圆形的内圆弧线二者形成的交集区域即下方红色区域就是我们想要的月食形状。
相关代码

        if (centerOvalDistance <= 0) {
            centerOvalRectF.left = moonCenterX + centerOvalDistance
            centerOvalRectF.right = moonCenterX - centerOvalDistance
        } else {
            centerOvalRectF.left = moonCenterX - centerOvalDistance
            centerOvalRectF.right = moonCenterX + centerOvalDistance
        }//计算内部椭圆左右弧线的矩形框

        innerMoonPath.reset()
        canvas!!.save()

        innerMoonPath.reset()
        if (isLeftStart) {
            innerMoonPath.arcTo(moonRectF, 90f, 180f, true)
        } else {
            innerMoonPath.arcTo(moonRectF, 270f, 180f, true)
        }//画外圆左右弧线

        if (centerOvalDistance <= 0) {
            innerMoonPath.arcTo(centerOvalRectF, 270f, 180f)
        } else {
            innerMoonPath.arcTo(centerOvalRectF, 90f, 180f)
        }//画内部椭圆左右弧线
        innerMoonPath.fillType = Path.FillType.EVEN_ODD

        canvas.clipPath(innerMoonPath)  //裁剪
        canvas.drawBitmap(moonBg, bgMatrix, null)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

然后通过调整绘制内部椭圆的矩形宽度，使弧线能够进行推移，就能有月食的一个动画效果。

  //旋转月亮加月食效果
    private fun moveMoon(distance: Float) {
        if (centerOvalDistance <= -moonRadius) {
            centerOvalDistance = moonRadius
            isLeftStart = !isLeftStart
        }
        centerOvalDistance -= distance
        roateMoon(distance)
    }
1
2
3
4
5
6
7
8
9

到此一个简单的用View来实现月食的效果就实现了，你可以直接把这个View拿到项目里使用。

使用简述

下面是使用相关的代码，如果需要话可以直接参考复用，帮助你快速搭建demo，因为本demo涉及代码不多，就不传仓库了
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.ftd.myapplication.MoonView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toTopOf="@+id/moonView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginBottom="20dp"/>
    <com.ftd.myapplication.MoonView
        android:id="@+id/moonView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

MainActivtiy.class

package com.ftd.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.widget.AppCompatButton
import com.ftd.myapplication.MoonView
import com.ftd.myapplication.R

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initView()
    }

    private fun initView() {
        val moonView = findViewById<MoonView>(R.id.moonView)
        moonView.moonType = MoonView.MoonType.Moon
        moonView.distance=2f
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

最后

本次实现比较仓促，后续如果大家觉得用View来实现3D效果是个不错的注意的话，我可以再抽时间进行一波效果优化，像阴影，手势这些都可以考虑加进来。

同时也预祝大家在即将到来的中秋节，能够开开心心，快快乐乐！！