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

原创
07/15 20:01
阅读数 114

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

作者:馒头
链接:https://segmentfault.com/a/1190000023246329
来源:SegmentFault 思否
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部