作者 | 前端勸退師
責編 | Elle
作為一個對UI和動畫敏感的切圖仔，在日常開發之余，也會關注一些賊好看的圖表庫和插件。
接下來，我將給大家介紹幾款web/python/vue/react里漂亮得不行的開源庫/實現。
手繪風圖表庫：roughViz.js
基于D3(v5), roughjs, 和handy。
1.1 衡量方式
有三種衡量方式：
粗糙度：
線條種類：
線條粗細：
1.2 多種搭配
簡答CDN:
< src= "https://unpkg/rough-viz@1.0.5"></ >
npm:
npminstall rough-viz
react/vue:
npminstall react-roughviz
npminstall vue-roughviz
甚至在Python中也可以：
pipinstall roughviz
1.3 簡單使用
首先定義兩個div
< divid= "vis0"></ div>
< divid= "vis1"></ div>
之后new兩個實例：
newroughViz.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',
}
);
newroughViz.BarH(
{
element: '#vis1',
titleFontSize: '1.5rem',
data: 'https://raw.githubusercontent/jwilber/random_data/master/owTanks.csv'
color: 'tan',
labels: 'name',
values: 'health',
title: "Overwatch Tank Health",
roughness: 4,
}
);
整個的配置非常簡潔，其中：
- data: 數據源，支持簡單對象或csv格式的文件；
- roughness: 線條粗糙混亂層級。如果調成 10，就會變成這樣：
線上體驗demo:
https://blockbuilder.org/jwilber/419fa6d878fe6c0f79a28f9fc72d7ec6
具體用法請參照官方文檔：https://github/jwilber/roughViz
抖音字體爆炸特效：react-three-fiber
Web和react-native都可用的高性能Threejs for react庫。
可以在React外部驅動渲染循環，而不會產生額外開銷。
最新版本采用了Hooks的寫法，不像以往強行兼容的Threejs,寫起來更加友好。
不止抖音字體爆炸特效，它能實現什么，源于你的技術和想象力。
以下一部分特效：
如果有人學會了...大佬帶帶？
抖音爆炸特效的實現：
其中用到一個庫：react-spring，這是react最優秀的動畫庫，沒有之一。
官方文檔：https://github/react-spring/react-three-fiber
字體爆炸：https://codesandbox.io/s/y3j31r13zz
播放器里的顏值擔當：Mini Music Player - VueJS
國外友人寫的一個Vue.js音樂播放器，好看的不得了。
其中的交互和邏輯，也是非常精煉。
源碼：https://codepen.io/JavaJunkie/pen/qBWrRyg
UI都夸好的卡片驗證庫：interactive-paycard
這個 11 月Vue新庫一發布，就狂攬3k+star，過于優秀。
完整庫名vue-interactive-paycard
React版的作者表示也即將發布了。
源碼：https://github/muhammederdem/vue-interactive-paycard/issues
真*動態可視化數據：SandDance
微軟出品，必屬精品
SandDance是使用Vega進行圖表布局，使用Deck.gl進行WebGL渲染。
能在如此密集的數據量上保持動畫流暢和美觀的，也就微軟爸爸能做到了。
我先跪了，你們隨意。
此外，該庫還有多種使用方式：
- Power BI軟件內使用:
- PowerBI是微軟發布的一款數據可視化軟件,可以在較短時間內生成各種報表。
- VSCode插件形式:
- 網頁版和React:
- PowerBI是微軟發布的一款數據可視化軟件,可以在較短時間內生成各種報表。
官網：https://sanddance.js.org/
體驗：https://sanddance.js.org/app/
實現一個自己的AR: AR.js+Three.js+Autodesk 3D
這是個很有意思的實現，大致流程是：
- 手機開啟瀏覽器；
- AR.js程序開始；
- A-frame.js開始調用Three.js渲染 3D 模型；
- 在畫面上顯示。
6.1 實現步驟1. 查找模型
首先我們先到 https://sketchfab下載自己喜歡的 3D 模型
2. 下載 3D 模型
下載glTF格式（A框架提供glTF，OBJ兩個格式官網建議使用glTF）
3. 創建index.html并把這些代碼都貼上
< src= "https://aframe.io/releases/0.9.0/aframe.min.js"></ >
< src= "https://rawgit/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></ >
< >THREEx.ArToolkitContext.baseURL = 'https://rawgit/jeromeetienne/ar.js/master/three.js/'</ >
< bodystyle= 'margin : 0px; overflow: hidden;'>
< a-sceneembeddedarjs= 'sourceType: webcam; debugUIEnabled: false;'>
< a-markertype= 'pattern'url= 'res/pattern-marker.patt'>
< a-entityposition= '-3 2 0'text= "width: 5; value:I am Psyduck. We are pokemon. We love you"></ a-entity>
< a-entityposition= '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模型
7. 掃一掃
原文：AR 用 AR.js 做一個讓另對方 喔喔喔喔! 的小卡片吧![1]
請欣賞一個價值 2199 刀的模型
還有超贊的《這個殺手不太冷》女孩模型
這也太好看了吧。
聲明：本文為作者投稿，版權歸作者個人所有。
