前言
作为一个对UI
和动画敏感的切图仔,在日常开发之余,也会关注一些贼好看的图表库和插件。
接下来,我将给大家介绍几款web/python/vue/react
里漂亮得不行的开源库/实现。
1. 手绘风图表库:roughViz.js
基于D3(v5)
, roughjs
, 和handy
。
1.1 衡量方式
有三种衡量方式:
粗糙度:
线条种类:
线条粗细:
1.2 多种搭配
简答CDN
:
<script src="https://unpkg.com/rough-viz@1.0.5"></script>
npm
:
npm install rough-viz
react/vue
:
npm install react-roughviz
npm install vue-roughviz
甚至在Python
中也可以:
pip install roughviz
1.3 简单使用
首先定义两个div
<div id="vis0"></div>
<div id="vis1"></div>
之后new
两个实例:
new roughViz.BarH(
{
element: '#vis0',
title: "Vehicles I've Had",
titleFontSize: '1.5rem',
legend: false,
margin: {top: 50, bottom: 100, left: 160, right: 0},
data: {
labels: ['1992 Ford Aerostar Van', '2013 Kia Rio', '1980 Honda CB 125s', '1992 Toyota Tercel'],
values: [8, 4, 6, 2]
},
xLabel: 'Time Owned (Years)',
strokeWidth: 2,
fillStyle: 'zigzag-line',
highlight: 'gold',
}
);
new roughViz.BarH(
{
element: '#vis1',
titleFontSize: '1.5rem',
data: 'https://raw.githubusercontent.com/jwilber/random_data/master/owTanks.csv'
color: 'tan',
labels: 'name',
values: 'health',
title: "Overwatch Tank Health",
roughness: 4,
}
);
整个的配置非常简洁,其中:
data
: 数据源,支持简单对象或csv
格式的文件roughness
: 线条粗糙混乱层级。如果调成10,就会变成这样:
线上体验demo
: blockbuilder.org/jwilber/419…
具体用法请参照官方文档:github.com/jwilber/rou…
2. 抖音字体爆炸特效:react-three-fiber
Web
和react-native
都可用的高性能Threejs for react
库。
可以在React
外部驱动渲染循环,而不会产生额外开销。
最新版本采用了Hooks
的写法,不像以往强行兼容的Threejs
,写起来更加友好。
不止抖音字体爆炸特效,它能实现什么,源于你的技术和想象力。
以下一部分特效:
如果有人学会了...大佬带带?
抖音爆炸特效的实现:
其中用到一个库:react-spring
,这是react
最优秀的动画库,没有之一。
字体爆炸:codesandbox.io/s/y3j31r13z…
3. 播放器里的颜值担当:Mini Music Player - VueJS
国外友人写的一个Vue.js
音乐播放器,好看的不得了。
其中的交互和逻辑,也是非常精炼。
4. UI
都夸好的卡片验证库:interactive-paycard
这个11月Vue
新库一发布,就狂揽3k+
star,过于优秀。
完整库名vue-interactive-paycard
React
版的作者表示也即将发布了。
5. 真*动态可视化数据:SandDance
微软出品,必属精品
SandDance
是使用Vega
进行图表布局,使用Deck.gl
进行WebGL
渲染。
能在如此密集的数据量上保持动画流畅和美观的,也就微软爸爸能做到了。
我先跪了,你们随意。
此外,该库还有多种使用方式:
Power BI
软件内使用:PowerBI
是微软发布的一款数据可视化软件,可以在较短时间内生成各种报表。
VSCode
插件形式:- 网页版和
React
:
6. 实现一个自己的AR
: AR.js
+Three.js
+Autodesk 3D
这是个很有意思的实现,大致流程是:
- 手机开启浏览器
AR.js
程序开始ARToolKit
识别到图片标记A-Frame.js
开始调用Three.js
渲染3D模型- 在画面上显示
6.1 实现步骤
1. 查找模型
首先我们先到 https://sketchfab.com
下载自己喜欢的3D模型
2. 下载3D模型
下载glTF
格式(A
框架提供glTF
,OBJ
两个格式官网建议使用glTF
)
3. 创建index.html
并把这些代码都贴上
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
<a-marker type='pattern' url='res/pattern-marker.patt'>
<a-entity position='-3 2 0' text="width: 5; value:I am Psyduck. We are pokemon. We love you"></a-entity>
<a-entity position='0 0 0' gltf-model="url(res/scene.gltf)"></a-entity>
</a-marker>
</a-scene>
</body>
- 第1〜3行:把js套件都约会进来
- 第6行:使用
A-frame
的html
标签添加一个a-scene
摄像头并把AR.js
崁入 - 第7行:标记
Marker
如果标记的Marker
出现在摄像头里就会执行下方的事情 - 第8行:新增你想要跟对方说的话
- 第9行:新增
3D
模型
4. 部署你的应用。
5. 制作一个可供识别的二维码
6. 制作一张实体卡片
7. 扫一扫
原文:AR用AR.js做一個讓另對方 喔喔喔喔! 的小卡片吧!
请欣赏一个价值2199刀的模型
还有超赞的《这个杀手不太冷》女孩模型
这也太好看了吧。
想体验AR.js
的可以放大下面这图,然后用相机扫一扫。
4. 后记&引用
原本想凑齐十个再发的,但找了好久,都没什么开源库能入我法眼。
恳请大家,推荐几款骚得不行的开源库,我来补充补充,谢谢喇。
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
- 点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
- 关注「前端劝退师」,不定期分享原创知识。
- 也看看其它文章
劝退师个人微信:huab119
也可以来我的GitHub
博客里拿所有文章的源文件:
前端劝退指南:github.com/roger-hiro/… 一起玩耍呀。~