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

[MissThee]

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

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

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

[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 顶部的选项可以切换是否抖动。至于以后怎么全局处理这个配置，还没想好咋做。。。

[DoctorCat]

不错

[yangheng4922]

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

[kingfalse]

好看，但动起来确实卡