用css动态实现圆环百分比分配——初探css3动画
最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额。要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态!
在mdn把新特性gradients(渐变)、transitions(过渡)、 animations(动画)
都看了一遍,不禁感叹css牛逼!这三个新特性加上canvas,仿佛一瞬间有了正面刚js的能耐。用js很难过渡得那么完美,而且浏览器的css渲染明显比用js性能好得多。
然后看了张鑫旭(传说中玩转css的那个男人)的一篇关于圆环的博文,拍案叫绝。链接=>3种纯CSS实现中间镂空的12色彩虹渐变圆环方法
只能说服气!除了灵活运用各种css特性之外,鑫大佬最让我佩服的是他的创造性思维。会让你不禁感叹:卧槽,还有这种操作?!想到了高中物理老师每次装完逼讲的一句话:思想有多远,就能走多远。
虽然demo跟我的需求不太一样,问题还是没有解决,但我认真看完之后还是学会了很多,对我后面的代码帮助很大。鑫大佬这篇博文的重点还是在渐变,而我需要动态平缓连续得实现颜色的分配,比如原本整个环是绿色,然后慢慢地60%被红色占了,而且整个过程要平滑。跟我的需求最接近的就是倒计时那个demo,linear-gradient线性渐变实现的多彩圆环demo,但不是连续的过程,而是通过剪裁,每次剪30度。
看了其他一些博客分享,好像也没有找到合适的,那没办法了...只能自己想一个!
因为再写这个demo的时候,发现小程序和H5在css表现上还是有些差异(具体有哪些差异,在文末总结),所以还是贴H5代码好了。
不多说,直接上代码
代码部分
//html部分
<div class="circle"><div class="circle-left"></div><div class="circle-right"></div><div class="circle-bottom-left"></div><div class="circle-bottom-right"></div>
</div>
<div class="info">¥4500/¥5000</div>
//css部分
.circle {-webkit-mask: radial-gradient(transparent 150px, #000 150px);width: 400px;height: 400px;overflow: hidden;border-radius: 50%;position: relative;
}.circle-left {width: 50%;height: 100%;background: #24B39B;transform-origin: 100% 50%;position: absolute;left: 0;z-index: 0;
}.circle-right {width: 50%;height: 100%;background: #24B39B;transition: transform 1s linear;transform-origin: 0% 50%;position: absolute;right: 0;z-index: 2;
}.circle-bottom-left {width: 50%;height: 100%;background: rgb(234, 67, 15);position: absolute;left: 0;z-index: -1;
}.circle-bottom-right {width: 50%;height: 100%;background: rgb(234, 67, 15);position: absolute;right: 0;z-index: 1;
}.info {width: 400px;height: 400px;line-height: 400px;text-align: center;margin-top: -400px;
}
//js代码
window.onload = function () {var red = 4500, total = 5000 //红色区域代表的金额和总金额var percent = red / totalvar right = document.getElementsByClassName('circle-right')[0]var left = document.getElementsByClassName('circle-left')[0]if (percent <= 0.5) { //红色区域不超过一半right.style.transform = `rotate(${percent * 360}deg)`} else { //红色区域超过一半的情况,重点部分right.style.transform = `rotate(180deg)`right.style.transition = `opacity 0s step-end 1s, transform 1s linear` //timing-function需要设为linear来达到视觉上的平缓过渡right.style.opacity = 0left.style.transition = `transform ${(percent - 0.5) / 0.5}s linear 1s`left.style.transform = `rotate(${percent * 360 - 180}deg)`}
}
效果图
思路
st=>start: 开始
e=>end: 结束
con=>condition: degree<=180?
op1=>operation: 右绿旋转
op2=>operation: 右绿旋转180度,opacity变为0,然后左绿旋转st->con
con(yes)->op1->e
con(no)->op2->e
难点在于红色区域大于一半的情况,左右绿色半圆的衔接,过渡要自然,不能让人看出什么明显的破绽。
**这种情况我的做法是:4个半圆(红绿各两个)的z-index设为左红<左绿<右红<右绿
两个绿半圆的transform的time-function(时间函数)统一设为linear(线性)。右绿旋转180度(1秒)后opacity立即变成0(时间函数step-end),这样就不会挡住左红露出。然后左绿开始转(transform延迟1秒执行,因为要等待右绿转完),它转的时间要根据度数动态控制,比如总共要转270度,右绿转了180度,所以左绿只需要转90度。这就好办了,为了保持右绿的旋转速度,时间和度数要成比例,右绿转180度用1s,左绿转90度只能用0.5s
优点
1. 不需要js代码动态实现动画(js只用来计算度数和触发transition)
2. 因为对js几乎没什么依赖,浏览器内核直接渲染,性能较好,过渡自然
3. 代码量很少
不足
1. 因为是css3的属性,兼容不会太好
2. 时间函数只能用线性linear,用默认的ease(不匀速)会衔接不上
3. 只能两种颜色分布,再加一种的话行不通
有更好办法实现相同效果的大佬,欢迎留言!
问题探究&解决
虽然效果图gif画质有点感人,但还是可以发现一个问题:内环边缘明显很粗糙!这个要怎么解决呢?
中间这个透明遮罩的代码是`-webkit-mask: radial-gradient(transparent 150px, #000 150px);
我的做法就是把transparent 150px
改成transparent 148px
,就是说空出一两个像素点,让粗糙的部分虚化。
至于为什么会出现粗糙,额。。。我觉得是150px这一层上了太多颜色,加上本来画弧圈就没有防锯齿处理,色素点可能会拥挤,加剧了锯齿状这种效果。具体是什么原因,或者有更好的解决办法,欢迎大佬指教。
修改后的效果图
是不是明显好很多~
上文提到的小程序的css和h5的差异,经过再一次的实验,发现不是小程序内核渲染的问题,应该是微信开发者工具显示的问题。。。希望尽快能得到改善,不然对开发人员影响挺大的
这个info的盒子margin-top负数在工具中显示翻不上去,但内容50000上去了.
过了几秒再点(啥都没干),这个info的盒子又跑到这里来
为了验证这个info的盒子到底有没有上去,我加了一个红色的盒子,发现并没有被info盒子挤掉
取消info的margin-top属性,红色的盒子被挤掉,内容50000也下来了
终于!!!原来都是开发者工具摆的乌龙,其实info盒子一直在上面,只是调试不能正常显示他的位置。。。
话说回来,小程序不能获取DOM节点操作DOM,突然觉得只能数据驱动,不能操作DOM节点有时也挺麻烦的,transition那些需要动态改的样式只能写到style了。。。
最后,看好小程序,希望各种问题能尽快完善,越来越好。
用css动态实现圆环百分比分配——初探css3动画相关推荐
- CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码...
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
- html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
- Vue实战--动态圆环百分比进度条
最近在开发小程序的时候,碰到一个实现圆环百分比进度条的需求,类似如下设计图: 小白的我感觉实现起来有难度,于是上百度看看别人是怎么做的,结果没找到一个满意的,要不是静态的实现,就是需要用到比较多的 ...
- css3动画之——动态的省略号
css3动画之--动态的省略号 今天学习了CSS3动画,涉及到的属性:@keyframes,animation,animation-duration,animation-name,animation- ...
- css画圆, 如何用纯css实现一个动态画圆环效果
最终的效果是:用纯css实现动态画圆的动画效果 html结构如下: <div class="wrap"> <div class="circle" ...
- css 动态rem_【面试题】CSS知识点整理(附答案)
目录 伪类和伪元素 实现固定宽高比(width: height = 4: 3)的div,怎么设置 CSS选择器 CSS解析规则 flex: 1 完整写法 display: none和 visibili ...
- Android 自定义 圆环,一步步做Android自定义圆环百分比控件
马上要校招了,有点儿慌,写个自定义控件压压惊 效果图 本来写了一大串近段时间的感慨,还是觉得废话少说比较不容易被喷,直接上效果图 圆环百分比View.gif 就是这个样子,下面记录一下我的编写经历,撸 ...
- 开源超美css动态背景 可直接引入html文件使用 含注释、可更改
开源超美css动态背景 可直接引入html文件使用 含注释.可更改 1.背景样式 本背景为动态蜘蛛网背景. 上图: 2.如何在html里面引用,作为html背景 1文件目录 放在同一目录下 2 在in ...
- 动态绘制圆环和扇形的源代码
动态绘制圆环和扇形的源代码可以调节各种相应的属性并且由你根据需要进行扩展. 源文件下载 转载于:https://www.cnblogs.com/vilyLei/articles/1394186.htm ...
最新文章
- leetcode算法题--树的子结构
- 【CCF】201612-1中间数
- 【Clickhouse】Clickhouse PRIMARY KEY, CONSTRAINT, identifier, column declaration, INDEX
- Visual Studio Code 11 月 Python 扩展更新
- Ztree勾选节点后取消勾选其父子节点
- 李学斌:广告的罪恶与救赎
- Jim exclaimed, Damn man, this isn’t funny cheap air max 90
- Ele SOA Container
- (20200921 Solved)ConnectionResetError: [Errno 104] Connection reset by peer
- 安卓开发就等同于Java编程么?不懂的进来看看吧
- GD32汽车诊断KWP 协议/ ISO-14230测试
- 熬夜爆肝整理 400 页 《Python 修炼之道》,一本高分原创高清电子书送给你!
- linux win10共存,折腾 ubuntu 与 win10 共存
- scilab读取txt数据的方法
- Java常用集合List、Map、Set介绍以及一些面试问题
- “她时代”致敬她力量女性论坛 听听她们怎么说
- 广东省工业和信息化厅关于组织开展2022年创新型中小企业评价、专精特新中小企业认定和复核工作的通知
- linux学习札记2011.04.12
- matlab编程入门学习(2)
- PHP 生成 ppt,PHP创建PowerPoint2007文档的方法
热门文章
- 计算机术语rander是什么意思,Rendering Engine,呈现引擎还是渲染引擎?
- 推荐算法实践-章节三-推荐系统冷启动问题-阅读总结
- 【已解决】iphone和mac的备忘录、提醒事项、日历等无法同步。MacBook点击“更新Apple ID 设置”无反应。
- 1.5 synchronized类锁和对象锁快速区别
- 去中心化金融的无常损失
- 【目标检测】YOLO系列——YOLOv1详解
- 从零开始 飞机大战(五)实现子弹定位和动画
- 线程、多线程、线程池总结
- [SCOI2016]幸运数字
- 用户运营:5步学会用户留存数据分析