大概很久很久以前，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. PHP自定义生成二维码跳转地址

      比较简单的一款PHP自定义生成二维码跳转地址,手机端微信扫码,自动跳转到定义好的链接.支持自定义生成二维码尺寸.间距等.    鼠标悬浮显示二维码弹出层,离开后消失.js实现,代码如下: $(fu ...

  2. 用gdb调试程序(Linux环境）

    一般来说,GDB主要帮忙你完成下面四个方面的功能: 1.启动你的程序,可以按照你的自定义的要求随心所欲的运行程序.    2.可让被调试的程序在你所指定的调置的断点处停住.(断点可以是条件表达式)   ...

  3. flask_sqlalchemy介绍

    快速入门 Flask-SQLAlchemy 使用起来非常有趣,对于基本应用十分容易使用,并且对于大型项目易于扩展.有关完整的指南,请参阅 SQLAlchemy 的 API 文档. 一个最小应用 常见情 ...

  4. RetinaNet 迁移学习到自标数据集

    Keras-RetinaNet 在自标数据集 alidq 上训练 detection model RetinaNet 模型部署与环境配置 参考README 数据预处理 数据统计信息: 类别:gun1, ...

  5. Python mutilprocessing Processing 父子进程共享文件对象?

    multiprocessing python多进程模块, 于是, Processing也是多进程的宠儿. 但今天讨论的问题, 似乎也能引起我们一番重视 直接上代码:     1 2 3 4 5 6 7 ...

  6. html、JSP运行原理

    HTML运行原理 1.本地运行      所谓本地运行就是直接用 浏览器打开 2.远程访问的原理示意图: 何为协议?计算机互相通信(网络)的规则.常见的协议有 http .smtp. ftp.pop等 ...

  7. 第一阶段android学习笔记

    1.学习<第一行代码> 第一个android项目: 项目的注意点,如创建项目时包名具有唯一性,在做项目的时候要手动改成Project模式.还知道了引用字符串的两种方式. AS项目的三种依赖 ...

  8. web压力测试_（收集）

    作者:ZeldaZzz链接:http://www.zhihu.com/question/19867883/answer/89775858来源:知乎著作权归作者所有,转载请联系作者获得授权. 一个完整的 ...

  9. Spring学习（七）——增强类

    Spring 切点 什么是切点?切点(Pointcut),每个程序类都拥有多个连接点,如一个拥有两个方法的类,这两个方法都是连接点,即连接点是程序类中客观存在的事物.但在这为数从多的连接点中,如何定位 ...

  10. 【Leetcode】771. Jewels and Stones

    (找了leetcode上最简单的一个题来找一下存在感) You're given strings J representing the types of stones that are jewels, ...