乐趣区

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

退出移动版