Android開(kāi)發(fā)中如何自定義加載動(dòng)畫(huà)

這篇文章主要為大家展示了“Android開(kāi)發(fā)中如何自定義加載動(dòng)畫(huà)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Android開(kāi)發(fā)中如何自定義加載動(dòng)畫(huà)”這篇文章吧。

一、demo簡(jiǎn)介

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

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

二、分析貪吃動(dòng)畫(huà)的尺寸比例

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

R = minHeight /6

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

Cy = height/2

還有一種是畫(huà)布寬度小于高度的情況，如下圖所示：這個(gè)時(shí)候

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

Cx = 3R

Cy =height/2

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

三、畫(huà)圓

1.先創(chuàng)建一個(gè)類(lèi)繼承自view，并實(shí)現(xiàn)其對(duì)應(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)，還有嘴的圓心坐標(biāo)

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

3. 在onSizeChanged方法里面計(jì)算尺寸。

 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.提供一個(gè)畫(huà)筆

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

5.在onDraw方法里面畫(huà)一個(gè)圓

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

6.在xml文件里面添加這個(gè)自定義類(lèi)

  <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.如果用上面的方法來(lái)畫(huà)圓，會(huì)出現(xiàn)一些bug，如下圖所示

這是因?yàn)?，?dāng)寬度大于高度時(shí)，R= height/6。如果R過(guò)小，那么圓心的坐標(biāo)就會(huì)偏左，那么就會(huì)有一部份圓出界。為了避免這種情況發(fā)生，無(wú)論什么情況下，都把R設(shè)置為最小的那個(gè)/8.5。

8.重新計(jì)算一下半徑

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        //計(jì)算尺寸
        //小球的半徑
       ( 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
        }
    }

四、實(shí)現(xiàn)張嘴閉嘴動(dòng)畫(huà)

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

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

image.png

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

 //嘴張開(kāi)的角度 - >張嘴的動(dòng)畫(huà)因子
     private var mouseAngle = 0f

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

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

4.添加兩個(gè)按鈕，來(lái)顯示動(dòng)畫(huà)和暫停動(dòng)畫(huà)。當(dāng)點(diǎn)擊按鈕時(shí)，實(shí)現(xiàn)對(duì)應(yīng)的點(diǎn)擊事件。

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

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

6.createAnimator()是創(chuàng)建動(dòng)畫(huà)的函數(shù)。從0-45-0的是動(dòng)畫(huà)因子的變化，監(jiān)聽(tīng)一下動(dòng)畫(huà)執(zhí)行的過(guò)程，不斷刷新動(dòng)畫(huà)因子的數(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.因?yàn)閯?dòng)畫(huà)效果有很多，所以我們要用一個(gè)數(shù)組來(lái)保存所有的動(dòng)畫(huà)

  //保存所有的動(dòng)畫(huà)對(duì)象
    private var animators = mutableListOf<ValueAnimator>()

8.添加幾個(gè)啟動(dòng)和結(jié)束動(dòng)畫(huà)的方法

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

五、小球移動(dòng)動(dòng)畫(huà)

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

//小球移動(dòng)的動(dòng)畫(huà)因子
    private var ballTranslateX = 0f

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

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

3.之后，在createAnimator()方法里面添加小球的動(dòng)畫(huà)。讓小球移動(dòng)的距離從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里面添加按鈕的點(diǎn)擊事件

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)容。自定義加載動(dòng)畫(huà)的難點(diǎn)，主要在于找到動(dòng)畫(huà)因子。

以上是“Android開(kāi)發(fā)中如何自定義加載動(dòng)畫(huà)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！