分享一个最近做的手绘动画风格 Web 组件 demo

[MissThee]

最近手里的项目都结了，开始摸鱼的日常，在网上搜新奇的 WebUI 组件库，看到一套手绘风格的组件 Wired Elements 蛮有趣的，看源码用 lit-element 和 roughjs 写的，趁此机会了解一下 web-component 式组件的编写，做了一个小 demo 。

总体结构参(抄)照(袭)Wired Elements....就是增加了渲染方式的选择，改成了自己想要的样式，循环绘制的动画。
刚开始做感觉害挺简单的，越做感觉遇到的问题越多。。组件间开始有引用关系又会变的更麻烦。。脑瓜懵

demo 预览：
https://missthee.github.io/hand-drawn-component

[MissThee]

@mlhorizon 心率仪厂家联动😂

[christin]

挺好玩的 默认改成聚焦时抖动就更好了

[yanzhiling2001]

不动最好

[xingyuc]

@superliwei 正解正解

[kasusa]

打开了大佬的网页我的电脑开始哼哼作响

[cxumol]

玩过 蜡笔物理学 (Crayon Physics) 吗

[MissThee]

@kasusa ゴゴゴゴゴゴゴゴゴゴ

[MissThee]

@cxumol 木有，玩过 fancy pants adventure，手绘的风格

[HashV2]

cool~

[kinge]

做的不错，有文档吗

[Thinginitself]

蛮好看的~第二个放上去就抖的方式感觉很好。既不会抖地脑壳痛，又展示了独特的抖啊抖

[LaGeNanRen]

背景要是还动的话，建议换成大间隔的，现在的又密还能动= =
注意一下每一行组件的间距，离的太近了
算了看不下去了，看的眼睛花

[MissThee]

@kinge 文档暂时还没，刚做了一点儿组件试试样子，还没做完，以后空余时间多会补上的

[MissThee]

@Thinginitself 众口难调，打算还是做多种类型，可自选

[MissThee]

@LaGeNanRen 组件默认间距没有特别的调，因为以前用 element-ui 组件库的时候经，常有觉得默认间距大，还要反向写样式穿透调小组件默认间距或高度的情况。。。所以这个没有预留间距，全靠调用组件的人自己控制了。。

[lovelyxiaod]

想知道, 中文字体会怎样

[mscststs]

选择 none. no jitter animation 的时候，switch 组件的颜色出现了 bug

[MissThee]

@lovelyxiaod 会加载的慢。。。http://missthee.com/hand-drawn-component/dist/indexzh.html

[MissThee]

@mscststs 我嚓Σ(O▽O)，细致。已经改掉了，可以正常变色了(•̀ᴗ•́)و

[code4you]

能不能不让他动 我看了一会儿 感觉有点晕