mpvue 或者 小程序 控制多节点 列队动画 动画连接依次执行 分享

             最近在写mpvue的小程序应用,项目中很多动画,为了方便操作写出可以控制多节点的列队动效。

实现原理就是 绑定 vue实例,去操作animatedata,然后在setTimeout去执行下一个,其中遇到很多mpvue问题和小程序问题

详细可以看代码。




mpvue 或者 小程序 控制多节点 列队动画 动画连接依次执行 分享_第1张图片


mpvue 或者 小程序 控制多节点 列队动画 动画连接依次执行 分享_第2张图片

新增回调方法 

加上这句话 cb();return
if ( currentAnimate === animateCount) { cb(); return; }

使用方法

autoanimate. lindAnimate( this, 'animationData', animateData, () => {
。。。。。
});

注:之前的思路是采用 async await方式,已经实现,但是感觉 并不舒服,担心对各类手机支持有问题,顾采用传统方式。

还有就是代码不够严谨,后续需要做一些判断。

(想装b还不行呢。。。。。。)

如果是纯小程序的项目只需要按照小程序的方法最后把那个动画setData()即可


你可能感兴趣的:(mpvue 或者 小程序 控制多节点 列队动画 动画连接依次执行 分享)