android小動(dòng)畫:不斷擴(kuò)散的圓點(diǎn)
?效果圖
(ps: 其實(shí)就兩個(gè)半徑和透明度一起變化的小圓, 本項(xiàng)目中用來(lái)指示指尖位置)
實(shí)現(xiàn)原理
監(jiān)聽點(diǎn)擊的位置,在父布局中動(dòng)態(tài)增加 自定義的動(dòng)畫View
代碼實(shí)現(xiàn)
(1)activity
點(diǎn)擊監(jiān)聽及添加View
// 觸屏點(diǎn)擊位置 private var pointX: Int = 0 private var pointY: Int = 0 private var circleView: SpreadCircleView?= null // 觸摸點(diǎn)擊 override fun onTouchEvent(event: MotionEvent?): Boolean { when (event!!.action) { MotionEvent.ACTION_DOWN -> { pointX = event.x.toInt() pointY = event.y.toInt() } MotionEvent.ACTION_MOVE -> { } MotionEvent.ACTION_UP ->{ addPointCircle() } else -> { } } return true }
/** * 添加自動(dòng)擴(kuò)散的圓點(diǎn) View */ fun addPointCircle(){ if(circleView == null){ circleView = SpreadCircleView(this); circleView?.let{ lifecycle.addObserver(it) } } binding.rootLayout.removeView(circleView) circleView?.let{ // 寬度和高度相同 val width = it.maxRadius.toInt() * 2 var lp = FrameLayout.LayoutParams(width, width ) lp.marginStart = pointX - width/2 lp.topMargin = pointY - width/2 binding.rootLayout.addView(it, lp) it.startAnimation() } }
(2)圓點(diǎn)View
實(shí)現(xiàn)(屬性動(dòng)畫,根據(jù)動(dòng)畫進(jìn)度來(lái)確定圓的當(dāng)前半徑,利用LifecycleObserver
綁定周期)
/**
* Created by Liming on 2021/9/1 15:36
* 不斷擴(kuò)散的小圓, 用于顯示指尖位置
*/
class SpreadCircleView : View, LifecycleObserver {
private var paint: Paint = Paint()
// 圓圈最大半徑
val maxRadius = 25.toPx()
// 圓圈中心點(diǎn)
var centerX:Int = 0
var centerY:Int = 0
private var animator : ObjectAnimator? = null
// 是否已開始繪制第二個(gè)圓
var hasDrawCicle2 = false
// 動(dòng)畫進(jìn)度
private var progress = 0f
set(value){
field = value
// 刷新界面
invalidate()
}
constructor(context: Context?) : super(context)
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context,
attrs,
defStyleAttr)
init{
paint.style = Paint.Style.FILL
paint.color = ContextCompat.getColor(context, R.color.rect_orange) // #ffa200
paint.strokeWidth = 3.toPx()
paint.isAntiAlias = true // 防鋸齒
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
//圓心位置
centerX = w / 2;
centerY = h / 2;
}
override fun draw(canvas: Canvas?) {
super.draw(canvas)
// 第一個(gè)圓
drawCircle(canvas, progress)
// 第二個(gè)圓
if(hasDrawCicle2 || progress > 0.5f ){
// 第一個(gè)圓的進(jìn)度第一次達(dá)到 0.5 時(shí),開始繪制第二個(gè)圓,
hasDrawCicle2 = true
var progress2 = progress + 0.5f
if(progress2 > 1){
progress2 = progress2 - 1
}
drawCircle(canvas, progress2)
}
}
/**
* 根據(jù)進(jìn)度繪制 半徑和透明度變化的圓
*/
fun drawCircle(canvas: Canvas?, animProgress: Float){
// 透明度 0 - 255
var alpha = 255 * (1 - animProgress)
paint.alpha = alpha.toInt()
var radius = maxRadius * animProgress
// 繪制圓
canvas?.drawCircle(centerX.toFloat(), centerY.toFloat(), radius, paint )
}
private fun getAnimator(): ObjectAnimator?{
if(animator == null){
animator = ObjectAnimator.ofFloat(this,
"progress", 0f, 0.99f)
animator?.duration = 1500
animator?.repeatCount = -1 //-1代表無(wú)限循環(huán)
animator?.interpolator = LinearInterpolator()
}
return animator
}
fun startAnimation() {
// 開始動(dòng)畫
getAnimator()?.start()
hasDrawCicle2 = false
}
@OnLifecycleEvent(Lifecycle.Event.ON_RESUME)
fun resume() {
// 開始動(dòng)畫
animator?.start()
}
@OnLifecycleEvent(Lifecycle.Event.ON_PAUSE)
fun pause() {
animator?.pause()
}
@OnLifecycleEvent(Lifecycle.Event.ON_DESTROY)
fun destory() {
// 清除動(dòng)畫,避免內(nèi)存泄漏,
animator?.cancel()
clearAnimation()
}
}
補(bǔ)充一個(gè)用到的擴(kuò)展函數(shù)
fun Int.toPx(): Float{ val resources = Resources.getSystem() return TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, this.toFloat(), resources.displayMetrics ) }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android快速開發(fā)之定制BaseTemplate
這篇文章主要為大家詳細(xì)介紹了Android快速開發(fā)之定制BaseTemplate的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02解析Android中使用自定義字體的實(shí)現(xiàn)方法
本篇文章是對(duì)在Android中使用自定義字體的方法進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05android開發(fā)設(shè)計(jì)模式之——單例模式詳解
本篇文章主要介紹了android開發(fā)設(shè)計(jì)模式之——單例模式詳解,具有一定的參考價(jià)值,有需要的可以了解一下。2016-11-11Android通過(guò)Java sdk的方式接入OpenCv的方法
這篇文章主要介紹了Android通過(guò)Java sdk的方式接入OpenCv的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04Android Flutter利用貝塞爾曲線畫一個(gè)小海豚
貝塞爾曲線的應(yīng)用填補(bǔ)了計(jì)算機(jī)繪制與手繪之前的差距,更能表達(dá)人想畫出的曲線。本文就將利用貝塞爾曲線繪制一個(gè)可愛的小海豚,需要的可以參考一下2022-04-04recycleview實(shí)現(xiàn)拼多多首頁(yè)水平滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了recycleview實(shí)現(xiàn)拼多多首頁(yè)水平滑動(dòng)效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05Android如何使用Bmob后端云實(shí)現(xiàn)失物招領(lǐng)功能
這篇文章主要介紹了Android如何使用Bmob后端云實(shí)現(xiàn)失物招領(lǐng)功能,幫助大家更好的理解和學(xué)習(xí)使用Android,感興趣的朋友可以了解下2021-03-03Android實(shí)現(xiàn)退出界面彈出提示對(duì)話框
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)退出界面彈出提示對(duì)話框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12