欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年03月05日 10:48:59   作者：傳道士  
這篇文章主要介紹了Android開發(fā)的自定義加載動(dòng)畫，效果為一個(gè)連續(xù)的動(dòng)畫，就是這個(gè)大圓不停地吞下小圓，文中示例代碼講解詳細(xì)，感興趣的可以了解一下

一、demo簡(jiǎn)介

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

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

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

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

R = minHeight /6

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

Cy = height/2

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

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

Cx = 3R

Cy =height/2

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

三、畫圓

1.先創(chuàng)建一個(gè)類繼承自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è)畫筆

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

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

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

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

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

這是因?yàn)?，?dāng)寬度大于高度時(shí)，R= height/6。如果R過小，那么圓心的坐標(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)畫

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

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)的過程，想讓它變成動(dòng)態(tài)的話，只需要一直修改嘴張開的角度即可。所以我們定義一個(gè)動(dòng)畫因子，作為弧度

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.之后，在createAnimator()方法里面添加小球的動(dòng)畫。讓小球移動(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)畫的難點(diǎn)，主要在于找到動(dòng)畫因子。

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

相關(guān)文章

最新評(píng)論