前端解放生產力之–動畫（Adobe Effects + bodymovin + lottie）

大概好久好久之前，2017年，參加了第二屆中國前端開發者大會（FDCon2017），除了看了一眼尤雨溪，印象最深入的就是手淘渚薰分享的關於H5交互的內容了。時光荏苒，最近再次接觸，簡單回顧一下。php

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

首先是安裝AE，具體怎麼安裝就不贅述了，隨便一搜就有不少教程。前端

安裝完AE之後，裝一個AE的插件bodymovin, github地址爲: https://github.com/airbnb/lottie-web 在 'lottie-web/build/extension/'目錄下面有一個bodymovin.zxp的文件，nginx

這就是咱們要的插件了。git

安裝插件，能夠使用官方推薦的幾種方法：https://github.com/airbnb/lottie-web#option-1-recommendedgithub

本文嘗試了兩種方法：1. 使用 ZXP installer安裝，試了不少次，都已失敗了結。2. 將bodymovin.zxp文件後綴改爲.zip而後解壓，放到ae的安裝目錄下'\Adobe\CEP\extensions'成功:web

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.6 and add a key named PlayerDebugMode, of type String, and value 1. MAC: open the file ~/Library/Preferences/com.adobe.CSXS.6.plist and add a row with key PlayerDebugMode, of type String, and value 1.

接着就是打開AE，新建一個動畫或者導入一個AE模板，而後在 ‘編輯 > 首選項 > 常規’ 中將容許腳本寫入和訪問網絡勾上ajax

而後在‘窗口 > 擴展 > Bodymovin’將Bodymovin選中，會彈出一個插件框chrome

將上圖中1的位置選中，在2的位置選擇一個位置肯定，而後render，導出data.json和其餘文件，這時候能夠點擊preview進行預覽，只須要選擇剛纔導出的data.json文件便可。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:4340 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 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } 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 0; keepalive_timeout 65; #gzip on; server { listen 2323; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } #error_page 404              /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504  /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1;
 #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # 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 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 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=1 Language=en_US

修改後的painter.ini內容爲：

[Config] ; Use INI or use default options UseCfg=1 Name=Adobe After Effects CC 2017 LEID=V7{}AfterEffects-140-Win-GM Version=14.0.0 Serial=102310015133850186390073 ; AdobeID (stub) AdobeID=painter@adobe.com PersonGUID=7189F1490B80A4FEC6B81B51@AdobeID ForceLanguage=1 Language=en_US [AMT] ; AMT Library version Version=10 ; Enables the genuine AMTRetrieveLibraryPath algorithm ; 0 = disable ; 1 = enable AMTRetrieveLibraryPath=0

修改完後從新啓動AE便可。若是沒有權限修改，在painter.ini 文件上右擊選擇屬性，在安全裏更改權限便可。