android小动画:不断扩散的圆点

 更新时间:2021年11月26日 15:51:52   作者:多列米  
这篇文章介绍了如何实现android小动画:不断扩散的圆点,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,下面的实例代码,大家可以看看

 效果图

(ps: 其实就两个半径和透明度一起变化的小圆, 本项目中用来指示指尖位置)

实现原理

监听点击的位置,在父布局中动态增加 自定义的动画View

代码实现

(1)activity点击监听及添加View

   // 触屏点击位置
    private var pointX: Int = 0
    private var pointY: Int = 0
    private var circleView: SpreadCircleView?= null

    // 触摸点击
    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
    }
   /**
     * 添加自动扩散的圆点 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)圆点View实现(属性动画,根据动画进度来确定圆的当前半径,利用LifecycleObserver绑定周期)

/**
 *  Created by Liming on  2021/9/1 15:36
 *  不断扩散的小圆, 用于显示指尖位置
 */
class SpreadCircleView : View, LifecycleObserver {

    private var paint: Paint = Paint()
    // 圆圈最大半径
    val maxRadius = 25.toPx()
    // 圆圈中心点
    var centerX:Int = 0
    var centerY:Int = 0

    private var animator : ObjectAnimator? = null

    // 是否已开始绘制第二个圆
    var hasDrawCicle2 = false

    // 动画进度
    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)
        // 第一个圆
        drawCircle(canvas, progress)
        // 第二个圆
        if(hasDrawCicle2 || progress > 0.5f ){
            // 第一个圆的进度第一次达到 0.5 时,开始绘制第二个圆,
            hasDrawCicle2 = true
            var progress2 = progress + 0.5f
            if(progress2 > 1){
                progress2 = progress2 - 1
            }
            drawCircle(canvas, progress2)
        }
    }

    /**
     * 根据进度绘制 半径和透明度变化的圆
     */
    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代表无限循环
            animator?.interpolator = LinearInterpolator()
        }
        return animator
    }

    fun startAnimation() {
        // 开始动画
        getAnimator()?.start()
        hasDrawCicle2 = false
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_RESUME)
    fun resume() {
        // 开始动画
        animator?.start()
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_PAUSE)
    fun pause() {
        animator?.pause()
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_DESTROY)
    fun destory() {
        // 清除动画,避免内存泄漏,
        animator?.cancel()
        clearAnimation()
    }
} 

补充一个用到的扩展函数

    fun Int.toPx(): Float{
        val resources = Resources.getSystem()
        return TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                this.toFloat(),
                resources.displayMetrics
        )
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 揭秘在ListView等AdapterView上动态添加删除项的陷阱

    揭秘在ListView等AdapterView上动态添加删除项的陷阱

    今天遇到这么个需求,需要在运行时动态添加ListView的item,看起来很简单,实际操作过程中却遇到了麻烦,下面揭秘在ListView等AdapterView上动态添加删除项的陷阱
    2016-04-04
  • 浅析Android.mk

    浅析Android.mk

    Android.mk是Android提供的一种makefile文件,用来指定诸如编译生成so库名、引用的头文件目录、需要编译的.c/.cpp文件和.a静态库文件等。要掌握jni,就必须熟练掌握Android.mk的语法规范
    2016-01-01
  • 30分钟搞清楚Android Touch事件分发机制

    30分钟搞清楚Android Touch事件分发机制

    30分钟搞清楚Android Touch事件分发机制,Touch事件分发中只有两个主角:ViewGroup和View,想要深入学习的朋友可以参考本文
    2016-03-03
  • Android编程下拉菜单spinner用法小结(附2则示例)

    Android编程下拉菜单spinner用法小结(附2则示例)

    这篇文章主要介绍了Android编程下拉菜单spinner用法,结合实例较为详细的总结分析了下拉菜单Spinner的具体实现步骤与相关技巧,并附带两个示例分析其具体用法,需要的朋友可以参考下
    2015-12-12
  • 基于VideoView自定义控制面板的视频播放器

    基于VideoView自定义控制面板的视频播放器

    这篇文章主要为大家详细介绍了基于VideoView自定义控制面板的视频播放器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Android发送短信功能代码

    Android发送短信功能代码

    这篇文章主要介绍了Android发送短信功能代码,并附有较为详尽的代码说明,有助于读者更好的理解代码功能,需要的朋友可以参考下
    2014-09-09
  • Gradle属性设置及环境变量全面教程

    Gradle属性设置及环境变量全面教程

    这篇文章主要为大家介绍了Gradle属性设置及环境变量的全面教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 最常用和最难用的Android控件ListView

    最常用和最难用的Android控件ListView

    这篇文章主要为大家详细介绍了最常用和最难用的Android控件ListView的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Android实现多线程断点续传

    Android实现多线程断点续传

    这篇文章主要为大家详细介绍了Android实现多线程断点续传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Opengl ES之纹理贴图使用示例

    Opengl ES之纹理贴图使用示例

    这篇文章主要为大家介绍了Opengl ES之纹理贴图使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论