Android開發之自定義載入動畫詳解

2022-03-05 13:00:32

一、demo簡介

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

2.這個動畫可以拆分為兩部分，首先是大圓張嘴閉嘴的動畫，相當於畫一個圓弧，規定一下它的角度就好。小圓就是一個從右向左移動的動畫。然後不停地重新整理介面，讓動畫的持續時間為永恆，這樣就會有一個持續的動態效果。

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

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

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.先建立一個類繼承自view，並實現其對應的構造方法

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.如果用上面的方法來畫圓，會出現一些bug，如下圖所示

這是因為，當寬度大於高度時，R= height/6。如果R過小，那麼圓心的座標就會偏左，那麼就會有一部份圓出界。為了避免這種情況發生，無論什麼情況下，都把R設定為最小的那個/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
        }
    }

四、實現張嘴閉嘴動畫

1.張嘴相當於畫了一個弧，畫弧需要確定一個矩形區域——即大圓所在的矩形。還需要設定一個角度，也就是弧度。繪製出來如下圖所示。

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

image.png

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

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

3.然後在onDraw方法裡面，把死資料改為我們動畫因子即可。

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

4.新增兩個按鈕，來顯示動畫和暫停動畫。當點選按鈕時，實現對應的點選事件。

5.所以在MouseLoadingView類裡面提供幾個方法給外部呼叫

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

6.createAnimator()是建立動畫的函數。從0-45-0的是動畫因子的變化，監聽一下動畫執行的過程，不斷重新整理動畫因子的數值，然後重新整理介面。

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.因為動畫效果有很多，所以我們要用一個陣列來儲存所有的動畫

  //儲存所有的動畫物件
    private var animators = mutableListOf<ValueAnimator>()

8.新增幾個啟動和結束動畫的方法

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

五、小球移動動畫

1.建立一個小球，然後讓它從右邊向左邊移動即可。小球圓心的x座標在不斷改變，y座標與大圓一樣。所以我們要給小球設定一個移動的動畫因子。

//小球移動的動畫因子
    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()
        }
    }
}

差不多就這些內容。自定義載入動畫的難點，主要在於找到動畫因子。

以上就是Android開發之自定義載入動畫詳解的詳細內容，更多關於Android載入動畫的資料請關注it145.com其它相關文章！