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

[MissThee]

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

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

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

[aitaii]

看了一会儿，心脏受不了

[ToPoGE]

你让它不动，我还稍微能忍下

[abc635073826]

楼主爱折腾的思维值得鼓励

[MissThee]

@ToPoGE 加入抖动，躁起来

[turan12]

可以可以，louzhunb

[varzy]

建议抖音收购（逃

[iOCZ]

是不是性能大户啊。。。

[love]

不出所料，基本上只要是动的网页 cpu 都 100%

[collen]

好人才建议上交给国家

[lucybenz]

这种抖动 一页最多放一个吧，群魔乱舞确实心脏难受

[theprimone]

不动最好

[superliwei]

我觉必须得抖，要的就是这个效果，挺不错的。
我建议楼主把这个设计成主题样式是可以替换的，比如 [普通主题] 、 [摇滚主题] ！

[pocketz]

蛮好的，这种应该属于比较细分的领域
看个人时间，可以坚持下

[9yu]

这个风格很不错！

[7gugu]

好看，可惜不支持中文字体😂

[Bijiabo]

感觉蛮好的！

[MissThee]

@7gugu 之前加了方正喵呜中文字体，和这个风格很搭，但是全量字体文件有 3M，加载起来有点慢，而且方正喵呜的英文部分感觉不太好看，用 comic 字体来替代英文部分感觉很适合。所以我需要加载多个字体，其中还有一个体积比较大，解决这个问题的情况…就…有点尴尬
一开始想先显示默认字体，加载完后替换新的。因为三方字体和默认字体大小不一样，加载完字体，浏览器替换后，被文字撑开的 div 会改变大小，所以我需要在每个字体加载完后，重绘边框。现在只知道加载完了所有字体后的事件，或加载首个字体后的事件，就是不会搞加载完每个字体后的事件😓。
如果用字蛛抽取字体，因为有输入框可任意打字也不好判断抽取哪些。
github 静态页就先没使用中文字体😅，以后找到更好的字体加载、渲染过渡方法再加中文字体

[ALVC666]

喜欢这种风格
不过我也觉得没必要抖动哈哈哈
静态就很不错 收藏了
下次写自己的小 demo 试试

[thetbw]

不错

[mlhorizon]

建议跟浏览者心跳同频抖动，让用户欲罢不能，进一步提高用户粘性 [狗头]