AE转JS动画,lottie.js和bodymovin的简易使用心得

PS:描述不清或者描述错误请见谅...

AE动画转换JS动画使用了lottie.js库

制作流程:
1、设计师使用PS或者AI制作静态设计稿;
2、设计师对设计稿图层进行分类
3、导入AE制作
4、AE导出文件,对应使用的AE插件为bodymovin
5、前端开发 接收设计师发来的文件,提取相关代码,写入需要使用的页面。

前端的工作:
1、设计师发来的文件里,通常包含data.js和demo.html,如果bodymovin导出时没有勾选图片转换为base64的话会多出一个images文件夹存放图片文件,注意,在新版本的bodymovin 里导出的是data.json和demo.html,前端工作量会小一点。

2、样式方面:

#lottie{
    width: 100px;
    height: 100px;
    display:block;
    overflow: hidden;
    transform: translate3d(0,0,0);
}

需要为动画设置一个容器,定义宽高,transform为强制开启GPU渲染,容器设置ID
3、引入库文件

<srcipt src="lottie.js"></srcipt>

4、提取动画数据
(1)data.js 和 demo.html 存在的情况下:

    let animationData = {......};
    let params = {
        container: document.getElementById("lottie"),
        renderer: "canvas",
        loop: true,
        autoplay: true,
        animationData: animationData
    }
    let anim = lottie.loadAnimation(params);

(2)data.json 和 demo.html 存在的情况下:

    let animationData = {......};
    let params = {
        container: document.getElementById("lottie"),
        renderer: "canvas",
        loop: true,
        autoplay: true,
        path: "data.json"
    }
    let anim = lottie.loadAnimation(params);

data.json存在时不需要提取animationData !

container:为预留的动画容器;

renderer:为动画模式,html为纯dom结构动画,canvas为画板动画,svg为svg动画;

loop:为循环

autoplay:为自动播放

animationData:为动画数据,该内容与data.js内容一致,所以data.js 可以不使用;

path:为动画数据,与animationData不可同时使用,数值为data.json的路径

常用方法:

输出动画时长秒:

console.log("时长(s):" + anim.getDuration(false));

输出动画时长帧:

console.log("时长(帧):" + anim.getDuration(true));

暂停:

anim.pause();

播放:

anim.play();

停止:

anim.stop();

销毁动画实例:

anim.destroy();

正/反向播放:

anim.setDirection(parm);

parm: 1为正向,-1为反向

播放速度:

anim.setSpeed(num);

更多方法请参考lottie.js的Github地址:<u>https://github.com/airbnb/lottie-web</u>

例子,用同一个按钮切换播放/停止的方法:

    document.getElementById("btn").onclick = function(){
        if(anim){
            anim.destroy();
            anim = undefined;
        }
        else{
            anim = lottie.loadAnimation(params);
        }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。