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

自己做个 Material Ripple 效果按钮

你看看这圆润外框,这活泼颜色 ♂︎,这似乎汁水四溢效果,是不是像极了你们欠我那个赞 :) ? 我们可以完全做到一样效果!...,我们会等下直接用 JavaScript 去动态设置,而样式定义,就在如下一些代码中解决: button { position: relative; overflow: hidden...同时,overflow: hidden 可以帮助我们防止 Ripple 效果超出按钮轮廓。...Ripple Ripple 效果实际上就是一个半径不断扩展标准圆,而被沿着按钮外框裁切掉。...似乎也没什么可以改进(误) 支持更多种类 Material Button Ripple 效果 将 MutationObserver 推广应用在别的地方 应用这段代码(当时也是无聊,学了一下,而我却也没有什么网站有很多按钮控件

1.4K30
您找到你想要的搜索结果了吗?
是的
没有找到

Android实现倒计时按钮效果

最近有人问我如何实现倒计时按钮功能,例如发送验证码,我记得有个CountDownTimer,因为好久没用过了,自己就写了一个,代码如下 new CountDownTimer(10000, 1000)...void onFinish() { btn2.setEnabled(true); btn2.setText("发送验证码"); } }.start(); 点击按钮后开始倒计时...,貌似很简单啊,但是运行起来发现有一些问题,先给大家看效果图 ?...这里我们可以看到8这个秒数没有出现,并且最后1秒时间有些长,每次点击开始倒计时时候偶尔就会出现少一个数字问题,所以说这个东西是不精确,网上也有很多人再说,那么有没有其他实现思路呢?...这里我们来自定义一个倒计时按钮 public class TimeButton extends Button implements View.OnClickListener { private long

79720

Android仿google now效果呼吸按钮

呼吸按钮是我最早接触到为view添加动画效果需求,刚刚参加安卓开发工作,要求设计一个好看语音按钮效果,就有了这个成果,但是后来又改方案了,所以我也就没有对该按钮进行封装为一个自定义按钮,本文主要是展示一种合理组合利用...animation来实现一些好看动画效果,只是一种思路。...实现该效果,重要是我们要如何实现这种动态呼吸效果,因为是一种非线性运动,直接实现起来有些麻烦,特别是对于像我刚刚入行菜鸟来说。...,代码很简单,在MainActivity中,对按钮设置点击事件,唤起开始动画- 执行呼吸动画- 唤起结束对话。...,有兴趣可以把呼吸按钮封装一下,做成一个自定义按钮来使用。

1.3K30

让View具有减速效果动画——FlingAnimation

在松手后,会继续有动画效果,逐渐减慢直至停止,是不是和现实生活中很类似?因为有摩擦力,所以会不断减少,这时高中老师教给我们牛顿力学可以发挥用场了。 再来看下本文最终demo示例: ?...如果需要使用dp转pixel,可以使用下段代码: floatpixelPerSecond=TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpPerSecond...Demo示例代码 学完了理论知识,就看一下代码了,布局很简单,就一个ImageView,将touch事件交给了GestureDetector,然后在onFling()方法中实现FlingAnimation...动画;有一点需要注意是,FlingAnimation改变是transitionX和transitionY属性,为了限制在屏幕内动画,因此计算了x和y方向最大值,具体代码如下: class FlingAnimationActivity...onTouchEvent(event) } }} 关于代码,请见https://github.com/wangli135/ClimbDemo/tree/master/jetpackdemo

1.2K20

WPF 点击按钮时更改按钮样式界面效果 XAML 实现方法

在 WPF 中按钮 Button 将会吃掉路由事件,此时 EventTrigger 如果通过 RoutedEvent 是 MouseLeftButtonDown 那么将会拿不到路由事件,也就触发不了,...简单解决方法就是通过 VisualStateManager 配合 VisualState 来实现 实现效果如下,所有代码都是 XAML 代码 ?...按钮样式生效,因此我将这个样式放在需要使用容器里面,这样才不会干扰其他容器内元素 接着新建一个按钮,如下代码 <StackPanel.Resources...原理是在依赖属性里面,其实属性是一个属性列表,将会取优先级最高一个,而优先级是这样排序 属性系统强制 活动动画或具有 Hold 行为动画 本地值 TemplatedParent 模板属性

4K10

单标签下日间黑夜模式切换按钮效果

前不久,在网上看到这么一张非常有趣图: 想必很多同学都看到这张图,是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯视频。...原效果用了大量 HTML 标签,大量 SVG 元素以及 350 行 CSS 完成上述效果。 而本文,我们将尝试优化一下代码,尝试仅仅使用一个标签,完成上述效果。...拟态阴影 先把整个按钮形状确定下来,我们需要这样一个整体拟物形状: 可以看到,这个造型非常立体。这里核心是 -- 利用阴影,构建拟态效果。 怎么操作呢?...其效果图如下: 为了实现最终点击切换,我们可以把夜间效果下,按钮样式,写在一个新 class 内,这样,后面只需要在点击过程中,去切换这个 class 即可。...: 添加过渡效果以及切换效果 最后,只需要加上一些过渡效果以及点击切换时,元素样式类名变化 JavaScript 代码即可。

27521

如何写出更具有Python风格代码

二、牢记 PEP8 我不是要求你完全遵循 PEP8,而是要求遵循其中大多数规则,何况现在有很多自动格式化工具,足以让你代码更加美观,我们 Python 之父也说过:阅读代码频率远远高于写代码频率...任何普通程序员都可以编写计算机可以理解代码。只有好程序员可以编写人类可以理解代码。 ?...迭代器是一个更笼统概念:任何一个对象只要它所属具有__next__方法(Python 2是next)和具有返回 self __iter__方法都是迭代器。...生成器是通过调用具有一个或多个 yield 表达式函数而构建,并且该函数是满足上一段对iterator 定义对象。...他们真正区别是:当你需要一个具有某些复杂状态维护行为类,或者想要公开除__next__(和__iter__和__init__)之外其他方法时,你就需要自定义迭代器,而不是生成器。

55510

实现购物车商品数量+1、-1按钮效果

需求:楼主最近在做一个商城类APP,购物页面和购物车中都要实现一个+1、-1按钮功能,用于动态来指定商品数量 废话不多说,开始撸码: 1.自定义一个AddSubView继承于线性布局,因为布局文件中要使用就实现两个参数构造方法...android.widget.TextView; /** * Created by xpf on 2016/11/22 :) * Wechat:18091383534 * Function:自定义购物车增加删除按钮...addNumber(); break; } // Toast.makeText(mContext, "当前值为...主要实现就是上面的代码,布局很简单我就不贴了,最后附上demo下载地址:下载demo 需要去下载。...效果展示: ? 由于本人水平有限,难免会出现一些问题,如果有任何问题或者更好想法都可以一起分享学习,欢迎打扰!

1.3K10

Js+Css做一个可弹起压下效果按钮

好几天没写js和css了,昨天看一个大神博客时候无意中看到他一个效果很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习过程! 效果: ? 我们今天做一个这样按钮!...我首先说一下我思路,我刚开时看到时候在想,无非就是画一个背景阴影,然后利用js改变阴影宽度,但是这样有一个问题就是上面的字体不会改变,我开始是做成了这样: ?...这里很明显就看出来了是有问题,上面的字体没有改变位置,说明我思路是不对,然后我在想,那么既然不改变阴影宽度,只能是改变按钮本身位置了,但是他在页面上怎么改变按钮位置呢?...给他一个相对固定位置不就行了吗?于是就想到最外侧加一个div就可以了! 源码: <!...这个其实主要用到没有什么新技术,只是一些不是很常用css,加阴影关键字: box-shadow 这个关键字可以直接打扫W3Cschool里面看详解,这里就不班门弄斧了!

1.6K20
领券