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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1276 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

组件

Demo

elements

Wired

63 条回复 • 2021-08-15 13:48:46 +08:00

aitaii

2021-07-02 16:32:32 +08:00

看了一会儿，心脏受不了

ToPoGE

2021-07-02 16:48:27 +08:00

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

abc635073826

2021-07-02 16:59:04 +08:00

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

MissThee

2021-07-02 17:41:18 +08:00

@ToPoGE 加入抖动，躁起来

turan12

2021-07-02 18:01:57 +08:00 via iPhone

可以可以，louzhunb

varzy

2021-07-02 18:04:08 +08:00 via iPhone

建议抖音收购（逃

iOCZ

2021-07-02 18:38:06 +08:00

是不是性能大户啊。。。

love

2021-07-02 19:15:23 +08:00

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

collen

2021-07-02 19:18:39 +08:00

好人才建议上交给国家

lucybenz

2021-07-02 21:27:25 +08:00

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

theprimone

2021-07-02 21:42:12 +08:00

不动最好

superliwei

2021-07-02 21:52:08 +08:00

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

pocketz

2021-07-02 22:02:18 +08:00

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

9yu

2021-07-02 22:15:09 +08:00 via Android

这个风格很不错！

7gugu

2021-07-02 22:54:30 +08:00

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

Bijiabo

2021-07-02 23:08:59 +08:00

感觉蛮好的！

MissThee

2021-07-03 07:44:29 +08:00 via iPhone

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

ALVC666

2021-07-03 09:19:37 +08:00

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

thetbw

2021-07-03 10:14:42 +08:00

不错

mlhorizon

2021-07-03 10:15:41 +08:00

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

MissThee

2021-07-03 11:39:54 +08:00 via iPhone

@mlhorizon 心率仪厂家联动😂

christin

2021-07-03 15:14:15 +08:00 via iPhone

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

40EaE5uJO3Xt1VVa

2021-07-03 19:44:16 +08:00

不动最好

xingyuc

2021-07-03 22:25:45 +08:00

@superliwei 正解正解

kasusa

2021-07-04 14:46:24 +08:00

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

cxumol

2021-07-05 05:10:15 +08:00 via Android

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

MissThee

2021-07-05 09:39:37 +08:00

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

MissThee

2021-07-05 09:41:49 +08:00

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

HashV2

2021-07-05 10:48:37 +08:00

cool~

kinge

2021-07-05 15:08:02 +08:00

做的不错，有文档吗

Thinginitself

2021-07-05 16:07:06 +08:00

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

LaGeNanRen

2021-07-06 09:47:30 +08:00

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

MissThee

2021-07-06 15:58:50 +08:00

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

MissThee

2021-07-06 15:59:43 +08:00

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

MissThee

2021-07-06 16:02:45 +08:00

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

lovelyxiaod

2021-07-07 10:04:29 +08:00

想知道, 中文字体会怎样

mscststs

2021-07-07 13:03:07 +08:00

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

MissThee

2021-07-07 18:02:41 +08:00

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

MissThee

2021-07-07 18:04:57 +08:00

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

code4you

2021-07-08 22:25:35 +08:00

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

MissThee

2021-07-09 01:13:55 +08:00 via iPhone

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

code4you

2021-07-09 10:11:52 +08:00

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

littlePigzzf

2021-07-09 11:35:33 +08:00

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

tysb777

2021-07-09 14:40:05 +08:00

爱了爱了

37Y37

2021-07-09 16:27:41 +08:00

别晃了，求求你了

xarthur

2021-07-10 00:23:36 +08:00 via iPhone

好玩！

MissThee

2021-07-10 08:25:34 +08:00 via iPhone

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

CLCLCLCLCL

2021-07-10 09:52:34 +08:00

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

zuobinwang

2021-07-10 12:26:09 +08:00

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

superliwei

2021-07-10 14:13:29 +08:00

越来越棒了。

gzf6

2021-07-10 16:50:48 +08:00 via Android

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

kiii

2021-07-11 11:46:45 +08:00

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

cheung

2021-07-12 01:25:50 +08:00

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

cheung

2021-07-12 01:26:41 +08:00

接上↑↑↑↑↑

在国外可是要吃官司的！

MissThee

2021-07-13 12:44:08 +08:00

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

MissThee

2021-07-13 12:48:12 +08:00

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

MissThee

2021-07-13 12:49:01 +08:00

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

yangheng4922

2021-07-13 19:21:53 +08:00

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

kingfalse

2021-07-15 08:20:47 +08:00 via Android

好看，但动起来确实卡

janda

2021-07-16 16:05:06 +08:00

有意思、关注了

qfdk

2021-07-19 14:11:00 +08:00 via iPhone

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

bianz103

2021-08-15 13:48:46 +08:00

有意思~ 风格独特