Android開發(fā)之自定義加載動畫詳解

更新時間：2022年03月05日 10:48:59 作者：傳道士

這篇文章主要介紹了Android開發(fā)的自定義加載動畫，效果為一個連續(xù)的動畫，就是這個大圓不停地吞下小圓，文中示例代碼講解詳細，感興趣的可以了解一下

一、demo簡介

1.效果展示如下圖，我截了三個瞬間，但其實這是一個連續(xù)的動畫，就是這個大圓不停地吞下小圓。

2.這個動畫可以拆分為兩部分，首先是大圓張嘴閉嘴的動畫，相當于畫一個圓弧，規(guī)定一下它的角度就好。小圓就是一個從右向左移動的動畫。然后不停地刷新界面，讓動畫的持續(xù)時間為永恒，這樣就會有一個持續(xù)的動態(tài)效果。

二、分析貪吃動畫的尺寸比例

1.在制作動畫之前，我們要先建一個模型，來確定一下大圓和小圓的比例。這個比例是自己設(shè)置的，可以自行修改。下圖是畫布的寬度大于高度的情況。

R = minHeight /6

Cx = (width - minwidth)/2 + 3R

Cy = height/2

還有一種是畫布寬度小于高度的情況，如下圖所示：這個時候

6R+0.5R+2R = minwidth。 R = minwidth /8.5

Cx = 3R

Cy =height/2

2.確定了大圓圓心坐標之后，小圓的圓心坐標也可以知道了。

三、畫圓

1.先創(chuàng)建一個類繼承自view，并實現(xiàn)其對應(yīng)的構(gòu)造方法

class MouseLoadingView : View {
    constructor(context: Context):super(context){}
    constructor(context: Context,attrs:AttributeSet?):super(context,attrs){}
    constructor(context: Context,attrs:AttributeSet?,style:Int):super(context,attrs,style){}
}

2.定義一下大圓（嘴）的半徑(3R)，小圓的半徑(R)以及兩圓之間的間距(0.5R)，還有嘴的圓心坐標

 //嘴的半徑
    private var mouseRadius = 0f
    //小圓的半徑
    private var ballRadius = 0f
    //嘴和小球的間距
    private var space = 0f
 //嘴的圓心
    private var cx = 0f
    private var cy = 0f

3. 在onSizeChanged方法里面計算尺寸。

?override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
? ? ? ?if(measuredWidth>=measuredHeight){
? ? ? ? ? ?ballRadius= measuredHeight/6f
? ? ? ? ? ? cx = (measuredWidth-8.5f*ballRadius)/2 + 3*ballRadius
? ? ? ? }else{
? ? ? ? ? ?ballRadius= measuredWidth/8.5f
? ? ? ? ? ? cx = 3*ballRadius.toFloat()
? ? ? ? }
? ? ? ? mouseRadius = 3*ballRadius
? ? ? ? space = ballRadius/2f

? ? ? ? cy = measuredHeight/2f
? ? }

4.提供一個畫筆

//畫筆
    private val mPaint = Paint().apply {
        style = Paint.Style.FILL
        color = context.resources.getColor(R.color.colorAccent,null)
    }

5.在onDraw方法里面畫一個圓

override fun onDraw(canvas: Canvas?) {
 canvas?.drawCircle(cx,cy,mouseRadius,mPaint)
}

6.在xml文件里面添加這個自定義類

  <com.example.loadinganim.MouseLoadingView
        android:id="@+id/loadingView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.11" />

7.如果用上面的方法來畫圓，會出現(xiàn)一些bug，如下圖所示

這是因為，當寬度大于高度時，R= height/6。如果R過小，那么圓心的坐標就會偏左，那么就會有一部份圓出界。為了避免這種情況發(fā)生，無論什么情況下，都把R設(shè)置為最小的那個/8.5。

8.重新計算一下半徑

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
? ? ? ? super.onSizeChanged(w, h, oldw, oldh)
? ? ? ? //計算尺寸
? ? ? ? //小球的半徑
? ? ? ?( Math.min(measuredHeight,measuredWidth)/8.5f ).also {r->
? ? ? ? ? ? ballRadius = r
? ? ? ? ? ? //嘴的半徑
? ? ? ? ? ? mouseRadius = 3*r
? ? ? ? ? ? //嘴和小球的間距
? ? ? ? ? ? space = r/2

? ? ? ? ? ? //嘴的圓心
? ? ? ? ? ? cx = ((measuredWidth- 8.5*r)/2 + 3*r).toFloat()
? ? ? ? ? ? cy = measuredHeight/2f
? ? ? ? }
? ? }

四、實現(xiàn)張嘴閉嘴動畫

1.張嘴相當于畫了一個弧，畫弧需要確定一個矩形區(qū)域——即大圓所在的矩形。還需要設(shè)置一個角度，也就是弧度。繪制出來如下圖所示。

override fun onDraw(canvas: Canvas?) {
 canvas?.drawArc(
            cx-mouseRadius,
            cy-mouseRadius,
            cx+mouseRadius,
            cy+mouseRadius,
           45f,270f,true,mPaint
        )
}

image.png

2.這是一個靜態(tài)的過程，想讓它變成動態(tài)的話，只需要一直修改嘴張開的角度即可。所以我們定義一個動畫因子，作為弧度

 //嘴張開的角度 - >張嘴的動畫因子
     private var mouseAngle = 0f

3.然后在onDraw方法里面，把死數(shù)據(jù)改為我們動畫因子即可。

canvas?.drawArc(
           cx-mouseRadius,
           cy-mouseRadius,
           cx+mouseRadius,
           cy+mouseRadius,
           mouseAngle,360-2*mouseAngle,true,mPaint
       )

4.添加兩個按鈕，來顯示動畫和暫停動畫。當點擊按鈕時，實現(xiàn)對應(yīng)的點擊事件。

5.所以在MouseLoadingView類里面提供幾個方法給外部調(diào)用

    }
    //提供給外部使用
    //顯示動畫
    fun show(){
     createAnimator()
        start()
    }
    //隱藏動畫
    fun hide(){
      stop()
    }

6.createAnimator()是創(chuàng)建動畫的函數(shù)。從0-45-0的是動畫因子的變化，監(jiān)聽一下動畫執(zhí)行的過程，不斷刷新動畫因子的數(shù)值，然后刷新界面。

private fun createAnimator() {
    ValueAnimator.ofFloat(0f, 45f, 0f).apply {
            duration = 650
            repeatCount = ValueAnimator.INFINITE
            addUpdateListener {
                mouseAngle = it.animatedValue as Float
                //刷新界面
                invalidate()
            }
            animators.add(this)
        }
}

7.因為動畫效果有很多，所以我們要用一個數(shù)組來保存所有的動畫

  //保存所有的動畫對象
    private var animators = mutableListOf<ValueAnimator>()

8.添加幾個啟動和結(jié)束動畫的方法

//啟動動畫
    private fun start(){
        for(anim in animators){
            anim.start()
        }
    }
//暫停動畫
    private fun stop(){
    for(anim in animators){
        anim.end()
    }

五、小球移動動畫

1.創(chuàng)建一個小球，然后讓它從右邊向左邊移動即可。小球圓心的x坐標在不斷改變，y坐標與大圓一樣。所以我們要給小球設(shè)置一個移動的動畫因子。

//小球移動的動畫因子
    private var ballTranslateX = 0f

2.然后在onDraw()方法里面繪制小球

//繪制小球
canvas?.drawCircle(cx+ballTranslateX,cy,ballRadius,mPaint)

3.之后，在createAnimator()方法里面添加小球的動畫。讓小球移動的距離從4.5R到0，也就是直到小圓與大圓重合。

 ValueAnimator.ofFloat(4.5f*ballRadius, 0f).apply {
            duration = 650
            repeatCount = ValueAnimator.INFINITE
            addUpdateListener {
                ballTranslateX = it.animatedValue as Float
                //刷新界面
                invalidate()
            }
            animators.add(this)
        }

4.在MainActivity里面添加按鈕的點擊事件

class MainActivity : AppCompatActivity() {

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

? ? ? ? startBtn.setOnClickListener{
? ? ? ? ? ? loadingView.show()
? ? ? ? ? ? pauseView.show()
? ? ? ? }

? ? ? ? stopBtn.setOnClickListener {
? ? ? ? ? ? loadingView.hide()
? ? ? ? ? ? pauseView.hide()
? ? ? ? }
? ? }
}

差不多就這些內(nèi)容。自定義加載動畫的難點，主要在于找到動畫因子。

以上就是Android開發(fā)之自定義加載動畫詳解的詳細內(nèi)容，更多關(guān)于Android加載動畫的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: