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

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

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

    在国外可是要吃官司的!
    MissThee
        55
    MissThee   138 天前
    @zuobinwang demo 页有源码链接,欢迎提 pr,组件相关的代码都在 /src/somponent 下
    MissThee
        56
    MissThee   138 天前
    @cheung 还好我没做黑暗主题,不然网页黑白一闪就抽了( ͡° ͜ʖ ͡°)
    MissThee
        57
    MissThee   138 天前
    @CLCLCLCLCL demo 顶部的选项可以切换是否抖动。至于以后怎么全局处理这个配置,还没想好咋做。。。
    yangheng4922
        59
    yangheng4922   138 天前   ❤️ 1
    进度条 能变成慢慢“画”上去 会有感觉点 [/狗头]
    kingfalse
        60
    kingfalse   137 天前 via Android
    好看,但动起来确实卡
    janda
        61
    janda   135 天前
    有意思、关注了
    qfdk
        62
    qfdk   132 天前 via iPhone
    哈哈哈 这个奇怪的画风 我打算加在我的网站上
    bianz103
        63
    bianz103   105 天前
    有意思~ 风格独特
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4040 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 02:02 · PVG 10:02 · LAX 18:02 · JFK 21:02
    ♥ Do have faith in what you're doing.