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

Android中Item实现点击水波效果

前言 水波效果大致上可以分为两类,一类是有界水波纹,而另一类是无界水波纹,较为广泛使用的是有界水波纹。...color/dark_blue" <item android:drawable="@color/blue"/ </ripple 其中item的颜色是控件正常状态的背景色,ripple中的颜色是点击时出现的颜色...对于没有设置点击事件的控件,是没有变化效果的。...foreground设置 现在的点击水波效果只有在抬起手指的时候才能看到,不符合一些项目的需求。 其实在控件除了设置background,还可以设置foreground。...selectableItemBackgroundBorderless是系统提供的可以一个半透明灰色水波效果,在按住控件时,即可展示。(如果不需要提前变蓝的效果,设置纯蓝色背景即可。)

3.5K10

js点击按钮返回页面顶部

22 03:08:28 在进行官网一类的网站建设时,经常会出现页面太长的现象,当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条,用户体验相当不好,于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮...,点击按钮返回顶部,并且有一定的效果。...即给最顶部的div设置一个id,然后a标签的链接地址写成该id,当点击时就会返回顶部,但是缺点为过于突兀,因为是立即返回顶部。...点击a标签即会返回到顶部div所在位置 再来看第二种方式 第二种方式相对来说比较人性化,看起来也比较舒服,直接先来看代码吧 落帆亭博客专注web前端开发 <a class...,此事件需要进入jquery.js文件,点击之后滚动条会有一个滚动过程,不是一下子回到顶部,个人感觉不错。

25K10

Vue组件设计 | 实现水波涟漪效果点击反馈指令

点击反馈 不知道小伙伴们有没有注意过这样一个细节,有的应用按钮,链接,可交互的卡片点击起来十分有感觉,而有的却像是点在白纸上了一样,是什么造成了他们使用户有如此明显的感受区分呢?.......1.jpg 鼠标移入时的小手、鼠标点击按钮下压弹起的动画、触屏应用点击时的屏幕震动,这些效果都给予用户一种是我的行为产生了这样的效果的直觉,这些效果也被统称为点击反馈,虽然看似是应用中的细枝末节,但是只要稍微投入一点点心思...,带来的用户体验提升是十分明显的 水波效果 这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。...当用户点击时,会以点击中心为圆心产生一个水波扩散的涟漪效果,适用各个场景,美观又不浮夸,关键是可以给用户带来很直观的反馈。...定制一个水波纹默认样式 水波纹实际上就是通过用户点击的位置生成一个小圆圈,并且尺寸逐渐扩大到整个被点击元素的一个过程,所以这里先制定一个水波基本的样式,并设置好过度动画,过度动画应该是一个先慢后快的一个过程

75730

如何实现一个丝滑的点击水波效果

本文为Varlet组件库源码主题阅读系列第九篇,读完本篇,可以了解到如何使用一个div创建一个点击水波效果。...Varlet组件库提供了一个使元素点击时生成水波扩散效果的指令: 点击 图片 接下来就从源码角度看看它是如何实现的...setStyles(this) // 将水波元素添加到被点击元素内 this.appendChild(ripple) // 20ms后修改水波元素的样式,达到水波的扩散动画效果...因为水波元素为被点击元素的子元素,所以这些坐标都是相对于被点击元素的左上角坐标计算的: 从绿色的圆过渡成红色的圆,透明度、大小、位置的变化就是水波的扩散效果。...setTimeout(task, 60) : task() } 先回顾一下创建水波的各个阶段的耗时,当我们第一次点击元素时,等待60ms后会创建水波元素,然后再等待20ms后会开始进行水波的扩散效果,动画耗时

56020

Android5.0新特性之——按钮点击效果动画(涟漪效果

Android5.0 Material Design设计的动画效果 RippleDrawable涟漪效果       涟漪效果是Android5.0以后的新特性。...这里根节点的设置的color就是涟漪效果的波纹颜色。子节点的item设置的drawable是涟漪效果的背景(也可以认为是涟漪效果的展示范围)。 我这里根据场景分了4种不同的效果。话不多说先上图。 ?...通过效果图可以看出,涟漪效果的扩散范围没有限制。已经扩散到了父控件。 1 <?xml version="1.0" encoding="utf-8"?...通过效果图,可以看到,控件显示了设置的背景色。涟漪效果的范围得到了控制。 <?xml version="1.0" encoding="utf-8"?...但是随着现在的一些视觉效果的变更,可能存在只要涟漪效果,背景可能是透明色的。设置id为mask的item节点,只起到一个涟漪效果限制作用,并不显示设置的drawable <?

3.7K40

水波扩散效果(shader)

水波扩散是一个比较好看的交互效果,特别是在某些以水为故事发生场景的游戏中,扩散的水波会让场景更加栩栩如生 ?...demo 实现思路 如果水波静止,我们看到的其实是像素点围绕着某个中心点的拉伸效果,我们只需让每个像素点叠加上它和中心点的向量差,就能够呈现出画面上的所有像素围绕中心点的拉伸感。...周期性往外涌 这种呼吸灯式的涌动其实和我们的最终效果有很大区别,因为它永远在循环涌动,但是我们的水波是从中心扩散出去之后,中间部分就不再动了的,怎么让中间的像素不再多次涌动呢?...如果把一圈水波比作圆,那水波的扩散行为其实就是这个圆的半径在不断的增大,圆外面的波纹有效,圆里面的波纹静止。...未调优效果 接下来的就是参数的调试,主要是三角函数的采样那里,我们希望水波能够产生多个波动,所以我们需要乘上一定的倍数,让函数的作用范围足够大,才能有足够多的波峰谷底。

2.2K20

Android源码解析--Material Design之水波点击效果RippleEffect使用

今天我们看一下RippleEffect水波点击效果,先上图: image.png 大家可以看到按钮或者布局点击的时候会有水波涟漪的效果,很不错,用到你的app上一定会很高大上的。...true);               invalidate();           }       }   我们可以在这里面设置圆的最大半径,最大半径越大,我们得到的水波涟漪效果越快...,越小,得到的水波涟漪效果越慢,也就是radiusMax /=1,这句代码。...动画相对于物件的X坐标的开始位置    int pivotYType 动画在Y轴相对于物件位置类型    float pivotYValue 动画相对于物件的Y坐标的开始位置   好了,这样差不多就完成了我们的水波涟漪效果了...当然我们的ListView的item点击也可以实现这样的效果,因为我们的RippleView中是支持Listview点击的 [java] view plaincopy /**       *

1.8K20

对抗蠕虫 —— 如何让按钮不被 JS 自动点击

在社交网络里,很多操作都是通过点击按钮发起的,例如发表留言。...那么有没有一种机制,让「发表留言」必须通过用户的「真实点击按钮才能完成,而无法通过脚本自动实现?这样就能减缓蠕虫传播速度了。...除非,用户在点击按钮时会产生一个「特殊数据」,让后端校验它。 但是,XSS 也可以直接调用按钮元素的 click 方法,这样效果和用户点击仍然一样。后端仍无法识别是「脚本点的」还是「用户点的」。...这里为简单,省略了登录态;真实场合下,会话 Cookie 是 HttpOnly 的,无法被 JS 获取到,也就无法让第三方服务器代替发表。...细节: 使用者加载 safebutton.js,引入 SafeButton 类 使用者实例化 SafeButton 对象 A,创建出一个不同源的 iframe 作为按钮界面 用户点击 iframe 按钮

9.1K60
领券