本篇文章主要記錄最近實(shí)現(xiàn)的下載動(dòng)畫(huà)所學(xué)的知識(shí)
效果
成功效果
失敗效果
原理
我們想要的下載動(dòng)畫(huà)拴事，大概分為兩個(gè)部分沃斤，第一個(gè)部分是下載中的動(dòng)畫(huà)圣蝎，也就是滑動(dòng)條滑動(dòng)的動(dòng)畫(huà)，另一部分是下載結(jié)束的動(dòng)畫(huà)衡瓶，也就是滑動(dòng)條縮放和顯示小勾的動(dòng)畫(huà)徘公，那么具體如何實(shí)現(xiàn)呢，首先我們要根據(jù)外部下載速度來(lái)改變滑動(dòng)條進(jìn)度哮针，執(zhí)行滑動(dòng)條滑動(dòng)的動(dòng)畫(huà)关面，然后等待下載完成以后，執(zhí)行下載完成動(dòng)畫(huà)
主要知識(shí)點(diǎn)
- 屬性動(dòng)畫(huà)的相關(guān)知識(shí)點(diǎn)
- 如何實(shí)現(xiàn)點(diǎn)擊事件的同時(shí)開(kāi)啟下載動(dòng)畫(huà)
- 如何控制動(dòng)畫(huà)順序播放十厢？
- 動(dòng)畫(huà)的具體實(shí)現(xiàn)
屬性動(dòng)畫(huà)的相關(guān)知識(shí)點(diǎn)
屬性動(dòng)畫(huà)等太，即ObjectAnimator動(dòng)畫(huà),這種動(dòng)畫(huà)不僅包含補(bǔ)間動(dòng)畫(huà)的全部功能，而且可用支持自定義View的擴(kuò)展蛮放，說(shuō)到這里就必須數(shù)值發(fā)生器ValueAnimator,正是由于這個(gè)數(shù)值發(fā)生器缩抡，不斷生成變化的數(shù)值，當(dāng)然這個(gè)數(shù)值可以是Float類(lèi)型筛武，也可以是Int類(lèi)型,才實(shí)現(xiàn)控件屬性的變化缝其，這也是接下來(lái)實(shí)戰(zhàn)時(shí)主要用到的知識(shí)點(diǎn)。
如何實(shí)現(xiàn)點(diǎn)擊事件的同時(shí)開(kāi)啟下載動(dòng)畫(huà)
這里通過(guò)一個(gè)回調(diào)函數(shù)徘六，聲明在控件內(nèi)部内边，然后在外部具體實(shí)現(xiàn)，并調(diào)用控件的下載動(dòng)畫(huà)實(shí)現(xiàn)點(diǎn)擊事件同時(shí)開(kāi)啟下載動(dòng)畫(huà)
回調(diào)函數(shù)的聲明待锈，這里通過(guò)高階函數(shù)實(shí)現(xiàn)漠其，括號(hào)里的內(nèi)容表示參數(shù)為空，返回值也為空
/**
* 回調(diào)函數(shù)
* */
var callBack:(() -> Unit)? = null
聲明了回調(diào)函數(shù)竿音，然后在點(diǎn)擊事件中調(diào)用
override fun onTouchEvent(event: MotionEvent?): Boolean {
if (event?.action == MotionEvent.ACTION_DOWN){
//點(diǎn)擊事件回調(diào)
callBack?.let{back ->
back()
}
}
return true
}
最后外部具體實(shí)現(xiàn)和屎，也就是下載動(dòng)畫(huà)的開(kāi)啟
//回調(diào)函數(shù)的具體實(shí)現(xiàn)
mProgressView.callBack = {
downLoadData()
}
/**
* 下載動(dòng)畫(huà)
* */
private fun downLoadData(){
ValueAnimator.ofFloat(0f,1.0f).apply {
duration = 2000
addUpdateListener {
mProgressView.progress = it.animatedValue as Float
}
start()
}
}
這里下載動(dòng)畫(huà)通過(guò)點(diǎn)擊事件開(kāi)啟以后，會(huì)不斷獲取下載的進(jìn)度值并賦給控件內(nèi)部的progress變量春瞬，下載動(dòng)畫(huà)的進(jìn)度值progress聲明如下柴信，實(shí)現(xiàn)了set方法，里面判斷下載是否結(jié)束宽气，如果結(jié)束執(zhí)行下載完成動(dòng)畫(huà)
/**
* 進(jìn)度的變化因子
* */
var progress = 0f
set(value) {
field = value
if (progress < 1.0f) {
//正在下載
invalidate()
} else {
//開(kāi)啟完成動(dòng)畫(huà)
startFinishAnimator()
}
}
下載完成動(dòng)畫(huà)
/**
* 下載完成動(dòng)畫(huà)
* */
private fun startFinishAnimator(){
val toCircleAnim = ValueAnimator.ofFloat(0f,height / 2f).apply {
duration = 1000
addUpdateListener {
mCornerRadius = it.animatedValue as Float
invalidate()
}
start()
}
val translateAnim = ValueAnimator.ofFloat(0f,(width - height) / 2f).apply {
duration = 1000
addUpdateListener {
mTranValue = it.animatedValue as Float
invalidate()
}
start()
}
//裁剪動(dòng)畫(huà)
val clipAnim = ValueAnimator.ofFloat(0f, mHookSize.toFloat()).apply {
duration = 650
addUpdateListener { anim ->
clipSize = anim.animatedValue as Float
invalidate()
}
}
AnimatorSet().apply {
playSequentially(toCircleAnim, translateAnim, clipAnim)
start()
}
}
如何控制動(dòng)畫(huà)順序播放随常？
使用AnimatorSet動(dòng)畫(huà)集合里的playSequentially方法，即可順序執(zhí)行動(dòng)畫(huà)
AnimatorSet().apply {
playSequentially(toCircleAnim, translateAnim, clipAnim)
start()
}
}
動(dòng)畫(huà)的具體實(shí)現(xiàn)如下
首先創(chuàng)建一個(gè)類(lèi)繼承于View
class AnimationView : View {}
構(gòu)造方法如下
constructor(context:Context):super(context){}
constructor(context:Context,attrs:AttributeSet?):super(context,attrs){}
然后添加繪制相關(guān)的工具和屬性
/**
* 畫(huà)筆
* */
private val mPaint by lazy {
Paint().apply {
color = resources.getColor(R.color.colorPrimary)
style = Paint.Style.FILL
}
}
/**
* 畫(huà)筆萄涯，繪制小勾
* */
private val mHookPaint by lazy {
Paint().apply {
color = Color.WHITE
style = Paint.Style.STROKE
strokeWidth = 5f
isAntiAlias = true
isDither = true
}
}
/**
* 繪制進(jìn)度條背景
* */
private val mSliderPaint by lazy {
Paint().apply {
color = Color.MAGENTA
style = Paint.Style.FILL
}
}
實(shí)現(xiàn)回調(diào)函數(shù)
/**
* 回調(diào)函數(shù)
* */
var callBack:(() -> Unit)? = null
實(shí)現(xiàn)動(dòng)畫(huà)變化的接收值
/**
* 變成圓的動(dòng)畫(huà)音子
* */
private var mCornerRadius = 0f
/**
* 平移動(dòng)畫(huà)音子
* */
private var mTranValue = 0f
/**
* 進(jìn)度的變化因子
* */
var progress = 0f
set(value) {
field = value
if (progress < 1.0f) {
//正在下載
invalidate()
} else {
//開(kāi)啟完成動(dòng)畫(huà)
startFinishAnimator()
}
}
注意绪氛，最后一個(gè)動(dòng)畫(huà)因子實(shí)現(xiàn)了set方法，并且判斷了該值是否達(dá)到1.0f,達(dá)到了邊開(kāi)啟下載完成動(dòng)畫(huà)涝影，也是很好理解的枣察，if語(yǔ)句主要用來(lái)判斷下載動(dòng)畫(huà)是否結(jié)束，如果progress值小于1時(shí)，下載還未結(jié)束序目，如果等于1時(shí)臂痕，下載動(dòng)畫(huà)便結(jié)束，此時(shí)開(kāi)啟下自完成動(dòng)畫(huà)宛琅。
那么下載動(dòng)畫(huà)具體如何實(shí)現(xiàn)呢刻蟹，這里實(shí)現(xiàn)滑動(dòng)條縮小為一個(gè)圓的動(dòng)畫(huà)逗旁，但是沒(méi)有實(shí)現(xiàn)顯示圓時(shí)嘿辟，成功需繪制一個(gè)小勾，失敗需繪制一個(gè)小叉片效，后面會(huì)加進(jìn)來(lái)红伦，這里先不加
/**
* 下載完成動(dòng)畫(huà)
* */
private fun startFinishAnimator(){
val toCircleAnim = ValueAnimator.ofFloat(0f,height / 2f).apply {
duration = 1000
addUpdateListener {
mCornerRadius = it.animatedValue as Float
invalidate()
}
start()
}
val translateAnim = ValueAnimator.ofFloat(0f,(width - height) / 2f).apply {
duration = 1000
addUpdateListener {
mTranValue = it.animatedValue as Float
invalidate()
}
start()
}
}
然后實(shí)現(xiàn)點(diǎn)擊事件,回調(diào)函數(shù)的調(diào)用，外部具體實(shí)現(xiàn)了函數(shù)調(diào)用時(shí)下載動(dòng)畫(huà)的開(kāi)啟
override fun onTouchEvent(event: MotionEvent?): Boolean {
if (event?.action == MotionEvent.ACTION_DOWN){
//點(diǎn)擊事件回調(diào)
callBack?.let{back ->
back()
}
}
return true
}
最后執(zhí)行具體繪制
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
canvas?.drawRect(0f,0f,width.toFloat(),height.toFloat(),mSliderPaint)
canvas?.drawRoundRect(mTranValue,0f,progress * width - mTranValue,height.toFloat(),mCornerRadius,mCornerRadius,mPaint)
}
到這里其實(shí)還沒(méi)結(jié)束淀衣，只繪制了滑動(dòng)條縮放成一個(gè)圓昙读，但動(dòng)畫(huà)結(jié)束時(shí)，還需要顯示一個(gè)小勾或者小叉膨桥，所有還需要繪制一個(gè)小勾或者小叉蛮浑，那么如何繪制最后顯示的那個(gè)勾呢？
首先創(chuàng)建一個(gè)小勾路徑Path只嚣，設(shè)置小勾的寬度為100沮稚，可以根據(jù)具體情況調(diào)整
//小勾固定大小
private val mHookSize = 100
//小勾路徑
private var mPath = Path()
然后初始化控件中心坐標(biāo)
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
cx = width / 2f
cy = height / 2f
}
那么如何知道需要繪制小勾或者小叉呢
這里維護(hù)了一個(gè)result變量，用來(lái)判斷下載結(jié)果是成功還是失敗册舞，默認(rèn)成功
//下載結(jié)果
companion object {
//成功
const val failed = 0
//失敗
const val success = 1
}
//下載成功
var result = success
如果下載失敗蕴掏，將變量設(shè)為failed
//假設(shè)下載失敗
mProgressView.result = ProgressView.failed
然后判斷result值是成功還是失敗繪制對(duì)應(yīng)的小勾或者小叉
if (mTranValue == (width - height) / 2f) {
if (result == success) {
//成功畫(huà)勾
mPath.apply {
moveTo(cx - mHookSize / 2, cy)
lineTo(cx - mHookSize / 4, cy + mHookSize / 2)
lineTo(cx + mHookSize / 2, cy - mHookSize / 4)
}
} else {
//失敗畫(huà)叉
mPath.apply {
moveTo(cx - mHookSize / 2, cy - mHookSize / 2)
lineTo(cx + mHookSize / 2, cy + mHookSize / 2)
moveTo(cx + mHookSize / 2, cy - mHookSize / 2)
lineTo(cx - mHookSize / 2, cy + mHookSize / 2)
}
}
canvas?.drawPath(mPath, mHookPaint)
canvas?.drawRect(
cx - mHookSize / 2 + clipSize, cy - mHookSize /
2, cx + mHookSize / 2 + 10, cy + mHookSize / 2 + 10,
mSliderPaint
)
}
注意，由于繪制小勾或小叉是最后繪制的调鲸，所有在執(zhí)行完成動(dòng)畫(huà)后初始化對(duì)應(yīng)的路徑
將小勾繪制到屏幕上
canvas?.drawPath(mPath, mHookPaint)
最后是遮擋動(dòng)畫(huà)盛杰，用來(lái)遮擋繪制的小勾或小叉
//遮擋動(dòng)畫(huà)
val clipAnim = ValueAnimator.ofFloat(0f, mHookSize.toFloat()).apply {
duration = 650
addUpdateListener { anim ->
clipSize = anim.animatedValue as Float
invalidate()
}
}
AnimatorSet().apply {
playSequentially(toCircleAnim, translateAnim, clipAnim)
start()
}
最后加上小勾動(dòng)態(tài)顯示的動(dòng)畫(huà)
canvas?.drawRect(
cx - mHookSize / 2 + clipSize, cy - mHookSize /
2, cx + mHookSize / 2 + 10, cy + mHookSize / 2 + 10,
mSliderPaint
)
總結(jié)
如果看了這篇文章還是不太懂的同學(xué)，可以點(diǎn)擊這里查看我的另一篇更簡(jiǎn)單的文章藐石。
自己有的地方寫(xiě)的不好即供，還需不斷改正
