Android開發(fā)之自定義加載動(dòng)畫詳解
一、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 = 0f3. 在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ā)生，無論什么情況下，都把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 = 0f3.然后在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 = 0f2.然后在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)文章
這篇文章主要為大家詳細(xì)介紹了Android仿QQ討論組頭像效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
快速解決Android7.0下沉浸式狀態(tài)欄變灰的問題
下面小編就為大家分享一篇快速解決Android7.0下沉浸式狀態(tài)欄變灰的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Android使用WebView播放flash及判斷是否安裝flash插件的方法,以實(shí)例形式詳細(xì)講述了從布局、邏輯判斷到功能最終實(shí)現(xiàn)播放Flash的方法,是Android程序設(shè)計(jì)中比較典型的應(yīng)用,需要的朋友可以參考下2014-11-11
Android字符串和十六進(jìn)制相互轉(zhuǎn)化出現(xiàn)的中文亂碼問題
這篇文章主要介紹了Android字符串和十六進(jìn)制相互轉(zhuǎn)化出現(xiàn)的中文亂碼問題的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細(xì)介紹了Android日期顯示和日期選擇庫(kù)的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
Android使用ViewPager實(shí)現(xiàn)翻頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了Android使用ViewPager實(shí)現(xiàn)翻頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了Android自定義圖文跑馬燈效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
Android實(shí)現(xiàn)炫酷的網(wǎng)絡(luò)直播彈幕功能
這篇文章主要為大家詳細(xì)介紹了Android仿網(wǎng)絡(luò)直播彈幕功能的實(shí)現(xiàn)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Android Studio提示inotify大小不足的解決辦法
大家在使用Android Studio導(dǎo)入AOSP源碼的時(shí)候，可能會(huì)遇到inotify大小不足的問題，這篇文章就給大家介紹了怎么解決這個(gè)問題的方法，有需要的朋友們可以參考借鑒。2016-09-09
Unity同步/異步調(diào)用Android的方法實(shí)例
unity在Android端開發(fā)的時(shí)候，免不了要調(diào)用Java,下面這篇文章主要給大家介紹了關(guān)于Unity同步/異步調(diào)用Android的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08