首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android 水波纹效果的探究

    长按水波纹扩展效果 前言 水波纹效果从Android5.0就已经出来了,基本的使用相信大家都知道了,这里多谈一些相对深层次的使用: 1、基本使用 2、水波纹效果与布局绘制之间的问题 3、长按水波纹扩散效果...4、Button点击的水波纹效果 基本使用 系统自带水波纹实现方式 有界水波纹 android:background="?...android:attr/selectableItemBackground" 无界水波纹 以控件宽高中最大的数值作为水波纹效果所在正方形的边界进行绘制 android:background="?...image.png 长按水波纹扩散效果 ? 长按水波纹扩展效果 在使用小红书时,我们可以看到关于“笔记”的item长按会展示扩散的效果,其实原理也很简单。...无边界的水波纹可以达到长按扩散的效果,只是它会超出边界,那我们就在对应的父布局加一层有边界的水波纹背景即可。

    2.4K20

    Android 5.0 Button 按钮水纹效果的适配问题

    ">//这里是扩散水波纹的色值 android:drawable="@color/green" /> 有个问题需要注意,如果的想要你的波纹没有按压的时候为透明状态...">//这里是扩散水波纹的色值 android:drawable="@android:color/transparent" />//这里你用透明色和透明的图片都是没有效果的 //这里是扩散水波纹的色值 android:id="@android:id/mask" android:drawable="@color/white" />里面的色值可以任选一个... android:id=”@android:id/mask”会让系统并不会真的绘制,并告知波纹的绘制边界 如果写成下面,波纹的绘制范围会超出控件的边界 //这里是扩散水波纹的色值 如上,这样设置后5.0以下的设备具有按钮按下变色的效果,5.0以上就具有水波纹效果.其他控件同理 后续: Material Design Button

    1.2K30

    1、创建RippleView.class, 继承与View

    PS:自定义view篇-水波纹实现 效果:水波纹扩散 场景:雷达、按钮点击效果、搜索等 实现:先上效果图,之前记得支付宝有一个咻一咻,当时就是水波纹效果,实现起来一共两步,第一画内圆,第二画多个外圆...typedArray.getColor(R.styleable.SpreadView_spread_center_color, ContextCompat.getColor(context, android.R.color.holo_red_light...centerPaint.setColor(centerColor);      //消除锯齿 centerPaint.setAntiAlias(true); //水波纹扩散...spreadPaint.setStyle(Paint.Style.STROKE); spreadPaint.setAlpha(255); //初始化第一个水波纹...  centerX = w / 2;    centerY = h / 2;   }  2、开始绘制onDraw()   我们已经做了好前奏,剩下的就开始绘制了,首先我们要确定几个圆才能形成水波纹效果

    62110

    Android OpenGL ES 实现动态(水波纹)涟漪效果

    动态(水波纹)涟漪效果 1 水波纹效果原理 最近一个做视频滤镜的朋友,让我给他做一个动态水波纹效果,具体就是:点击屏幕上的某一位置,然后波纹以该位置为中心向周围扩散。...模拟物理世界中的水波纹 最后观察出,物理世界中水波纹的特点如上图所示,从水面的正上方往下看,在凹面上方观察到的是缩小效果,而在凸面上方观察到的是放大效果,然后整个水波纹效果就是放大和缩小效果的交叉排列...因此,我们得出结论,水波纹(涟漪)效果实际上就是一组组相互交替、幅度向外部逐渐减小的缩小放大效果组合。 本文将水波纹模型简化成一组放大和缩小效果随时间逐步向外部偏移。...水波纹模型原理 发生形变区域的宽度为固定值 2*u_Boundary ,然后这个形变区域随着 u_Time 的变大逐步向外侧移动,最后就形成了动态的水波纹效果。...2 水波纹效果实现 基于上节的原理分析,实现水波纹效果的主要原理就是实现一定区域内的缩小和放大效果,我们以平滑函数的输出值作为纹理采样坐标的偏移程度。

    2.4K20

    手撕一个让人「欲罢不能」的水波纹选中控件

    一、前言 在 Android 5.0 以后,随着 Material Design 的提出,Android UI 设计语言可谓是提升了一大步,但是在国内其实并没有得到很大的推广应用。...原生的水波纹 我们知道在 Android 5.0 以后,要实现水波纹的效果点击效果很简单,只需配置 ripple 的 drawable 就可以了。...但是系统自带的水波纹效果只是一个短暂的点击响应过程,也就是最后水波纹消失了。 如果要让水波纹扩散后保持住,比如实现一个水波纹选中效果,就无法实现了。 原生的水波纹效果就不说了,相信大家都会。...触发水波纹绘制动画 首先看下触发水波纹扩散的方法: class RippleLayoutKtl: FrameLayout { // .........简单说一下收缩 水波纹 的过程: 在水波纹 已经展开 ,或者在 扩散的过程中 ,用户再次点击了控件,这时候,需要把水波纹 收缩回来 。

    1.1K40

    【Flutter 专题】133 图解自定义 ACEWaterButton 水波纹按钮

    和尚想自定义一个水波纹按钮,即默认向外扩散的水波样式;实现方式有很多种,和尚尝试最基本的 AnimationController 逐层绘制来处理,和尚简单记录一下尝试过程; ACEWaterButton...和尚画了一个简单的图如下,预期的水波纹按钮包括两层,以中心圆(蓝色)为基础逐步向外围扩散至(绿色),并循环重复; 1....水波纹 和尚预想实现水波纹效果则必然离不开 Animation 动画,使用动画方式也有多种,可以继承 AnimatedWidget 也可以使用 AnimationController 自定义动画样式...; 和尚预期水波纹不仅范围逐渐变大,并且在扩散过程中透明度逐渐降低,至外围最大范围为止消失;和尚采用最基本的 CustomPainter 自定义 Canvas.drawCircle,根据时间进度来逐层绘制水波纹...暂时先不缺省,因为和尚在设置水波纹扩散过程中,同时设置了透明度的渐变,若缺省内置圆会影响 innerIcon 的展示效果;但内置圆绘制位置可以调整,也可以在 ACEWaterPainter 中进行绘制;

    86530

    老板:你给我来个蜻蜓点水的特效

    首先,我们知道波纹会从中间扩散开来,且会有多个波纹叠加在一起,之后扩散开来的大小可以随机生成来拟真。 所以我们需要定义纹波圈层数以及波纹的最小最大尺寸,以及波纹的颜色等数据。...理一下思路,首先新生成的波纹当然是要在之前波纹的上层产生叠加效果,之后给定随机范围内的波纹大小让其生成,并且往波纹数据里push一个新的波纹配置对象。...,当用户点击时候,将调用这个方法创建一个波纹。...,兼容ie11及以上 @keyframes wave { to { //波纹逐渐扩散变大变透明 transform: scale(1);...,兼容ie11及以上 @keyframes wave { to { //波纹逐渐扩散变大变透明 transform: scale(1);

    56110

    Flutter 组件集录 | 从图标按钮看组件封装

    IconData _getIconData(TargetPlatform platform) { switch (platform) { case TargetPlatform.android...对我个人来说,水波纹能给用户一个交互的反馈,本身是比较好的,但一个小小的图标按钮有水波纹,感觉怪怪的。...这不得不让图标按钮的占位区域扩大,当多个 IconButton 排列时,如下所示,默认情况下,水波纹区域太大,又会显得拥挤: 不过可以通过 splashRadius 来控制水波纹的扩散半径。...但在小区域中,当长按时展示水波扩散的动画效果时,手指几乎占据了整个区域,所以整个动画效果呈现的收益并不明显。...Material2 的好看一些,对于 IconButton 而言,会根据图标颜色显示背景色,长按时也不再是扩散的水波纹,而是背景色的变化。

    1.2K10
    领券