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