大概很久很久以前，2017年，参加了第二届中国前端开发者大会（FDCon2017），除了看了一眼尤雨溪，印象最深刻的就是手淘渚薰分享的关于H5交互的内容了。时光荏苒，最近再次接触，简单回顾一下。

示例项目地址: https://github.com/skillnull/lottie-web-caption-animation

首先是安装AE，具体怎么安装就不赘述了，随便一搜就有很多教程。

安装完AE以后，装一个AE的插件bodymovin, github地址为:https://github.com/airbnb/lottie-web   在 'lottie-web/build/extension/'目录下面有一个bodymovin.zxp的文件，

这就是我们要的插件了。

安装插件，可以使用官方推荐的几种方法：https://github.com/airbnb/lottie-web#option-1-recommended

本文尝试了两种方法：1. 使用 ZXP installer安装，试了很多次，都已失败告终。2. 将bodymovin.zxp文件后缀改成.zip然后解压，放到ae的安装目录下'\Adobe\CEP\extensions'成功:

WINDOWS:

C:\Program Files (x86)\Common Files\Adobe\CEP\extensions or

C:\<username>\AppData\Roaming\Adobe\CEP\extensions

MAC:

/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

(you can open the terminal and type:

$ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

then type:

$ ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

to make sure it was copied correctly type)

Edit the registry key:

WINDOWS:

open the registry key HKEY_CURRENT_USER/Software/Adobe/CSXS. and add a key named PlayerDebugMode, of type String, and value .

MAC:

open the file ~/Library/Preferences/com.adobe.CSXS..plist and add a row with key PlayerDebugMode, of type String, and value .

接着就是打开AE，新建一个动画或者导入一个AE模板，然后在 ‘编辑 > 首选项 > 常规’ 中将允许脚本写入和访问网络勾上

然后在‘窗口 > 扩展 > Bodymovin’将Bodymovin选中，会弹出一个插件框

将上图中1的位置选中，在2的位置选择一个位置确定，然后render，导出data.json和其他文件，这时候可以点击preview进行预览，只需要选择刚才导出的data.json文件即可。

下面就是和lottie进行结合使用了：

首先下载lottie.js文件，在项目:https://github.com/airbnb/lottie-web下的'lottie-web/build/player/'目录下有个lottie.js文件，就是我们要的。然后将lottie放到根目录下，新建一个index.html文件，同时将导出的data.json和images文件夹放到根目录

index.html的内容为：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Bodymovin Demo</title>

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

</head>

<body>

    <div id="animation"></div>

    <script>

        lottie.loadAnimation({

            path:'data.json',   //json文件路径

            loop:true,

            autoplay:true,

            renderer:'canvas',  //渲染方式，有"html"、"canvas"和"svg"三种

            container:document.getElementById('animation')

        });

    </script>

</body>

</html>

这时候如果直接双击index.html进行预览是不行的，因为使用的是file:///形式打开的，ajax会报跨域的错误：

lottie.js: Access to XMLHttpRequest at 'file:///C:/nginx-1.15.8/html/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

你可以本地安装一个nginx启动一个代理，然后配置端口为2323，server_name 为localhost：

#user  nobody;

worker_processes  ;

#error_log  logs/error.log;

#error_log  logs/error.log  notice;

#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {

    worker_connections  ;

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '

    #                  '$status $body_bytes_sent "$http_referer" '

    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;

    #tcp_nopush     on;

    #keepalive_timeout  ;

    keepalive_timeout  ;

    #gzip  on;

    server {

        listen       ;

        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {

            root   html;

            index  index.html index.htm;

        }

        #error_page                /.html;

        # redirect server error pages to the static page /50x.html

        #

        error_page        /50x.html;

        location = /50x.html {

            root   html;

        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:

        #

        #location ~ \.php$ {

        #    proxy_pass   http://127.0.0.1;

        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:

        #

        #location ~ \.php$ {

        #    root           html;

        #    fastcgi_pass   127.0.0.1:;

        #    fastcgi_index  index.php;

        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;

        #    include        fastcgi_params;

        #}

        # deny access to .htaccess files, if Apache's document root

        # concurs with nginx's one

        #

        #location ~ /\.ht {

        #    deny  all;

        #}

    }

    # another virtual host using mix of IP-, name-, and port-based configuration

    #

    #server {

    #    listen       ;

    #    listen       somename:;

    #    server_name  somename  alias  another.alias;

    #    location / {

    #        root   html;

    #        index  index.html index.htm;

    #    }

    #}

    # HTTPS server

    #

    #server {

    #    listen        ssl;

    #    server_name  localhost;

    #    ssl_certificate      cert.pem;

    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;

    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;

    #    ssl_prefer_server_ciphers  on;

    #    location / {

    #        root   html;

    #        index  index.html index.htm;

    #    }

    #}

}

到命令行下去运行nginx.exe启动nginx然后访问localhost:2323就能预览了。至于nginx的使用命令就不罗列了。

lottie的具体使用文档见: https://github.com/airbnb/lottie-web

另：如果渲染的时候提示无法获取字体轮廓，将你的AE换成英文就好了。下面是一种将语言设置成英文的方法，以windows环境为例：

首先找到安装路径下的配置文件painter.ini，一般默认安装的话在这个路径下：C:\Program Files\Adobe\Adobe After Effects CC 2018\Support Files\painter.ini

然后修改这个文件，在@AdobeID下面加上下面两行：

ForceLanguage=

Language=en_US

修改后的painter.ini内容为：

[Config]

; Use INI or use default options

UseCfg=

Name=Adobe After Effects CC

LEID=V7{}AfterEffects--Win-GM

Version=14.0.

Serial=

; AdobeID (stub)

AdobeID=painter@adobe.com

PersonGUID=7189F1490B80A4FEC6B81B51@AdobeID

ForceLanguage=

Language=en_US

[AMT]

; AMT Library version

Version=

; Enables the genuine AMTRetrieveLibraryPath algorithm

;  = disable

;  = enable

AMTRetrieveLibraryPath=

修改完后重新启动AE即可。如果没有权限修改，在painter.ini 文件上右击选择属性，在安全里更改权限即可。

前端解放生产力之–动画（Adobe Effects + bodymovin + lottie）的更多相关文章

  1. 解放生产力「GitHub 热点速览 v.21.51」

    作者:HelloGitHub-小鱼干 解放生产力一直都是我们共同追求的目标,能在摸鱼的空闲把赚了.而大部分好用的工具便能很好地解放我们的生产力,比如本周特推 RedisJSON 不用对 JSON 做哈 ...

  2. 解放生产力：Spring Boot的注解校验

    关于对象入参的校验,我们可能第一个想到的就是在Controller层或者Service层增加很多if else的判断,如: if (user.getPassword() == "" ...

  3. 前端提升生产力系列三（vant3 vue3 移动端H5下拉刷新，上拉加载组件的封装）

    | 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...

  4. 【前端性能】Web 动画帧率（FPS）计算

    我们知道,动画其实是由一帧一帧的图像构成的.有 Web 动画那么就会存在该动画在播放运行时的帧率.而帧率在不同设备不同情况下又是不一样的. 有的时候,一些复杂或者重要动画,我们需要实时监控它们的帧率, ...

  5. 前端开发日常——CSS动画无限轮播

    近来没有什么值得写的东西,空闲的时候帮前端的同学做了些大屏上的展示模块,就放在这里写写吧,手把手"需求->设计-> 实现",受众偏新手向. 为了直观便于理解, 直接把结 ...

  6. 前端基础-jQuery的动画效果

    阅读目录 隐藏 显示 切换 下拉 上卷 显示 一.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...

  7. 解放生产力，自动化生成vue组件文档

    一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么 ...

  8. 实战 target 选择器，解放生产力！

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

  9. Bodymovin：Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

    转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...

随机推荐

  1. Phaser3跟随自定义路径移动的赛车 -- iFIERO游戏教程

      racingcar 在线预览:http://www.ifiero.com/uploads/phaser/pathrotate/代码: var config = { type: Phaser.AUT ...

  2. Siki_Unity_2-2_NGUI_UI插件学习(3.6.8版本)（未学）

    Unity 2-2 NGUI UI插件学习(3.6.8版本)(未学)

  3. CSP201512-2：消除类游戏

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  4. Spring学习（3）：IOC基础（转载）

    一. IoC是什么 Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象 ...

  5. Mysql 表创建语句

    # 新建bigData数据库 CREATE DATABASE bigData; USE bigData; # 创建dept表 CREATE TABLE dept( id INT UNSIGNED PR ...

  6. 《C》数组

    数组 数组方法: var arr = [1, 2, 3]; arr.push(4)://arr='[1, 2, 3, 4]' 向末尾添加一个或者多个元素 arr.pop()://删除末位元素 var ...

  7. 软件工程团队项目第一个Sprint评论

    (1)跑男:话说我没怎么听懂这个游戏是怎么玩的,可能是由于这是第一组,所以我没有反应过来把,界面设计的还可以,但是像设置,选关,帮助真心没看懂.有一种感觉就是,这个游戏是由一堆的漂亮的图片拼起来的,还 ...

  8. FPGA论文

    基于 NetFPGA 的 VCP 网络的设计与实现 --可变结构拥塞控制协议(VCP),适应于高带宽时延乘积网络的显式拥塞控制协议 无源光网络(PON) 1.区块链技术发展,物联网设备激增,服务器压力 ...

  9. J2EE,J2SE,J2ME,JDK,SDK,JRE,JVM区别（转载）

    转载地址:http://blog.csdn.net/alspwx/article/details/20799017 一.J2EE.J2SE.J2ME区别 J2EE——全称Java 2 Enterpri ...

  10. alpha6/10

    队名:Boy Next Door 燃尽图 晗(组长) 今日完成 学习了css的一些基本操作. 明日工作 抽空把javascript的基本操作学习一下 还剩下哪些任务 微信API还有京东钱包的API. ...