分享一个最近做的手绘动画风格 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]

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

[MissThee]

@mlhorizon 心率仪厂家联动😂

[christin]

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

[40EaE5uJO3Xt1VVa]

不动最好

[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]

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

[MissThee]

@code4you 预览页顶部可以切换动画类型，可以不动

[code4you]

@MissThee 上面 3 个选项 被忽略了 当初感觉字太小 就没在意了 原来开关在这里 囧

[littlePigzzf]

感觉挺不错的页，蛮喜欢这种的，好好玩，有趣

[tysb777]

爱了 爱了

[37Y37]

别晃了，求求你了

[xarthur]

好玩！

[MissThee]

@37Y37 抖抖抖抖抖抖( ͡° ͜ʖ ͡°)

[CLCLCLCLCL]

加个可选项, 是否抖动, 相信会有很多人喜欢的(等一波无抖动

[zuobinwang]

刚看了一下已经有无抖动了 (特别喜欢这种风格的 ui,想一起开发

[superliwei]

越来越棒了。

[gzf6]

有意思，有点像 doodle jump 的风格

[kiii]

挺好的，支持创新，中国人就缺少创新，别听那些说风凉话的，做自己最重要。

[cheung]

可以了解下 Web 无障碍中的一个词“光敏性癫痫”

[cheung]

接上↑↑↑↑↑

在国外可是要吃官司的！

[MissThee]

@zuobinwang demo 页有源码链接，欢迎提 pr，组件相关的代码都在 /src/somponent 下

[MissThee]

@cheung 还好我没做黑暗主题，不然网页黑白一闪就抽了( ͡° ͜ʖ ͡°)

[MissThee]

@CLCLCLCLCL demo 顶部的选项可以切换是否抖动。至于以后怎么全局处理这个配置，还没想好咋做。。。

[yangheng4922]

进度条 能变成慢慢“画”上去 会有感觉点 [/狗头]

[kingfalse]

好看，但动起来确实卡

[janda]

有意思、关注了

[qfdk]

哈哈哈 这个奇怪的画风 我打算加在我的网站上

[bianz103]

有意思~ 风格独特