面试官: 用css实现android系统的loading动画
源码: github.com/any86/any-u…
ios/android
web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环". 今天我们用svg实现android的"环"动画, 下节课实现ios的"菊花".
注意: gif帧数少的原因, 实际动画效果是很平滑的.
demo
xml(svg)
<svg width="36" height="36" viewBox="0 0 50 50" class="a-loading-android"><circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle>
</svg>
复制代码
首先我们定义svg的画布尺寸为50x50, 在浏览器中缩放为36x36显示(这个36你可以根据实际需要调整), 定义环的圆心坐标为25,25, 半径为20(算下周长大概为125, 后面会用到), 颜色为currentColor获取父元素的color属性的值, 环的宽度为5像素, 看下在没写css前的效果:
scss
.a-loading {&-android {animation: rotate 2s linear infinite;transform-origin: center center;>circle {display: inline-block;animation: dash 1500ms ease-in-out infinite;stroke-linecap: round; // 端点是圆形color: currentColor;}@keyframes rotate {100% {transform: rotate(360deg);}}@keyframes dash {0% {stroke-dasharray: 1, 200;}50% {stroke-dasharray: 100, 200;stroke-dashoffset: -45;}100% {stroke-dasharray: 100, 200;stroke-dashoffset: -124;}}}
}
复制代码
stroke-dasharray
先解释stroke-dasharray
, 他是用来定义虚线的, 比如stroke-dasharray="50, 20"
表示实线部分为50, 间隙20的虚线:
试想一下, 如果环也用虚线表示, 并且让单位实线部分的长度在环的周长范围内变化,这不就实现了(半环/满环等形态), 下面分别是stroke-dasharray
的值为25, 200
/ 50, 200
/ 100, 200
: 注意: 这里的200
是随意定义的, 表示虚线的间隙, 只要值大于环的周长即可.
stroke-dashoffset
偏移, 值为正数的时候, 虚线逆时针回退, 负数顺时针前进(左图的stroke-dashoffset:0, 环的起点在3点方向, 右图设置为-10以后, 环的起点被顺时针偏移了一段距离):
因为动画中, 环在增加长度的同时尾部在收缩长度, 所以需要配合stroke-dashoffset
实现.
动画的3个关键时刻
**0%**的时刻
让圆环只呈现一个点, 为了让循环一周后动画不突兀(你可以改成0对比下效果).
**50%**的时刻
为了让圆环呈现80%的环, 所以设置实线部分长度为100(125*0.8, 125是周长): stroke-dasharray: 100, 200;
, 同时尾部在收缩, 所以设置stroke-dashoffset: -45;
.
**100%**的时刻
回到一个点的状态, 和0%状态一致, 这样动画循环起来不突兀, 但是从50%到100%的动画只是"尾部收缩", 所以我们用stroke-dashoffset:-124
实现,125-124=1
正好是一个像素, 好了动画到此就实现完毕了.
整体旋转
为了和安卓系统的动画一致, 让整体也进行旋转. 这里代码比较简单不赘述.
animation属性的扩展
如果大家仔细看过css的animation
的文档, 会发现animation
可以同时支持多个过度动画, 比如animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite;
, 用","分割多个动画.
所以我们其实还可以对上面的动画进行扩展, 比如旋转的同时还有颜色变化:
&-android {animation: rotate 2s linear infinite;transform-origin: center center;>circle {display: inline-block;// 增加颜色变化的代码animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; stroke-linecap: round;color: currentColor;}@keyframes rotate {100% {transform: rotate(360deg);}}@keyframes dash {0% {stroke-dasharray: 1, 200;}50% {stroke-dasharray: 100, 200;stroke-dashoffset: -45;}100% {stroke-dasharray: 100, 200;stroke-dashoffset: -124;}}@keyframes color {0%,100% {stroke: #6b5c5b;}40% {stroke: #0057e7;}66% {stroke: #008744;}80%,90% {stroke: #ffa700;}}}
复制代码
本文代码参考iview, 一个vue框架.
转载于:https://juejin.im/post/5d37fe7de51d455c8838e23d
面试官: 用css实现android系统的loading动画相关推荐
- css实现加载中loading动画效果
1 效果 2 实现原理 原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
- 面试官:生产环境碰到系统CPU飙高和频繁GC,你要怎么排查?
点击上方"小哈学Java",选择"星标" 回复"666",领取100G独家整理的学习资料哟~ 来源:http://t.cn/EI9JdBu ...
- Android实现菊花loading动画
在一些网络请求中,用户操作中,我们往往需要一些耗时等待的动画,一开始本来用一个比较酷炫的三方加载动画,后来因为嫌弃太丑,不得不切换使用原始的菊花加载动画,可谁知UI给出一系列的菊花动画图片, 虽然动画 ...
- 面试官:CSS垂直居中还有什么另类方法?求职者:不太了解了
今天面试了一个前端实习生,我问了一个比较简单的问题,就是css如何实现元素垂直居中的问题,但是要说出多种方案.其实他说的不错,基本上说到了flex布局,grid布局等下面提到的布局.还不错,但是这几种 ...
- 面试官问:平时碰到系统CPU飙高和频繁GC,你会怎么排查?
点击上方"方志朋",选择"设为星标" 做积极的人,而不是积极废人 处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过 ...
- 京东面试官问哭的秒杀系统考点
什么是秒杀系统? 秒杀场景一般会在电商网站举行一些活动或者节假日在12306网站上抢票时遇到.对于电商网站中一些稀缺或者特价商品,电商网站一般会在约定时间点对其进行限量销售,因为这些商品的特殊性,就是 ...
- 面试官:生产环境碰到系统CPU飙高和频繁GC,你要怎么排查? 白天不懂夜的黑
处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题.当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警.本文主要针对系统运行缓慢这 ...
- 面试官:CSS如何画一个三角形?原理是什么?
一.前言 在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮 通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢? ...
- 【运维面试】面试官:你们公司的系统应用架构图是什么样的?
前言 很多公司并没有一个明确的系统应用架构图,需要啥用啥. 系统应用架构图是需要从业者自己根据现有的架构抽象出来的. 而且系统应用架构图都是为了实现公司业务存在的,如果不涉及到业务,那无非就是一些技术 ...
最新文章
- 8. An Introduction to MCMC for Machine Learning (1)
- moreunit_MoreUnit与MoreUnit
- 化工计算机软件基础考试题,2013年化工工程师基础知识网友版真题(下午卷)...
- android 百分比loading,牛逼的loading加载效果
- 广州科二化龙考场_广州市机动车驾驶人化龙考场交通路线攻略
- PMP/PRINCE2/IPMP/软考,主流项目管理认证对比
- Python 正则表达式提取文件后缀名
- ARM处理器开发详解(一)
- 利用华为手机给台式机提供网络
- AndroidStudio软件用法详细说明
- oracle数据库之数据的增删改以及简单的单表查询
- 治疗抑郁症,这款聊天机器人是认真的
- 读《自控力:斯坦福大学最受欢迎心理学课程》体会
- 基于51单片机的小区智能防盗门禁密码锁 proteus仿真程序设计
- OP-TEE基本的从芯片设计到给客户的安全问题浅析
- Jmeter 压测分析
- Apipost 一款值得使用的利器
- 用DVD片刻录多部VCD影片
- 超强视频剪切工具Boilsoft Video Splitter7.02.2中文免费绿色版
- 易的核心理念之天道左旋、地道右旋
热门文章
- linux安装mysql出错( file /usr/share/mysql/czech/errmsg.sys from install of MySQL-server-5.5.31-2.el6.i6)
- 64位ubuntu 12.04下如何解决中文乱码的问题
- 【Ubuntu-Tensorflow】InvalidArgumentError GPU不能使用的问题
- Matlab坐标图像隐藏横纵坐标的方法
- RHEL/CentOS/Fedora各种源
- Bash shell 学习笔记六
- 南加州大学机器视觉实验室_机器学习带动南加州爱迪生的变革
- match与index——vlookup的加强版
- 求职OMG——大学生就业指导与技能
- 多媒体表示、描述、编码以及通信的相关规定和标准课程总结