爱意满满的作品展示区。
MissThee

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

  •  2
     
  •   MissThee ·
    MissThee · Jul 2, 2021 · 5695 views
    This topic created in 1950 days ago, the information mentioned may be changed or developed.
    最近手里的项目都结了,开始摸鱼的日常,在网上搜新奇的 WebUI 组件库,看到一套手绘风格的组件 Wired Elements 蛮有趣的,看源码用 lit-element 和 roughjs 写的,趁此机会了解一下 web-component 式组件的编写,做了一个小 demo 。

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

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

    在国外可是要吃官司的!
    MissThee
    MissThee
    OP
    Jul 13, 2021
    55
    @zuobinwang demo 页有源码链接,欢迎提 pr,组件相关的代码都在 /src/somponent 下
    MissThee
    MissThee
    OP
    Jul 13, 2021
    56
    @cheung 还好我没做黑暗主题,不然网页黑白一闪就抽了( ͡° ͜ʖ ͡°)
    MissThee
    MissThee
    OP
    Jul 13, 2021
    57
    @CLCLCLCLCL demo 顶部的选项可以切换是否抖动。至于以后怎么全局处理这个配置,还没想好咋做。。。
    yangheng4922
    yangheng4922
    Jul 13, 2021❤️1
    59
    进度条 能变成慢慢“画”上去 会有感觉点 [/狗头]
    kingfalse
    kingfalse
    Jul 15, 2021 via Android
    60
    好看,但动起来确实卡
    janda
    janda
    Jul 16, 2021
    61
    有意思、关注了
    qfdk
    qfdk
    PRO
    Jul 19, 2021 via iPhone
    62
    哈哈哈 这个奇怪的画风 我打算加在我的网站上
    bianz103
    bianz103
    Aug 15, 2021
    63
    有意思~ 风格独特
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5257 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 1172ms · UTC 02:49 · PVG 10:49 · LAX 18:49 · JFK 21:49
    ♥ Do have faith in what you're doing.