vue实现一个动效柱状图

接手了一个需求的时候，其中有个 UI图是这样的：

按照 PM本来的意思，这张图中只有那几个数字是从接口获取的，而且从接口获取到的每项数字的值，与目前标注的数字相差不会超过 10%，所以柱状图的条形高度不用管，直接一张图片静态的就行了，这确实很省事，三下五除二就弄完。

不过，作为一个老(xian)实(de)正(dan)直(teng)的程序员，怎么可以容忍弄虚作假呢，我心中默默计算了下，用代码把这张图画出来也要不了多长时间，不会耽误项目进度的，于是开搞。

首先，先把图拆解成几份可以用代码画出来的图形，如下：

柱状图形，就是圆角长方形，竖直红色柱与竖直红色柱之间的空白，也是一个竖直的圆角长方形，只不过是透明的，作用是底部构建圆角
底部的基座，是一个水平长方形，只不过这个长方形除了看到的那一部分红色外，还有z-index大于红色竖直长方形、小于透明柱状上半部分，用于遮掩红色柱底部与圆角透明柱底部出现的空白
因为底部基座的高度其实比视觉上第一眼看过去更高的，所以无法使用 border-radius属性产生圆角，否则就露馅了，因而在底部基座的最左边和最右边，还各有一个小的圆角长方形，用于产生圆角让基座的两边看起来圆滑

弄清楚了上述几点后，样式就比较好写了

然后就是各个竖直红色柱的高度计算。

这也很简单，给最高的红色柱定一个高度，其他红色柱以这个最高的红色柱为基准计算高度

例如，最高红色柱定为 200px，最高红色柱的数字值为 987，则每 1个数值对应的 px高度为 200px / 1000，第二根红色柱的数字值为 230，则其高度就为 230 * (200px / 1000)

这样，就能计算出所有红色柱对应的高度了

至于如何让红色柱的高度从 0动态增长到该有的高度，只需要使用一个 CSS3 的 transition属性即可，最开始时将所有红色柱的高度设为 0，然后再使用 js将高度设为该有的值就 ok了

最终实现的效果如下：

本文所实现动画的可运行代码已经放到 Github了，代码的注释算是比较清晰的，有兴趣的可以自行下载运行。

vue实现一个动效柱状图相关推荐

Vue 路由过渡动效数据获取
过渡动效 <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition><rou ...
如何借助SVG+CSS用2个小时撸完一个网易云音乐的动效海报（可控制速度）
因为平时也关注网易UEDC的订阅号,前几天就看到了这么一个动效,主题是<网易云音乐2018年度听歌报告>,内容是一个人在努力蹬车因为构图简单,创意又不错,所以就试了下用SVG+CSS动画实 ...
Fade 数字切换动效
原文链接:http://www.jianshu.com/p/983674e6f4ef 根据原型高度还原的一个动效作品.希望可以通过审核.谢谢. -- 由Bear1494735376123分享欢迎同样 ...
WPF-3D动效-文字球形环绕
原文:WPF-3D动效-文字球形环绕版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/81784 ...
前端实现炫酷动效_20个网页动效设计的炫酷神器
如今很多 UI 设计师不是正在做动效,就正在学着做动效. 动效现在已经无处不在了.有的动效可能是一个微妙的悬停效果,使用 Bttn.css 或者是 Hover Buttons 的帮助下,添加到按钮上, ...
拆解任天堂教科书般的界面动效设计
我们今天来说一说游戏<集合啦!动物森友会>里的动效. 一般来说,一款游戏的界面动效的根本存在意义主要是这几个方面: 第一,反馈.指的是玩家对界面进行操作之后,界面的反应.简单到一个按钮的点 ...
FFmpeg动效实践与探索（文字方框的同步展开及收缩）
当你看到这样的动图时,你会想到这是用FFmpeg做出来的吗? FFmpeg,作为一款强大的视频编辑处理工具,在基础的视频处理上十分可靠,在音视频编解码上大放异彩,那么它在动态效果上的应用怎么样呢,笔者 ...
如何准确的向工程师传达动效设计？
转自:http://www.cocoachina.com/design/20150305/11237.html 如何准确的向工程师传达动效设计? 2015-03-05 09:47编辑:pockry分类 ...
动效引擎_要做动效？这75款动效工具让你无所不能（上）
原标题:要做动效?这75款动效工具让你无所不能(上) 动效这两年崛起非常之迅猛,几乎是网页设计领域最强大的设计趋势之一.无论是在设计师群体还是在用户当中,它的受欢迎程度都非常之高,大家都对它津津乐道. ...

vue实现一个动效柱状图

vue实现一个动效柱状图相关推荐

最新文章

热门文章