V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
subframe75361
V2EX  ›  程序员

动画渲染选择 svg/canvas?

  •  
  •   subframe75361 ·
    subframe7536 · 2022-09-08 23:24:45 +08:00 · 2387 次点击
    这是一个创建于 791 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://ibb.co/C2VtZ24

    是音频波形可视化图,大概想法是这个样子,通过offlineAudioContext获取buffer,动态生成waveresize时根据宽度重新渲染,整个过程都需要有动画,

    现在用的是多个div+flex布局实现的,是否性能不如svg/canvas

    最开始用的是wavesurfer.js,用的是canvas,但是没有动画

    尝试自行写canvas/svg之后发现

    • canvas在我的浏览器上很糊,ctx.scale(dpr,dpr)也不好使
    • konva.js的动画会导致圆角形变
    • svg没找到合适的库(gsap里没找到),手写path比较麻烦

    请问各位大佬有没有什么好的解决方法?

    16 条回复    2022-09-10 17:26:18 +08:00
    rannnn
        1
    rannnn  
       2022-09-08 23:30:39 +08:00   ❤️ 1
    subframe75361
        2
    subframe75361  
    OP
       2022-09-08 23:42:18 +08:00
    @rannnn 感谢,好像有些效果了,但是放大到一定程度之后还是会糊掉...
    bojue
        3
    bojue  
       2022-09-08 23:46:52 +08:00
    @subframe75361

    模糊一般有两个方案:0.5 偏移+等比例缩放
    subframe75361
        4
    subframe75361  
    OP
       2022-09-08 23:47:37 +08:00
    renmu
        5
    renmu  
       2022-09-08 23:48:07 +08:00 via Android
    就这么几个元素,感觉性能大差不差。
    subframe75361
        6
    subframe75361  
    OP
       2022-09-08 23:51:54 +08:00
    @renmu 最高大概在 150 个节点,一次性缩减到 30 个节点的时候会卡一下...
    xieren58
        7
    xieren58  
       2022-09-09 00:58:15 +08:00   ❤️ 1
    pixi.js
    rekulas
        8
    rekulas  
       2022-09-09 07:53:21 +08:00   ❤️ 1
    pixi 配合相应的平滑迁移库可以试试,基于 webgl 渲染的
    macy
        9
    macy  
       2022-09-09 09:28:34 +08:00   ❤️ 1
    wavesurfer.j 在前端处理波形图数据么?可能会很卡,建议放到后端去处理,直接生成 pcm 数据
    yuuko
        10
    yuuko  
       2022-09-09 09:41:12 +08:00   ❤️ 1
    你的 canvas 要是显示宽度是 width , 那你要创建 width * window.devicePixelRatio 大小的 canvas
    thinkershare
        11
    thinkershare  
       2022-09-09 10:26:59 +08:00   ❤️ 1
    如果显示的不是非常复杂, 使用 SVG 足够了, 它底层会使用硬件加速, 如果绘制的非常复杂, 无法简单的使用 svg 完成矢量化, 使用 canvas,然后用 WebGL 搞, WebGL 的 JS 库非常多. 我们用了做三维建模和数字孪生, 模型特别复杂的时候如果没有独立显卡, 会卡, 目前没有解决办法, 你这个足够简单, 我估计 SVG/HTML(transform)/Canvas(2D/3D)实现都不会有啥问题.
    alexsunxl
        12
    alexsunxl  
       2022-09-09 10:59:22 +08:00
    推荐用 webgl ,上手之后,调整效果很方便的。
    库也多,性能也好,特效平滑
    oldshensheep
        13
    oldshensheep  
       2022-09-09 11:46:16 +08:00
    糊的话加上这个 CSS 属性
    image-rendering: pixelated;
    并且设置 context
    ctx.imageSmoothingEnabled= false
    完全不糊

    https://codepen.io/oldshensheep/pen/WNJwvRm
    subframe75361
        14
    subframe75361  
    OP
       2022-09-09 13:17:11 +08:00
    leonkfd
        15
    leonkfd  
       2022-09-09 17:53:13 +08:00   ❤️ 1
    很久以前写过一个音乐可视化的,用的是阿里的 G 渲染库。现在更新很多了,底层可选 svg/canvas/webgl 都行
    https://leon-kfd.github.io/g-music-visualizer/
    jones2000
        16
    jones2000  
       2022-09-10 17:26:18 +08:00
    就这几根柱子,canvas 自己画下就够了。应该不需要用第 3 方库什么的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1334 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:38 · PVG 07:38 · LAX 15:38 · JFK 18:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.