首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android 水波纹效果的探究

长按水波纹扩展效果 前言 水波纹效果从Android5.0就已经出来了,基本的使用相信大家都知道了,这里多谈一些相对深层次的使用: 1、基本使用 2、水波纹效果与布局绘制之间的问题 3、长按水波纹扩散效果...4、Button点击的水波纹效果 基本使用 系统自带水波纹实现方式 有界水波纹 android:background="?...长按水波纹扩展效果 在使用小红书时,我们可以看到关于“笔记”的item长按会展示扩散的效果,其实原理也很简单。...无边界的水波纹可以达到长按扩散的效果,只是它会超出边界,那我们就在对应的父布局加一层有边界的水波纹背景即可。...参考资料 Ripple 水波纹效果 聊聊Android5.0中的水波纹效果 解决点击ripple水波纹无效的问题 UI之修改Button颜色保持默认点击效果

2.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android:RippleDrawable 水波纹涟漪效果

    二、RippleDrawable基本概念介绍 (1)、RippleDrawable RippleDrawable可以实现上面效果图中的水波纹效果,它是在API 21 中添加的,所以,低于21的版本中不可使用...没有指定mask ,并且也没有指定radius 时,会以控件宽高中的较大值为直径绘制水波纹,这样就必然会超出控件的范围,所以,这种效果也叫做 无界水波纹效果。...指定mask 后 ,id 为 mask 的item 中指定的drawable 可以限定水波纹的范围。 三、代码示例: (1)、xml 中定义 ripple 下列代码依次对应效果图中的前6个。...--无界水波纹效果,所谓无界,实际是以空间宽度或高度中的大值作为直径绘制一个园--> <TextView android:layout_width...--有界水波纹效果

    2.6K20

    Android中Item实现点击水波纹效果

    前言 水波纹效果大致上可以分为两类,一类是有界水波纹,而另一类是无界水波纹,较为广泛使用的是有界水波纹。...系统自带的水波纹实现 系统自带的方法非常方便,只需要给相应的空间设置背景,背景内容则为系统自带的 selectableItemBackground ,这样的话,水波纹就会在TextView所在的区域内进行绘制...ripple颜色的变化效果要比selector的效果更加柔和,以渐变的形式出现。...对于没有设置点击事件的控件,是没有变化效果的。...foreground设置 现在的点击水波纹效果只有在抬起手指的时候才能看到,不符合一些项目的需求。 其实在控件除了设置background,还可以设置foreground。

    3.8K10

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

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

    2.3K20

    FLASH水波纹效果动画制作教程图文自编「建议收藏」

    在场景下面空白处鼠标右键选择粘贴到当前位置,这样刚才复制的图层一图片就覆盖在图层二上,点击图层二的图片右键分离,分离后把不是水的地方用橡皮擦工具擦掉,如看不清,先临时把图层一眼睛关闭掉,就是把图层一小锁前面的眼睛点击下 看擦好后的效果...高是10的矩形,画好后在点击下黑箭头工具,把矩形拉个弓形,弄好后,在复制多个弓形,把图片完全的覆盖好,还要过图片的高度,如图效果 做到这步后, 我们在图层三的时间轴100帧处,右键插入关键帧,在点100...帧,把遮罩的矩形条上边和图片的上端对齐, 如图下 放好位置后,在点击下面属性旁边的补间小三角——-改为形状补间, 在图层三处点击右键为遮罩层,就这样一个水波纹的动画就出炉了,其实在这里为了让大家学的快...,这个图片应该树木和水都应该有轻微的动,树木动和水动的原理是一样的,简单吧,这个大家可以学习参考,当然如果 你有好制作方法的教材也可以在编辑更好的效果出来,小妖编写教材纯属娱乐,高手莫笑哦, 看看我制作好的效果图吧

    1.4K10

    Android5.0中多种水波纹效果的实现代码

    水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?...OK,我们今天就来看看这个水波纹效果的实现。水波纹效果的实现有系统自带属性可以实现,我们也可以自定义实现效果。...1.系统自带水波纹实现方式有界水波纹 水波纹效果大致上可以分为两种,一种是有界的,一种无界,我们先来看看有界水波纹效果效果: ?.../ 所谓的无界并非完全无界,而是以控件宽高中最大的数值作为水波纹效果所在正方形的边界进行绘制。OK,这两种都是系统自带的水波纹效果,如果我们想要自定义又该怎么做呢?...Ok,这就是5.0中水波纹效果的使用。

    1.5K20

    【页面效果优化 1】下划线与水波纹

    现阶段页面体验和动态效果很被用户重视,由于之前都是面向对象编程,所以对于CSS动态效果有所忽略,现在要求越来越高,不得不面向CSS编程了,在实现页面动态效果的同时,并想记录下来以后搭建更多项目的时候快速复用...1、ion-input下划线效果 ?...---- 2、cardView点击水波纹效果 ?...演示效果.gif 由于录像软件问题,调试显示点击出现严重拖影现象,不过可以看出具体细节效果,点击的时候CSS绘制的渐变效果实际上并不是非常理想的圆弧,有点颗粒渐变,不过在正常显示的情况下,这个过程很快...2.3.2、transition: transform .3s,opacity .5s 扩展变化与透明度变化,这里非常考验人的想象能力,即在扩展过程中,透明度也必须发生变化,双重变化形成了水波纹效果

    85140

    JS动画效果

    JavaScript 动画框架 框架封装 ---- 相信大家在很多门户网站上都可以看到动画的交互效果,通过这些动画生动地体现了我们在网页上的交互效果,现在我们就来学习一下这些动画效果的分解动作吧。...动画的实现思路都是通过连续改变物体的属性值来实现效果的。一般来说都是改变一个物体的left,right,width,height,opacity....li> 四.链式动画 首先把上面的简单运动框架抽取出来然后加上透明度的变化,放进一个人通用的JS文件里movement.js...filter: alpha(opacity:30); opacity: 0.3; } <script src="move.<em>js</em>...JSON的格式: {键:值,键:值} 完善后的运动框架<em>js</em>:movement.<em>js</em> function getStyle(obj,attr) { if(obj.currentStyle){

    20.7K81

    使用Python实现水波纹效果:逼真的水波动画

    引言 水波纹效果是一种常见且迷人的视觉效果,广泛应用于游戏和图形设计中。在这篇博客中,我们将使用Python创建一个逼真的水波动画。...通过利用Pygame库和基于网格的算法,我们可以实现动态水波纹效果。 准备工作 前置条件 在开始之前,你需要确保你的系统已经安装了Pygame库。...Pygame并设置屏幕的基本参数: pygame.init() screen = pygame.display.set_mode((800, 600)) pygame.display.set_caption("水波纹效果...- 1: self.previous[y-radius:y+radius, x-radius:x+radius] += intensity 绘制水波 我们定义一个函数来绘制水波效果...# 初始化Pygame pygame.init() screen = pygame.display.set_mode((800, 600)) pygame.display.set_caption("水波纹效果

    8410
    领券