实现月全食效果-android自定义控件

简介: 实现月全食效果-android自定义控件

实现方式


想实现月亮发光效果需要使用的Paint类的setMaskFilter()方法,传入BlurMaskFilter对象实现高斯模糊发光。


思路分析


首先我们知道发生月全食的时候,月亮是完全被挡住的,但是他的周围会有一层光晕,这层光晕应该是一个黄色的渐变效果,通过MaskFilter我们可以设置光晕的半径和颜色,为了使效果更加逼真我们的demo给光晕加上一层透明度变化的动态效果


代码思路


变量的声明

var vWidth = 0f
    var vHeight = 0f
    var step =1
    var lightAlpht = 155f
    val paint = Paint().apply {
        maskFilter=BlurMaskFilter(500f,BlurMaskFilter.Blur.OUTER)
    }
复制代码


获取控件的高度

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        vWidth = w.toFloat()
        vHeight = h.toFloat()
    }
复制代码


绘制月全食

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        lightAlpht+=step//每次绘制透明度进行变化
        paint.color= Color.argb((lightAlpht).toInt(),255,255,60)//光晕是黄色的,我们只进行透明度变化
        canvas?.run {
            drawCircle(vWidth / 2, vHeight / 2, 200f, paint)//使用设置了maskFilter的Paint绘制圆
        }
        invalidate()//重绘
        if(lightAlpht>255){//如果透明度大于255,那么透明度开始减小
            step=-1
        }else if(lightAlpht<155){//如果透明度小于155开始增大透明度
            step=1
        }
    }
复制代码


实现效果


image.png


全部代码


class MoonView(context: Context?, attrs: AttributeSet?) : View(context, attrs) {
    var vWidth = 0f
    var vHeight = 0f
    var step =1
    var lightAlpha = 155f
    private val paint = Paint().apply {
        maskFilter=BlurMaskFilter(500f,BlurMaskFilter.Blur.OUTER)
    }
    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        vWidth = w.toFloat()
        vHeight = h.toFloat()
    }
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        lightAlpha+=step
        paint.color= Color.argb((lightAlpha).toInt(),255,255,60)
        canvas?.run {
            drawCircle(vWidth / 2, vHeight / 2, 200f, paint)
        }
        invalidate()
        if(lightAlpha>=255){
            step=-3
        }else if(lightAlpha<=155){
            step=3
        }
    }
}



相关文章
|
7月前
|
XML 前端开发 Java
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
107 1
|
Android开发
flutter中实现仿Android端的onResume和onPause方法
flutter中实现仿Android端的onResume和onPause方法
|
2月前
|
缓存 搜索推荐 Android开发
安卓开发中的自定义控件实践
【10月更文挑战第4天】在安卓开发的海洋中,自定义控件是那片璀璨的星辰。它不仅让应用界面设计变得丰富多彩,还提升了用户体验。本文将带你探索自定义控件的核心概念、实现过程以及优化技巧,让你的应用在众多竞争者中脱颖而出。
|
13天前
|
搜索推荐 Android开发 开发者
安卓应用开发中的自定义控件实践
在安卓应用开发的广阔天地中,自定义控件如同璀璨的星辰,点亮了用户界面设计的夜空。它们不仅丰富了交互体验,更赋予了应用独特的个性。本文将带你领略自定义控件的魅力,从基础概念到实际应用,一步步揭示其背后的原理与技术细节。我们将通过一个简单的例子——打造一个具有独特动画效果的按钮,来展现自定义控件的强大功能和灵活性。无论你是初学者还是资深开发者,这篇文章都将为你打开一扇通往更高阶UI设计的大门。
|
2月前
|
缓存 搜索推荐 Android开发
安卓开发中的自定义控件基础与进阶
【10月更文挑战第5天】在Android应用开发中,自定义控件是提升用户体验和界面个性化的重要手段。本文将通过浅显易懂的语言和实例,引导你了解自定义控件的基本概念、创建流程以及高级应用技巧,帮助你在开发过程中更好地掌握自定义控件的使用和优化。
47 10
|
1月前
|
前端开发 Android开发 UED
安卓应用开发中的自定义控件实践
【10月更文挑战第35天】在移动应用开发中,自定义控件是提升用户体验、增强界面表现力的重要手段。本文将通过一个安卓自定义控件的创建过程,展示如何从零开始构建一个具有交互功能的自定义视图。我们将探索关键概念和步骤,包括继承View类、处理测量与布局、绘制以及事件处理。最终,我们将实现一个简单的圆形进度条,并分析其性能优化。
|
2月前
|
前端开发 搜索推荐 Android开发
安卓开发中的自定义控件实践
【10月更文挑战第4天】在安卓开发的世界里,自定义控件如同画家的画笔,能够绘制出独一无二的界面。通过掌握自定义控件的绘制技巧,开发者可以突破系统提供的界面元素限制,创造出既符合品牌形象又提供卓越用户体验的应用。本文将引导你了解自定义控件的核心概念,并通过一个简单的例子展示如何实现一个基本的自定义控件,让你的安卓应用在视觉和交互上与众不同。
|
3月前
|
缓存 前端开发 Android开发
安卓应用开发中的自定义控件
【9月更文挑战第28天】在安卓应用开发中,自定义控件是提升用户界面和交互体验的关键。本文通过介绍如何从零开始构建一个自定义控件,旨在帮助开发者理解并掌握自定义控件的创建过程。内容将涵盖设计思路、实现方法以及性能优化,确保开发者能够有效地集成或扩展现有控件功能,打造独特且高效的用户界面。
|
3月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义控件
【9月更文挑战第5天】在安卓开发的海洋中,自定义控件如同一艘精致的小船,让开发者能够乘风破浪,创造出既独特又高效的用户界面。本文将带你领略自定义控件的魅力,从基础概念到实战应用,一步步深入理解并掌握这一技术。
|
4月前
|
Android开发 UED 开发者
安卓开发中的自定义控件基础
【8月更文挑战第31天】在安卓应用开发过程中,自定义控件是提升用户界面和用户体验的重要手段。本文将通过一个简易的自定义按钮控件示例,介绍如何在安卓中创建和使用自定义控件,包括控件的绘制、事件处理以及与布局的集成。文章旨在帮助初学者理解自定义控件的基本概念,并能够动手实践,为进一步探索安卓UI开发打下坚实的基础。