这是一个创建于 1565 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近手里的项目都结了，开始摸鱼的日常，在网上搜新奇的 WebUI 组件库，看到一套手绘风格的组件 Wired Elements 蛮有趣的，看源码用 lit-element 和 roughjs 写的，趁此机会了解一下 web-component 式组件的编写，做了一个小 demo 。
总体结构参(抄)照(袭)Wired Elements....就是增加了渲染方式的选择，改成了自己想要的样式，循环绘制的动画。
刚开始做感觉害挺简单的，越做感觉遇到的问题越多。。组件间开始有引用关系又会变的更麻烦。。脑瓜懵
demo 预览：
https://missthee.github.io/hand-drawn-component
总体结构参(抄)照(袭)Wired Elements....就是增加了渲染方式的选择，改成了自己想要的样式，循环绘制的动画。
刚开始做感觉害挺简单的，越做感觉遇到的问题越多。。组件间开始有引用关系又会变的更麻烦。。脑瓜懵
demo 预览：
https://missthee.github.io/hand-drawn-component
 | 1 aitaii 2021-07-02 16:32:32 +08:00 看了一会儿，心脏受不了 |
 | 2 ToPoGE 2021-07-02 16:48:27 +08:00 你让它不动，我还稍微能忍下 |
 | 3 abc635073826 2021-07-02 16:59:04 +08:00 楼主爱折腾的思维值得鼓励 |
 | 5 turan12 2021-07-02 18:01:57 +08:00 via iPhone 可以可以，louzhunb |
 | /td> | 6 varzy 2021-07-02 18:04:08 +08:00 via iPhone 建议抖音收购（逃 |
 | 7 iOCZ 2021-07-02 18:38:06 +08:00 是不是性能大户啊。。。 |
 | 8 love 2021-07-02 19:15:23 +08:00 不出所料，基本上只要是动的网页 cpu 都 100% |
 | 9 collen 2021-07-02 19:18:39 +08:00  2 好人才建议上交给国家 |
 | 10 lucybenz 2021-07-02 21:27:25 +08:00 这种抖动 一页最多放一个吧，群魔乱舞确实心脏难受 |
 | 11 theprimone 2021-07-02 21:42:12 +08:00 不动最好 |
 | 12 superliwei 2021-07-02 21:52:08 +08:00 1 我觉必须得抖，要的就是这个效果，挺不错的。 我建议楼主把这个设计成主题样式是可以替换的，比如 [普通主题] 、 [摇滚主题] ！ |
 | 13 pocketz 2021-07-02 22:02:18 +08:00 蛮好的，这种应该属于比较细分的领域 看个人时间，可以坚持下 |
 | 14 9yu 2021-07-02 22:15:09 +08:00 via Android 这个风格很不错！ |
 | 15 7gugu 2021-07-02 22:54:30 +08:00 好看，可惜不支持中文字体 |
 | 16 Bijiabo 2021-07-02 23:08:59 +08:00 感觉蛮好的！ |
 | 17 MissThee OP 1 @7gugu 之前加了方正喵呜中文字体，和这个风格很搭，但是全量字体文件有 3M，加载起来有点慢，而且方正喵呜的英文部分感觉不太好看，用 comic 字体来替代英文部分感觉很适合。所以我需要加载多个字体，其中还有一个体积比较大，解决这个问题的情况…就…有点尴尬 一开始想先显示默认字体，加载完后替换新的。因为三方字体和默认字体大小不一样，加载完字体，浏览器替换后，被文字撑开的 div 会改变大小，所以我需要在每个字体加载完后，重绘边框。现在只知道加载完了所有字体后的事件，或加载首个字体后的事件，就是不会搞加载完每个字体后的事件。 如果用字蛛抽取字体，因为有输入框可任意打字也不好判断抽取哪些。 github 静态页就先没使用中文字体，以后找到更好的字体加载、渲染过渡方法再加中文字体 |
 | 18 ALVC666 2021-07-03 09:19:37 +08:00 喜欢这种风格 不过我也觉得没必要抖动哈哈哈 静态就很不错 收藏了 下次写自己的小 demo 试试 |
 | 19 thetbw 2021-07-03 10:14:42 +08:00 不错 |
 | 20 mlhorizon 2021-07-03 10:15:41 +08:00 建议跟浏览者心跳同频抖动，让用户欲罢不能，进一步提高用户粘性 [狗头] |
 | 22 christin 2021-07-03 15:14:15 +08:00 via iPhone 挺好玩的 默认改成聚焦时抖动就更好了 |
 | 23 40EaE5uJO3Xt1VVa 2021-07-03 19:44:16 +08:00 不动最好 |
 | 24 xingyuc 2021-07-03 22:25:45 +08:00 @superliwei 正解正解 |
 | 25 kasusa 2021-07-04 14:46:24 +08:00 打开了大佬的网页我的电脑开始哼哼作响 |
 | 26 cxumol 2021-07-05 05:10:15 +08:00 via Android 玩过 蜡笔物理学 (Crayon Physics) 吗 |
 | 29 HashV2 2021-07-05 10:48:37 +08:00 cool~ |
 | 30 kinge 2021-07-05 15:08:02 +08:00 做的不错，有文档吗 |
 | 31 Thinginitself 2021-07-05 16:07:06 +08:00 蛮好看的~第二个放上去就抖的方式感觉很好。既不会抖地脑壳痛，又展示了独特的抖啊抖 |
 | 32 LaGeNanRen 2021-07-06 09:47:30 +08:00 背景要是还动的话，建议换成大间隔的，现在的又密还能动= = 注意一下每一行组件的间距，离的太近了 算了看不下去了，看的眼睛花 |
| 34 MissThee OP @Thinginitself 众口难调，打算还是做多种类型，可自选 |
| 35 MissThee OP @LaGeNanRen 组件默认间距没有特别的调，因为以前用 element-ui 组件库的时候经，常有觉得默认间距大，还要反向写样式穿透调小组件默认间距或高度的情况。。。所以这个没有预留间距，全靠调用组件的人自己控制了。。 |
 | 36 lovelyxiaod 2021-07-07 10:04:29 +08:00 想知道, 中文字体会怎样 |
 | 37 mscststs 2021-07-07 13:03:07 +08:00 选择 none. no jitter animation 的时候，switch 组件的颜色出现了 bug |
| 38 MissThee OP |
 | 40 code4you 2021-07-08 22:25:35 +08:00 能不能不让他动 我看了一会儿 感觉有点晕 |
 | 43 littlePigzzf 2021-07-09 11:3533 +08:00 感觉挺不错的页，蛮喜欢这种的，好好玩，有趣 |
 | 44 tysb777 2021-07-09 14:40:05 +08:00 爱了 爱了 |
 | 45 37Y37 2021-07-09 16:27:41 +08:00 别晃了，求求你了 |
 | 46 xarthur 2021-07-10 00:23:36 +08:00 via iPhone 好玩！ |
 | 48 CLCLCLCLCL 2021-07-10 09:52:34 +08:00 加个可选项, 是否抖动, 相信会有很多人喜欢的(等一波无抖动 |
 | 49 zuobinwang 2021-07-10 12:26:09 +08:00 刚看了一下已经有无抖动了 (特别喜欢这种风格的 ui,想一起开发 |
| 50 superliwei 2021-07-10 14:13:29 +08:00 越来越棒了。 |
 | 51 gzf6 nbsp;2021-07-10 16:50:48 +08:00 via Android 有意思，有点像 doodle jump 的风格 |
 | 52 kiii 2021-07-11 11:46:45 +08:00 挺好的，支持创新，中国人就缺少创新，别听那些说风凉话的，做自己最重要。 |
 | 53 cheung 2021-07-12 01:25:50 +08:00 可以了解下 Web 无障碍中的一个词“光敏性癫痫” |
| 54 cheung 2021-07-12 01:26:41 +08:00 接上↑↑↑↑↑ 在国外可是要吃官司的！ |
| 55 MissThee OP @zuobinwang demo 页有源码链接，欢迎提 pr，组件相关的代码都在 /src/somponent 下 |
| 57 MissThee OP @CLCLCLCLCL demo 顶部的选项可以切换是否抖动。至于以后怎么全局处理这个配置，还没想好咋做。。。 |
 | 59 yangheng4922 2021-07-13 19:21:53 +08:00 1 进度条 能变成慢慢“画”上去 会有感觉点 [/狗头] |
 | 60 kingfalse 2021-07-15 08:20:47 +08:00 via Android 好看，但动起来确实卡 |
 | 61 janda 2021-07-16 16:05:06 +08:00 有意思、关注了 |
 | 62 qfdk PRO 哈哈哈 这个奇怪的画风 我打算加在我的网站上 |
 | 63 bianz103 2021-08-15 13:48:46 +08:00 有意思~ 风格独特 |
Select Language