Android實(shí)現(xiàn)長按圓環(huán)動畫View效果的思路代碼
更新時(shí)間：2020年09月08日 16:46:48 作者：xun-ming
這篇文章主要介紹了Android實(shí)現(xiàn)長按圓環(huán)動畫View效果,本文給大家分享實(shí)現(xiàn)思路，通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、需求來源
最近想到一個需求，類似悅跑圈或者Keep的結(jié)束按鈕動畫
二、思路代碼
該動畫按鈕的主要作用就是防止用戶誤操作，具體實(shí)現(xiàn)思路如下：
1、監(jiān)聽用戶的觸摸事件OnTouchListener，在ACTION_DOWN的時(shí)候，記錄下xy坐標(biāo)和觸摸時(shí)間，同時(shí)start自定義View動畫；在ACTION_MOVE的過程中，判斷坐標(biāo)差值的偏移量是否在一個可接受的范圍內(nèi)，是的話就保留當(dāng)前動畫，不是的話就清除按鈕上繪制的path；在ACTION_UP的時(shí)候，再次記錄下觸摸時(shí)間，比較兩個時(shí)間是否達(dá)到了長按規(guī)定的時(shí)間，是的話就執(zhí)行下一個事件，不是的話就停止動畫重置Path。
val touchMax = 50
var lastX = 0
var lastY = 0
circleView.setOnTouchListener(object : View.OnTouchListener{
override fun onTouch(p0: View?, motionEvent: MotionEvent): Boolean {
val endTime: Long
val x = motionEvent.x
val y = motionEvent.y
when (motionEvent.action) {
MotionEvent.ACTION_DOWN -> {
startTime = System.currentTimeMillis()
lastX = x.toInt()
lastY = y.toInt()
circleView.startAnim()
}
MotionEvent.ACTION_UP -> {
endTime = System.currentTimeMillis()
val during = endTime - startTime
if (during < App.LONG_CLICK_TIME) {
circleView.cancelAnim()
circleView.clearAll()
}else{
playMaxWarn()
}
}
MotionEvent.ACTION_MOVE -> {
if (abs(lastX - x) > touchMax || abs(lastY - y) > touchMax) {
circleView.clearAll()
}
}
}
return false
}
})
2、就是在自定義View里arcTo畫一個圓，再使用屬性動畫來監(jiān)聽動畫的播放即可
fun startAnim() {
isClear = false
valueAnimator = ValueAnimator.ofFloat(0F, 359.9999F)
valueAnimator!!.duration = App.LONG_CLICK_TIME
valueAnimator!!.addUpdateListener { animation ->
mProgress = animation.animatedValue as Float
invalidate()
}
valueAnimator!!.start()
}
三、效果展示
最終實(shí)現(xiàn)效果圖雖然沒有上面那么好看，但基本效果還是達(dá)到了
四、全部代碼
package cn.xmliu.melongo.view
import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import androidx.core.content.ContextCompat
import cn.xmliu.melongo.App
import cn.xmliu.melongo.R
/**
* Date: 2020/8/12 13:21
* Email: diyangxia@163.com
* Description: 長按動畫View
*/
class LongCircleView(context: Context?, attrs: AttributeSet?) : View(context, attrs) {
/**
* 畫筆
*/
private val paint = Paint()
private var arcPath: Path? = null
private var rectF: RectF? = null
private var lineColor = 0
/**
* 中心點(diǎn)坐標(biāo)、半徑
*/
private var centerX: Float? = null
private var centerY: Float? = null
private var radius: Float? = null
private var left = -1F
private var top = -1F
private var right = -1F
private var bottom = -1F
private val offset = 10
private var mProgress = -1F
private var valueAnimator: ValueAnimator ?= null
private var isClear = true
init {
lineColor = ContextCompat.getColor(context!!, R.color.red)
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
centerX = width / 2.toFloat()
centerY = height / 2.toFloat()
radius = height / 2.toFloat()
left = centerX!! - radius!! + offset
top = centerY!! - radius!! + offset
right = centerX!! + radius!! - offset
bottom = centerY!! + radius!! - offset
rectF = RectF(left, top, right, bottom)
arcPath = Path()
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
paint.isAntiAlias = true
paint.color = lineColor
paint.style = Paint.Style.STROKE
paint.strokeWidth = 10F
arcPath!!.rewind() // 清除直線數(shù)據(jù)，保留數(shù)據(jù)結(jié)構(gòu)，方便快速重用
if(isClear) return
arcPath!!.arcTo(rectF!!, 270F, mProgress)
canvas?.drawPath(arcPath!!, paint)
}
fun startAnim() {
isClear = false
valueAnimator = ValueAnimator.ofFloat(0F, 359.9999F)
valueAnimator!!.duration = App.LONG_CLICK_TIME
valueAnimator!!.addUpdateListener { animation ->
mProgress = animation.animatedValue as Float
invalidate()
}
valueAnimator!!.start()
}
fun cancelAnim(){
valueAnimator!!.cancel()
}
fun clearAll() {
isClear = true
invalidate()
}
}
<RelativeLayout
android:layout_width="wrap_content"
android:layout_marginTop="5dp"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/flashLayout"
android:layout_centerInParent="true"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="@drawable/btn_circle_white"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/flashIV"
android:layout_width="40dp"
android:layout_height="40dp"
android:padding="7dp"
android:src="@drawable/menu_flash_black"
android:text="閃燈開"
android:tint="@color/main_color" />
<TextView
android:id="@+id/flashTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="閃燈"
android:textColor="@color/main_color" />
</LinearLayout>
<cn.xmliu.melongo.view.LongCircleView
android:id="@+id/circleView"
android:layout_width="80dp"
android:layout_height="80dp" />
</RelativeLayout>
val touchMax = 50
var lastX = 0
var lastY = 0
circleView.setOnTouchListener(object : View.OnTouchListener{
override fun onTouch(p0: View?, motionEvent: MotionEvent): Boolean {
val endTime: Long
val x = motionEvent.x
val y = motionEvent.y
when (motionEvent.action) {
MotionEvent.ACTION_DOWN -> {
startTime = System.currentTimeMillis()
lastX = x.toInt()
lastY = y.toInt()
circleView.startAnim()
}
MotionEvent.ACTION_UP -> {
endTime = System.currentTimeMillis()
val during = endTime - startTime
if (during < App.LONG_CLICK_TIME) {
circleView.cancelAnim()
circleView.clearAll()
}else{
flashTV.text = "OK"
}
}
MotionEvent.ACTION_MOVE -> {
if (abs(lastX - x) > touchMax || abs(lastY - y) > touchMax) {
circleView.clearAll()
}
}
}
return false
}
})
總結(jié)
到此這篇關(guān)于Android實(shí)現(xiàn)長按圓環(huán)動畫View效果的文章就介紹到這了,更多相關(guān)android長按圓環(huán)動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android開發(fā)之項(xiàng)目模塊化實(shí)踐教程
這篇文章主要給大家介紹了關(guān)于Android開發(fā)之項(xiàng)目模塊化的相關(guān)資料，文中通過示例代碼給各位Android開發(fā)者們介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)下吧。2017-09-09
Android畫圖實(shí)現(xiàn)MPAndroidchart折線圖示例詳解
這篇文章主要為大家介紹了Android畫圖實(shí)現(xiàn)MPAndroidchart折線圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了Android編程開發(fā)從零開始編寫一個輕量級瀏覽器過程步驟示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助祝大家多多進(jìn)步2022-02-02
通過本段代碼給大家介紹當(dāng)用戶輸入i檢測常用手勢的相關(guān)內(nèi)容，代碼簡單易懂，感興趣的朋友一起學(xué)習(xí)吧2016-01-01
使用ListView繪制自定義的表格有朋友嘗試過沒有，下面為大家分享下要實(shí)現(xiàn)下圖的效果有幾個方面，參照著這幾點(diǎn)做了個簡單的實(shí)現(xiàn)不是問題好了，話不多說看代碼2013-06-06
本文介紹的是android文字描邊功能的實(shí)現(xiàn)，文字描邊的功能在開發(fā)中還是聽實(shí)用的，有需要的可以參考學(xué)習(xí)2016-07-07
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)圓角圖片的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Android進(jìn)程間通信（IPC）機(jī)制Binder簡要介紹
本文主要介紹 Android進(jìn)程間通信（IPC）機(jī)制Binder簡要介紹， 這里介紹了Binder機(jī)制如何實(shí)現(xiàn)進(jìn)程通信機(jī)制，有研究Android源碼的朋友可以看下2016-08-08
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)拖拽裁剪功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)手寫板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06