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

[开源] Smart Ticker - 做了个有意思的文本差异替换滚动组件,支持任意字符

  •  1
     
  •   hibear · Dec 29, 2025 · 1687 views
    This topic created in 160 days ago, the information mentioned may be changed or developed.

    支持中英、数字、字母、符号、Emoji 等多种字符,基于 Levenshtein diff 算法,适用于 React/Vue

    官网演示: https://tombcato.github.io/smart-ticker

    开源地址: https://github.com/tombcato/smart-ticker/

    效果展示(gif 有点掉帧,去官网上看比较丝滑): Smart Ticker Demo Smart Ticker Demo

    ✨ 特性

    🌏 多字符集支持
    支持中英、数字、Emoji 等混合滚动,基于 Unicode 宽度自动调整间距
    🧠 智能差异动画
    Levenshtein 算法计算最小变更路径,相同的字符保持静止
    ⚡ 平滑中断
    动画过程中值突变时,从当前动态位置无缝流向新目标
    📈 丰富动效
    内置 linear, bounce, easeInOut 等缓动,支持 charWidth 微调
    🦄 双框架支持
    提供 React (Hooks) 和 Vue 3 (Composition) 组件,API 统一
    🚀 极致性能
    基于 RAF 驱动,无多余 DOM 操作,适合高频数据流场景
    5 replies    2025-12-31 10:31:41 +08:00
    watzds
        1
    watzds  
       Dec 30, 2025
    👍👍👍👍
    deathscythe
        2
    deathscythe  
       Dec 30, 2025
    star 了,效果不错
    hibear
        3
    hibear  
    OP
       Dec 30, 2025
    @deathscythe 感谢支持
    hibear
        4
    hibear  
    OP
       Dec 30, 2025
    @watzds 感谢支持
    Cloudust
        5
    Cloudust  
       Dec 31, 2025
    这个不错!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3279 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 11:35 · PVG 19:35 · LAX 04:35 · JFK 07:35
    ♥ Do have faith in what you're doing.