V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
MissThee
V2EX  ›  分享创造

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

  •  2
     
  •   MissThee ·
    MissThee · 2021-07-02 16:20:04 +08:00 · 3972 次点击
    这是一个创建于 968 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近手里的项目都结了,开始摸鱼的日常,在网上搜新奇的 WebUI 组件库,看到一套手绘风格的组件 Wired Elements 蛮有趣的,看源码用 lit-element 和 roughjs 写的,趁此机会了解一下 web-component 式组件的编写,做了一个小 demo 。

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

    demo 预览:
    https://missthee.github.io/hand-drawn-component
    63 条回复    2021-08-15 13:48:46 +08:00
    aitaii
        1
    aitaii  
       2021-07-02 16:32:32 +08:00
    看了一会儿,心脏受不了
    ToPoGE
        2
    ToPoGE  
       2021-07-02 16:48:27 +08:00
    你让它不动,我还稍微能忍下
    abc635073826
        3
    abc635073826  
       2021-07-02 16:59:04 +08:00
    楼主爱折腾的思维值得鼓励
    MissThee
        4
    MissThee  
    OP
       2021-07-02 17:41:18 +08:00
    @ToPoGE 加入抖动,躁起来
    turan12
        5
    turan12  
       2021-07-02 18:01:57 +08:00 via iPhone
    可以可以,louzhunb
    varzy
        6
    varzy  
       2021-07-02 18:04:08 +08:00 via iPhone
    建议抖音收购(逃
    iOCZ
        7
    iOCZ  
       2021-07-02 18:38:06 +08:00
    是不是性能大户啊。。。
    love
        8
    love  
       2021-07-02 19:15:23 +08:00
    不出所料,基本上只要是动的网页 cpu 都 100%
    collen
        9
    collen  
       2021-07-02 19:18:39 +08:00   ❤️ 2
    好人才建议上交给国家
    lucybenz
        10
    lucybenz  
       2021-07-02 21:27:25 +08:00
    这种抖动 一页最多放一个吧,群魔乱舞确实心脏难受
    theprimone
        11
    theprimone  
       2021-07-02 21:42:12 +08:00
    不动最好
    superliwei
        12
    superliwei  
       2021-07-02 21:52:08 +08:00   ❤️ 1
    我觉必须得抖,要的就是这个效果,挺不错的。
    我建议楼主把这个设计成主题样式是可以替换的,比如 [普通主题] 、 [摇滚主题] !
    pocketz
        13
    pocketz  
       2021-07-02 22:02:18 +08:00
    蛮好的,这种应该属于比较细分的领域
    看个人时间,可以坚持下
    9yu
        14
    9yu  
       2021-07-02 22:15:09 +08:00 via Android
    这个风格很不错!
    7gugu
        15
    7gugu  
       2021-07-02 22:54:30 +08:00
    好看,可惜不支持中文字体😂
    Bijiabo
        16
    Bijiabo  
       2021-07-02 23:08:59 +08:00
    感觉蛮好的!
    MissThee
        17
    MissThee  
    OP
       2021-07-03 07:44:29 +08:00 via iPhone   ❤️ 1
    @7gugu 之前加了方正喵呜中文字体,和这个风格很搭,但是全量字体文件有 3M,加载起来有点慢,而且方正喵呜的英文部分感觉不太好看,用 comic 字体来替代英文部分感觉很适合。所以我需要加载多个字体,其中还有一个体积比较大,解决这个问题的情况…就…有点尴尬
    一开始想先显示默认字体,加载完后替换新的。因为三方字体和默认字体大小不一样,加载完字体,浏览器替换后,被文字撑开的 div 会改变大小,所以我需要在每个字体加载完后,重绘边框。现在只知道加载完了所有字体后的事件,或加载首个字体后的事件,就是不会搞加载完每个字体后的事件😓。
    如果用字蛛抽取字体,因为有输入框可任意打字也不好判断抽取哪些。
    github 静态页就先没使用中文字体😅,以后找到更好的字体加载、渲染过渡方法再加中文字体
    ALVC666
        18
    ALVC666  
       2021-07-03 09:19:37 +08:00
    喜欢这种风格
    不过我也觉得没必要抖动哈哈哈
    静态就很不错 收藏了
    下次写自己的小 demo 试试
    thetbw
        19
    thetbw  
       2021-07-03 10:14:42 +08:00
    不错
    mlhorizon
        20
    mlhorizon  
       2021-07-03 10:15:41 +08:00
    建议跟浏览者心跳同频抖动,让用户欲罢不能,进一步提高用户粘性 [狗头]
    MissThee
        21
    MissThee  
    OP
       2021-07-03 11:39:54 +08:00 via iPhone
    @mlhorizon 心率仪厂家联动😂
    christin
        22
    christin  
       2021-07-03 15:14:15 +08:00 via iPhone
    挺好玩的 默认改成聚焦时抖动就更好了
    yanzhiling2001
        23
    yanzhiling2001  
       2021-07-03 19:44:16 +08:00
    不动最好
    xingyuc
        24
    xingyuc  
       2021-07-03 22:25:45 +08:00
    @superliwei 正解正解
    kasusa
        25
    kasusa  
       2021-07-04 14:46:24 +08:00
    打开了大佬的网页我的电脑开始哼哼作响
    cxumol
        26
    cxumol  
       2021-07-05 05:10:15 +08:00 via Android
    玩过 蜡笔物理学 (Crayon Physics) 吗
    MissThee
        27
    MissThee  
    OP
       2021-07-05 09:39:37 +08:00
    @kasusa ゴゴゴゴゴゴゴゴゴゴ
    MissThee
        28
    MissThee  
    OP
       2021-07-05 09:41:49 +08:00
    @cxumol 木有,玩过 fancy pants adventure,手绘的风格
    HashV2
        29
    HashV2  
       2021-07-05 10:48:37 +08:00
    cool~
    kinge
        30
    kinge  
       2021-07-05 15:08:02 +08:00
    做的不错,有文档吗
    Thinginitself
        31
    Thinginitself  
       2021-07-05 16:07:06 +08:00
    蛮好看的~第二个放上去就抖的方式感觉很好。既不会抖地脑壳痛,又展示了独特的抖啊抖
    LaGeNanRen
        32
    LaGeNanRen  
       2021-07-06 09:47:30 +08:00
    背景要是还动的话,建议换成大间隔的,现在的又密还能动= =
    注意一下每一行组件的间距,离的太近了
    算了看不下去了,看的眼睛花
    MissThee
        33
    MissThee  
    OP
       2021-07-06 15:58:50 +08:00
    @kinge 文档暂时还没,刚做了一点儿组件试试样子,还没做完,以后空余时间多会补上的
    MissThee
        34
    MissThee  
    OP
       2021-07-06 15:59:43 +08:00
    @Thinginitself 众口难调,打算还是做多种类型,可自选
    MissThee
        35
    MissThee  
    OP
       2021-07-06 16:02:45 +08:00
    @LaGeNanRen 组件默认间距没有特别的调,因为以前用 element-ui 组件库的时候经,常有觉得默认间距大,还要反向写样式穿透调小组件默认间距或高度的情况。。。所以这个没有预留间距,全靠调用组件的人自己控制了。。
    lovelyxiaod
        36
    lovelyxiaod  
       2021-07-07 10:04:29 +08:00
    想知道, 中文字体会怎样
    mscststs
        37
    mscststs  
       2021-07-07 13:03:07 +08:00
    选择 none. no jitter animation 的时候,switch 组件的颜色出现了 bug
    MissThee
        38
    MissThee  
    OP
       2021-07-07 18:02:41 +08:00
    MissThee
        39
    MissThee  
    OP
       2021-07-07 18:04:57 +08:00
    @mscststs 我嚓Σ(O▽O),细致。已经改掉了,可以正常变色了(•̀ᴗ•́)و
    code4you
        40
    code4you  
       2021-07-08 22:25:35 +08:00
    能不能不让他动 我看了一会儿 感觉有点晕
    MissThee
        41
    MissThee  
    OP
       2021-07-09 01:13:55 +08:00 via iPhone
    @code4you 预览页顶部可以切换动画类型,可以不动
    code4you
        42
    code4you  
       2021-07-09 10:11:52 +08:00
    @MissThee 上面 3 个选项 被忽略了 当初感觉字太小 就没在意了 原来开关在这里 囧
    littlePigzzf
        43
    littlePigzzf  
       2021-07-09 11:35:33 +08:00
    感觉挺不错的页,蛮喜欢这种的,好好玩,有趣
    tysb777
        44
    tysb777  
       2021-07-09 14:40:05 +08:00
    爱了 爱了
    37Y37
        45
    37Y37  
       2021-07-09 16:27:41 +08:00
    别晃了,求求你了
    xarthur
        46
    xarthur  
       2021-07-10 00:23:36 +08:00 via iPhone
    好玩!
    MissThee
        47
    MissThee  
    OP
       2021-07-10 08:25:34 +08:00 via iPhone
    @37Y37 抖抖抖抖抖抖( ͡° ͜ʖ ͡°)
    CLCLCLCLCL
        48
    CLCLCLCLCL  
       2021-07-10 09:52:34 +08:00
    加个可选项, 是否抖动, 相信会有很多人喜欢的(等一波无抖动
    zuobinwang
        49
    zuobinwang  
       2021-07-10 12:26:09 +08:00
    刚看了一下已经有无抖动了 (特别喜欢这种风格的 ui,想一起开发
    superliwei
        50
    superliwei  
       2021-07-10 14:13:29 +08:00
    越来越棒了。
    gzf6
        51
    gzf6  
       2021-07-10 16:50:48 +08:00 via Android
    有意思,有点像 doodle jump 的风格
    kiii
        52
    kiii  
       2021-07-11 11:46:45 +08:00
    挺好的,支持创新,中国人就缺少创新,别听那些说风凉话的,做自己最重要。
    cheung
        53
    cheung  
       2021-07-12 01:25:50 +08:00
    可以了解下 Web 无障碍中的一个词“光敏性癫痫”
    cheung
        54
    cheung  
       2021-07-12 01:26:41 +08:00
    接上↑↑↑↑↑

    在国外可是要吃官司的!
    MissThee
        55
    MissThee  
    OP
       2021-07-13 12:44:08 +08:00
    @zuobinwang demo 页有源码链接,欢迎提 pr,组件相关的代码都在 /src/somponent 下
    MissThee
        56
    MissThee  
    OP
       2021-07-13 12:48:12 +08:00
    @cheung 还好我没做黑暗主题,不然网页黑白一闪就抽了( ͡° ͜ʖ ͡°)
    MissThee
        57
    MissThee  
    OP
       2021-07-13 12:49:01 +08:00
    @CLCLCLCLCL demo 顶部的选项可以切换是否抖动。至于以后怎么全局处理这个配置,还没想好咋做。。。
    yangheng4922
        59
    yangheng4922  
       2021-07-13 19:21:53 +08:00   ❤️ 1
    进度条 能变成慢慢“画”上去 会有感觉点 [/狗头]
    kingfalse
        60
    kingfalse  
       2021-07-15 08:20:47 +08:00 via Android
    好看,但动起来确实卡
    janda
        61
    janda  
       2021-07-16 16:05:06 +08:00
    有意思、关注了
    qfdk
        62
    qfdk  
       2021-07-19 14:11:00 +08:00 via iPhone
    哈哈哈 这个奇怪的画风 我打算加在我的网站上
    bianz103
        63
    bianz103  
       2021-08-15 13:48:46 +08:00
    有意思~ 风格独特
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2787 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 14:15 · PVG 22:15 · LAX 06:15 · JFK 09:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.