H5DS编辑器之时间轴实现原理

2次阅读

共计 1084 个字符，预计需要花费 3 分钟才能阅读完成。

在做 H5DS 编辑器的时候，我遇到一个需要：通过时间轴的游标管制动画的进度。看下效果图：

视图：react

动画: 这里咱们采纳 CSS3 动画库 https://animate.style/

好了，就这些了！

增加动画的时候，动静的给 style 增加动画属性：

<div style={{animation: `2s ease 0s 1 normal forwards paused bounceIn`}}>
   五星 SVG
</div>

下面代码是让五星弹出的动画成果。然而咱们的需要是通过拖动时间轴去管制动画的状态。在网上查了很多材料都未发现解决方案，然而在看了 w3school 之后，而后发现了这样的一句话，如果 animation-delay 是 -2，会跳过 2 秒进入动画周期，有图为证：

如果同时设置了 animation-play-state: paused;，而后动静的去批改animation-delay 的正数参数会有什么成果呢？我试了一下，于是发现了宝藏！这不就是我要的成果么。看下图：

看来还是 w3school 牛 x~

既然实现原理 OK 了，咱们就能够具体实现了~

因为 H5DS 的时间轴设计的业务过于简单，能够拖动排序、删除、增加、拷贝、批量选中、拖动游标、拖动批改动画时长、拖动设置动画延迟时间等，这里代码展现不齐全的。

这里大略做一个形容：

咱们把动画以 JSON 的形式存储：

const animates = [
    {
        label: '弹入',
        type: 'in', // 进入、来到、强调动画
        direction: 'normal',
        fillMode: 'forwards',
        name: 'bounceIn',
        duration: 1,
        delay: 0,
        count: 1,
        timing: 'ease'
    },
    ...
]

而后把 JSON 数据给 JSX：

<div style={{animation: `${elem.name} ${elem.duration}s ${elem.timing} ${elem.delay}s ${elem.count} ${elem.direction} ${elem.playState || 'running'} ${elem.fillMode}`}}>
   五星 SVG
</div>

当咱们在拖动游标的时候，只须要动静的批改 delay 参数即可实现动画的管制，须要留神的是这里的 delay 参数必须是 正数
我是 H5DS（https://www.h5ds.com）的作者，这是一个十分棒的工具，能够帮助开发者做 H5 网页，心愿大家能更多的关注，如果有相干的技术问题，能够退出咱们的 QQ 群 549856478 征询，心愿结交更多对前端技术感兴趣的敌人~

正文完