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咨询，希望结交更多对前端技术感兴趣的朋友~