material design 之 ripple(波纹)效果
来源:互联网 发布:福利直播软件 编辑:程序博客网 时间:2024/06/05 21:08
初衷:由于项目需要,学习Google的material design(感觉都是设计相关啊有木有~接触前端近一年再次感受到了前端是大杂烩的懵圈),其中的涟漪效果用户体验相当好,就以muse ui框架(基于vue), 为例学习, 原生实现可看materalscss
实现思路:
1、获取鼠标点击位置(即波纹源相对offsetParent节点)的位置
代码实现: src/utils/domUtil.js
2、计算波纹最大半径
为什么要单独列出来呢,这里必须要学(吐)习(槽)muse ui作者的严谨思维
实现方式:
(1)(muse ui)计算距离offsetParant节点四个角最远的距离 * 2( 相当精确···)
(2)offsetParent最长宽高 * 2(个人想法:简单快捷~)
Math.(width, height) * 2
3、添加波纹效果节点
为什么需要添加节点而不用直接添加class?实现重复点击的连续波纹效果。
muse ui(src/internal/touchRipple): 所有的点击元素都封装在rouchRipple组件(外层套wrapper)中,circleRipple组件 则是带transition的div, 通过继承颜色、大小实现波纹效果。而materialscss 在可点击元素内部添加节点
ripples数组记录产生的波纹div
利用vue的transition便签设置css波纹效果(即 scale(0), opacity: 0 )
通过监听touchleave事件,删除数组元素,重新渲染v-for渲染实现波纹效果(原生实现, 从渲染效率角度推荐transform而非 animation)
延伸思考(个人走的弯路):
1. 按vue数组更新检测,在执行splice应该直接刷新视图,为什么动画能执行后再删除节点?
想着想着竟然从vue源码的render函数里寻找根本原因,花了1个多小时分析vue结构,查找代码,脑子里只剩下vue文件整体结构,又联想到vue 2.x实现了虚拟dom,抽象程度较高,找到答案的时间代价太大~于是改变思维从官方文档查找,终于在列表过渡找到答案···
额外收获:
1. window.requestAnimationFrame: 实现动画刷新。
2. muse-ui的下划线展开效果,原以为还得写长度、位置、transform,结果只用设置scale(0 - 1) 就行,css不熟练时,论源码学习的好处···
- material design 之 ripple(波纹)效果
- android material design之点击波纹效果(ripple)
- Material Design Button波纹效果
- Material Design——Touch feedback Ripple波纹动画
- Material Design Ripple Button
- Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计
- Android实现水波纹效果波纹效果(Ripple)
- 触摸反馈(波纹效果Ripple)
- Material Design风格的水波涟漪效果(Ripple Effect)的实现
- android自定义控件波纹ripple效果
- Material Design之动画效果
- design点击波纹效果
- Material Design Ripple 标签的简单使用
- 为什么我的Material Design风格列表点击时没有波纹扩散效果
- Material Design之水波纹效果
- Material Design系列之动画效果
- Android 5.0+ 自定义普通按钮的ripple波纹效果
- Android 5.0+ 自定义普通按钮的ripple波纹效果
- matlab2c使用c++实现matlab函数系列教程-sqrt函数
- 选择标签中不包含指定标签的其他元素
- 编程范式13 笔记
- diff命令---待完善
- java代码转Smali代码
- material design 之 ripple(波纹)效果
- 162. Find Peak Element
- @RequiresPermissions 控制权限的异常处理以及Ajax方式请求时返回json
- 不规则卷积神经网络
- 插入、冒泡、归并、堆排序、快排总结
- Java学习线路
- 引用作为返回值的
- 关于EOS的部署
- opencv 实现任意角度的透视变换