iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >android小动画:不断扩散的圆点
  • 683
分享到

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

2024-04-02 19:04:59 683人浏览 独家记忆
摘要

 效果图 (ps: 其实就两个半径和透明度一起变化的小圆, 本项目中用来指示指尖位置) 实现原理 监听点击的位置,在父布局中动态增加 自定义的动画View 代码实现 (1)acti

 效果图

(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
    }

   
    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绑定周期)



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
        )
    }

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

--结束END--

本文标题: android小动画:不断扩散的圆点

本文链接: http://www.lsjlt.com/news/158554.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • android小动画:不断扩散的圆点
     效果图 (ps: 其实就两个半径和透明度一起变化的小圆, 本项目中用来指示指尖位置) 实现原理 监听点击的位置,在父布局中动态增加 自定义的动画View 代码实现 (1)acti...
    99+
    2024-04-02
  • 如何利用CSS3动画实现圆圈由小变大向外扩散的效果
    这篇文章将为大家详细讲解有关如何利用CSS3动画实现圆圈由小变大向外扩散的效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。css3中新增了一个animation的属性,该属性类似于创建一个animati...
    99+
    2023-06-08
  • Android viewpager自动轮播和小圆点联动效果
    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下首先来看一下我们要做成的而效果:主页面要显示一个viewpager自动轮播+小圆点联动的效果 : 废话不多说,直接上代码:布局文件: activity_ma...
    99+
    2023-05-30
    android 轮播 viewpager
  • 怎么用css实现水纹扩散的动画效果
    小编给大家分享一下怎么用css实现水纹扩散的动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   <divclas...
    99+
    2024-04-02
  • Android如何将Glide动态加载不同大小的图片切圆角与圆形
    这篇文章主要介绍了Android如何将Glide动态加载不同大小的图片切圆角与圆形,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Glide加载动态图片首先我们先要去依赖一个g...
    99+
    2023-05-30
    android glide
  • Android动画之小球拟合动画的示例分析
    这篇文章给大家分享的是有关Android动画之小球拟合动画的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Android动画之小球拟合动画实例实现效果:动画组成:通过三阶贝塞尔曲线来拟合圆,拟合系数的由来...
    99+
    2023-05-31
    android
  • Android 滑动小圆点ViewPager的两种设置方法详解流程
    第一种方法: 一、测试如下,直接设置小圆点不是图标 二、准备工作 1.在drawable创建dot.xml,设置小圆点,比较方便 <?xml version=...
    99+
    2024-04-02
  • 纯CSS3如何创建边框阴影向外扩散的动画特效
    这篇文章给大家分享的是有关纯CSS3如何创建边框阴影向外扩散的动画特效的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。我们先来看看效果图:下面我们来研究一下是怎么实现这个效果的:首...
    99+
    2024-04-02
  • Android如何自定义带动画的半圆环型进度效果
    小编给大家分享一下Android如何自定义带动画的半圆环型进度效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下package com.ne...
    99+
    2023-05-31
    android
  • VUE 过渡状态的未来:不断演进的动画技术
    VUE过渡状态是一个强大且灵活的工具,它允许我们轻松地创建复杂的动画,而无需编写任何CSS或JavaScript代码。我们只需在元素上添加一个transition属性,然后指定要应用的过渡效果即可。 VUE过渡状态支持多种内置过渡效果,...
    99+
    2024-02-11
    VUE 过渡状态 动画 技术 JavaScript CSS
  • Android如何实现带动画效果的可点击展开TextView
    这篇文章将为大家详细讲解有关Android如何实现带动画效果的可点击展开TextView,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图: 收起(默认)效果:点击展开后的效果:源码: 布局:<x...
    99+
    2023-05-30
    android textview
  • 利用Android实现一种点赞动画效果的全过程
    目录前言点击后的缩放效果拇指的散开效果示例总结前言 最近有个需求,需要仿照公司的H5实现一个游戏助手,其中一个点赞的按钮有动画效果,如下图: 分析一下这个动画,点击按钮后,拇指首先...
    99+
    2022-12-08
    android 点赞动画 android点赞效果 android点击动画
  • ViewPager实现带引导小圆点与自动跳转的引导界面
    实现引导小圆点的方法其实很简单,可直接在布局上放置与引导页面等量的ImageView,然后在切换页面的时候更改图片资源就好了。这里顺便提一下,有些APP是干脆在制作引导页面图片的时候加上引导小圆点,这种方式显然最简单不过了,但是既然是附在图...
    99+
    2023-05-30
    viewpager 引导圆点 自动跳转
  • vue修改swiper框架轮播图小圆点的样式不起作用的解决
    目录swiper框架轮播图小圆点样式不起作用不要加 scopedswiper小圆点默认样式改变swiper框架轮播图小圆点样式不起作用 不要加 scoped 下面是错误写法 <...
    99+
    2024-04-02
  • CSS3怎么实现大小不一的粒子旋转加载动画
    这篇文章主要介绍“CSS3怎么实现大小不一的粒子旋转加载动画”,在日常操作中,相信很多人在CSS3怎么实现大小不一的粒子旋转加载动画问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • Android自定义一个图形单点移动缩小的效果
    先给大家展示下效果图,如果大家感觉不错,请参考实现代码效果图如下所示:代码如下所示:public class MainActivity extends Activity { View view; public static final ...
    99+
    2023-05-30
    android 自定义 图形
  • vue修改swiper框架轮播图小圆点的样式不起作用怎么解决
    今天小编给大家分享一下vue修改swiper框架轮播图小圆点的样式不起作用怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2023-06-30
  • Android自定义SeekBar实现滑动验证且不可点击的示例
    小编给大家分享一下Android自定义SeekBar实现滑动验证且不可点击的示例,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!最近公司因为短信接口被盗刷的比较严重,需要做一个类似于淘宝的滑动验证,用于特定环境,以增加一层保...
    99+
    2023-06-14
  • CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画
    本篇内容介绍了“CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作