前言
作為一個對UI和動畫敏感的切圖仔，在日常開發之餘，也會關注一些賊好看的圖表庫和插件。
接下來，我將給大家介紹幾款web/python/vue/react裡漂亮得不行的開源庫/實現。
1. 手繪風圖表庫：`roughViz.js`
基於D3(v5), roughjs, 和handy。
1.1 衡量方式
有三種衡量方式：
粗糙度：
線條種類：
線條粗細：
1.2 多種搭配
簡答CDN:
npm:
npm install rough-viz
react/vue:
npm install react-roughviz npm install vue-roughviz
甚至在Python中也可以：
pip install roughviz
1.3 簡單使用
首先定義兩個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: https://blockbuilder.org/jwilber/419fa6d878fe6c0f79a28f9fc72d7ec6
具體用法請參照官方文檔：https://github.com/jwilber/roughViz
2. 抖音字體爆炸特效：`react-three-fiber`
Web和react-native都可用的高性能Threejs for react庫。
可以在React外部驅動渲染循環，而不會產生額外開銷。
最新版本採用了Hooks的寫法，不像以往強行兼容的Threejs,寫起來更加友好。
不止抖音字體爆炸特效，它能實現什麼，源於你的技術和想象力。
以下一部分特效：
如果有人學會了…大佬帶帶？
抖音爆炸特效的實現：
其中用到一個庫：react-spring，這是react最優秀的動畫庫，沒有之一。
官方文檔：https://github.com/react-spring/react-three-fiber
字體爆炸：https://codesandbox.io/s/y3j31r13zz
3. 播放器裡的顏值擔當：`Mini Music Player - VueJS`
國外友人寫的一個Vue.js音樂播放器，好看的不得了。
其中的交互和邏輯，也是非常精煉。
源碼：https://codepen.io/JavaScriptJunkie/pen/qBWrRyg
4. `UI`都誇好的卡片驗證庫：`interactive-paycard`
這個 11 月Vue新庫一發布，就狂攬3k+star，過於優秀。
完整庫名vue-interactive-paycard
React版的作者表示也即將發佈了。
源碼：https://github.com/muhammederdem/vue-interactive-paycard/issues
5. 真*動態可視化數據：`SandDance`
微軟出品，必屬精品
SandDance是使用Vega進行圖表佈局，使用Deck.gl進行WebGL渲染。
能在如此密集的數據量上保持動畫流暢和美觀的，也就微軟爸爸能做到了。
我先跪了，你們隨意。
此外，該庫還有多種使用方式：
- Power BI軟件內使用:
- PowerBI是微軟發佈的一款數據可視化軟件,可以在較短時間內生成各種報表。
- VSCode插件形式:
- 網頁版和React:
官網：https://sanddance.js.org/
體驗：https://sanddance.js.org/app/
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`並把這些代碼都貼上
- 第 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 刀的模型
還有超讚的《這個殺手不太冷》女孩模型
這也太好看了吧。
4. 後記&引用
原本想湊齊十個再發的，但找了好久，都沒什麼開源庫能入我法眼。
懇請大家，推薦幾款騷得不行的開源庫，我來補充補充，謝謝喇。
❤️ 看完三件事
如果你覺得這篇內容對你挺有啟發，我想邀請你幫我三個小忙：
- 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
- 關注公眾號「前端勸退師」，不定期分享原創知識。
- 也看看其它文章
image-20191204172721437
也可以來我的GitHub博客裡拿所有文章的源文件：
前端勸退指南：https://github.com/roger-hiro/BlogFN
