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

在做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征询，心愿结交更多对前端技术感兴趣的敌人~