溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用Android如何實(shí)現(xiàn)一個(gè)長(zhǎng)按圓環(huán)動(dòng)畫View效果

發(fā)布時(shí)間：2020-11-04 16:11:42 來源：億速云 閱讀：258 作者：Leah 欄目：開發(fā)技術(shù)

使用Android如何實(shí)現(xiàn)一個(gè)長(zhǎng)按圓環(huán)動(dòng)畫View效果？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

一、需求來源

最近想到一個(gè)需求，類似悅跑圈或者Keep的結(jié)束按鈕動(dòng)畫

使用Android如何實(shí)現(xiàn)一個(gè)長(zhǎng)按圓環(huán)動(dòng)畫View效果
使用Android如何實(shí)現(xiàn)一個(gè)長(zhǎng)按圓環(huán)動(dòng)畫View效果

二、思路代碼

該動(dòng)畫按鈕的主要作用就是防止用戶誤操作，具體實(shí)現(xiàn)思路如下：
1、監(jiān)聽用戶的觸摸事件OnTouchListener，在ACTION_DOWN的時(shí)候，記錄下xy坐標(biāo)和觸摸時(shí)間，同時(shí)start自定義View動(dòng)畫；在ACTION_MOVE的過程中，判斷坐標(biāo)差值的偏移量是否在一個(gè)可接受的范圍內(nèi)，是的話就保留當(dāng)前動(dòng)畫，不是的話就清除按鈕上繪制的path；在ACTION_UP的時(shí)候，再次記錄下觸摸時(shí)間，比較兩個(gè)時(shí)間是否達(dá)到了長(zhǎng)按規(guī)定的時(shí)間，是的話就執(zhí)行下一個(gè)事件，不是的話就停止動(dòng)畫重置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畫一個(gè)圓，再使用屬性動(dòng)畫來監(jiān)聽動(dòng)畫的播放即可

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á)到了

使用Android如何實(shí)現(xiàn)一個(gè)長(zhǎng)按圓環(huán)動(dòng)畫View效果

四、全部代碼

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: 長(zhǎng)按動(dòng)畫View
 */
class LongCircleView(context: Context&#63;, attrs: AttributeSet&#63;) : View(context, attrs) {

  /**
   * 畫筆
   */
  private val paint = Paint()
  private var arcPath: Path&#63; = null
  private var rectF: RectF&#63; = null
  private var lineColor = 0

  /**
   * 中心點(diǎn)坐標(biāo)、半徑
   */
  private var centerX: Float&#63; = null
  private var centerY: Float&#63; = null
  private var radius: Float&#63; = 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 &#63;= 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&#63;) {
    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&#63;.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&#63;, 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
      }
    })

看完上述內(nèi)容，你們掌握使用Android如何實(shí)現(xiàn)一個(gè)長(zhǎng)按圓環(huán)動(dòng)畫View效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手