V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
bigxixi
V2EX  ›  分享创造

翻译了 AE 动效插件 Bodymovin 的项目介绍,将 AE 做的动画导出为 svg/canvas/html + js。

  •  
  •   bigxixi ·
    bigxixi · 2017-03-22 17:50:25 +08:00 · 18484 次点击
    这是一个创建于 2563 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这是 bodymovin 插件说明的中文版,由BigXiXi翻译, 原文地址: https://github.com/bodymovin/bodymovin
    注意!项目中除了 readme 保持更新,其他文件最新版请移步原版获取。
    文中 After Effects 术语参考自官方中文版 AE 。

    bodymovin

    After Effects 插件,用于将动画导出为 svg/canvas/html + js 。

    V 4.6.1

    • 修正 3D 方向控制[3D orientation fix]
    • 渲染性能提升[render improvements]

    V 4.6.0

    • 新操作界面![New UI!]
    • 支持投影效果器[Drop shadow effect support]
    • 做了偏移的图层动画效能提升[performance improvement on animations with offsetted layers]
    • 表达式效能提升[big performance improvement on expressions]
    • 加强了表达式支持[expressions expressions expressions]

    V 4.5.9

    • 修正表达式变量声明[expressions variable declaration fix]
    • 修正效果器控制类型[effect control type fix]

    V 4.5.8

    • 形状图层的填充规则(奇偶 /非零缠绕)及渐变填充模式[fill-rule for fills and gradient fills on shapes]
    • 用额外的小数位计算色值(提高计算精度)[rounding colors values with an extra decimal]
    • 如果属性表达式返回值为字符串,现在将作为数字计算[property expressions that return strings are evaluated as numbers]

    V 4.5.7

    • 修正单机模式自动播放问题[standalone autoplay fix]

    V 4.5.6

    • CEP 插件平台表达式实例修正[expression instance fix for CEP]
    • 表达式中条件判断语句的变量声明支持[new variables declarations in expression conditional statements]
    • 减少了不同端点数的形状导出时的文件体积[reduced filesize on exported shapes with different vertex count]
    • 当调用销毁时设置父级上下文(修正 webpack 的问题)[setting parents context when calling destroy (fixes webpack issue)]

    V 4.5.5

    • 文字动画选择器-三角形选择器修正[Text selector Triangle fix]
    • 对启用了表达式的效果器中的属性增加表达式支持[Expressions support for "active" property on effects]
    • 重新安排导出属性[Rearranged exporting properties]
    • 为做了动画的属性包含“ a ”属性[Included "a" property for animated props]
    • 文档更新[Docs updated]

    V 4.5.4

    • 增加单独修建路径支持[Trim path individually supported]
    • 修正 webpack 打包时的错误[bug fix that messed with webpack build]

    V 4.5.3

    • 跳过文字中的不换行空格[Skipping non breaking space on characters]
    • 优化色阶(单独控件)效果器[levels effect optimizations]
    • 加入形状图层“变换”属性表达式支持(还有几个 Rubberhose 脚本的 bug 待解决)[shape expressions transform properties added (Needed to fix a Rubberhose 2 issue)]
    • 在“变换”操作界面用表达式控制“变换”属性[transform properties in expression through transformInterface]

    V 4.5.2

    • 合成表达式界面默认返回[Comp expression interface default return]
    • HTML 渲染验证修复[HTML renderer validation fix]

    V 4.5.1

    • 修正修剪路径[Trim path fix]
    • 修正 HTML 渲染[Html renderer fixes]

    V 4.5.0


    直接从 adobe 在线商店获取! https://creative.adobe.com/addons/products/12557
    支持 AE CC2014 及以上版本。

    如果需要最最新的版本,可以从这里安装:

    安装方式 1 (推荐):

    • 打包为 zip 下载整个项目到本地。
    • 解压缩并从 '/build/extension' 找到 bodymovin.zxp 文件
    • 使用 aescripts.com 出品的 ZXP 安装器 进行安装。

    安装方式 2 :

    • 关闭 After Effects

    • 打包为 zip 下载整个项目到本地并解压 build/extension/bodymovin.zxp 文件到 Adobe CEP 文件夹( CEP 插件扩展平台):
      WINDOWS:
      C:\Program Files (x86)\Common Files\Adobe\CEP\extensions 或者
      C:<用户名>\AppData\Roaming\Adobe\CEP\extensions
      MAC:
      /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
      (你可以在终端中输入:
      cp -R 你解压后的目录 /extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
      然后输入:
      ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
      来保证正确复制了文件)

    • 编辑注册表:
      WINDOWS:
      找到注册表键值 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 增加一个键值名为 PlayerDebugMode, 类型为字符串(String), 值为 1 。
      MAC:
      打开文件 ~/Library/Preferences/com.adobe.CSXS.6.plist ( com.adobe.CSXS.???.plist 其中问号根据 AE 版本不同会有不同) 新加一行,键(key)为 PlayerDebugMode, 类型为字符串(String), 值为 1 。

    安装方式 3 :

    按照官方手册的指导安装 zxp 插件,地址如下(英文):   https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html
    直接跳到 "Install third-party extensions"

    安装完成后

    • 在 AE 里勾选 编辑 > 首选项 > 常规 > 允许脚本写入文件和访问网络( Mac 下为 After Effects > 首选项 > 常规 > 允许脚本写入文件和访问网络)。

    如何使用

    在 After Effects 中

    • 运行 AE 程序,选择 bodymovin 插件,位置是 窗口 > 扩展 > bodymovin [Window > Extensions > bodymovin]
    • 此时将弹出一个面板,列出了项目中的所有合成。
    • 在面板上点击刷新[Refresh]。
    • 选择你想要导出的合成。
    • 选择要导出到的地址[Destination Folder]。
    • 点击渲染[Render]。
    • 找到导出的 json 文件 (如果动画中有图片资源或者 AI 图层, 将会同时生成一个 images 文件夹存放这些图片资源)。

    设置:

    分段: 分段导出你的动画。 如果你的动画有很多层,可以选择分段导出,这样就不会一次性全部加载。 导出工具将会根据图层开始时间进行分段。
    快照: 保存一张 svg 格式的快照作为动画的封面。渲染完动画后, 你可以截取任意一帧快照并保存到硬盘上。 我建议优化这张 svg 快照,可以利用一些工具比如 https://jakearchibald.github.io/svgomg/ 并好好设置一番。

    用于 HTML

    查看 demo ,有不同的动画加载方式:

    • 从 build/player/获取最新 bodymovin.js 文件
    • 在你的 html 文件中包含 bodymovin.js (发布时可以 gzip 压缩一下减少体积)
    <script src="js/bodymovin.js" type="text/javascript"></script>
    

    你可以调用 bodymovin.loadAnimation() 来开始动画。 可以用一个对象传递这些参数:

    • animationData: 包含导出的动画数据的对象。
    • path: 动画数据文件的相对路径。 (animationData 和 path 参数是互斥的)
    • loop: 循环设置,值为 true / false / number (循环 /不循环 /循环 n 次( n 为输入值))
    • autoplay: 自动播放设置。 true 为准备就绪后自动播放, false 为不自动播放。
    • name: 动画名,用于后续引用。
    • renderer: 选择渲染器,值为'svg' / 'canvas' / 'html' 。
    • container: 需要渲染动画的 dom 元素。

    返回一个动画对象,你可以控制它播放、暂停、设置速度。。。。

    bodymovin.loadAnimation({
      container: element, // 渲染动画的 dom 元素
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: JSON.parse(animationData) // 动画数据
    });
    
    • 如果想用已有的 canvas 画布来绘制, 可以额外传递一个对象: 'renderer' 并按参考如下配置:
    bodymovin.loadAnimation({
      container: element, // 渲染动画的 dom 元素
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: animationData, // 动画数据
      rendererSettings: {
        context: canvasContext, // canvas 画布上下文
        scaleMode: 'noScale',
        clearCanvas: false
      }
    });
    

    如果你这么做了, 必须在每一帧渲染后清除画布。
    另一个加载动画的办法是为 dom 元素加上特定的属性。 你需要包含一个 div 元素,并设置他的 class 为 bodymovin 。 如果你在页面加载前这么做了,它将自动检测页面上所有 class 标签值为"bodymovin"的元素。 或者你可以在页面加载完成后调用 bodymovin.searchAnimations(),同样会检测页面上所有 class 标签值为"bodymovin"的元素。

    步骤:

    • 将 data.json 文件放到 html 文件同级的一个文件夹中。
    • 创建一个将要包含动画的 div 元素。

    必要属性
    一个名为"bodymovin"的 class
    一个 "data-animation-path" 属性,值为 data.json 的相对路径。
    可选属性
    一个 "data-anim-loop" 属性,控制循环。
    一个 "data-name" 属性,用于指定一个名字作为播放控制的控制目标。

    示例

     <div style="width:1067px;height:600px" class="bodymovin" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>
    

    用法

    动画实例可用的方法如下:
    anim.play()
    anim.stop()
    anim.pause()
    anim.setSpeed(speed) -- 播放速度 , 1 为正常速度。
    anim.goToAndStop(value, isFrame) 跳转到某一时间(或帧)并停在那。第一个参数(value)是数值。第二个参数是布尔值,"true"则第一个参数表示“帧”,“ false ”则表示“时间”。
    anim.goToAndPlay(value, isFrame) 跳转到某一时间(或帧)并播放。第一个参数(value)是数值。第二个参数是布尔值,"true"则第一个参数表示“帧”,“ false ”则表示“时间”。
    anim.setDirection(direction) -- 播放方向,正数和 0 为正常播放,负数为倒放。
    anim.playSegments(segments, forceFlag) -- 播放指定段落。第一个参数是一个数组,形式为[(a,b),(c,d),(e,f)...]则播放第 a 帧到 b 帧,然后第 c 帧到 d 帧, e 到 f …… ,第二个参数为布尔值,“ true ”则立刻播放参数一中的片段,“ false ”则播放完当前动画后再开始播放片段。
    anim.destroy()

    bodymovin 有 8 个方法:
    bodymovin.play() -- 播放指定动画, 1 个参数动画名
    bodymovin.stop() -- 停止播放指定动画, 1 个参数动画名
    bodymovin.setSpeed() -- 第一个参数设置动画速度 (1 为正常速度),第二个参数动画名可选。
    bodymovin.setDirection() -- f 播放方向,正数和 0 为正常播放,负数为倒放,第二个参数动画名可选。
    bodymovin.searchAnimations() -- 检测 class 值为"bodymovin"的元素。
    bodymovin.loadAnimation() -- 前面已有介绍, 返回一个可单独控制的动画实例。
    bodymovin.destroy() --销毁和释放资源。 DOM 元素将会被清空。
    bodymovin.registerAnimation() -- 你可以直接用 registerAnimation 来注册一个自定义元素,它必须包含"data-animation-path"属性并指向 data.json 的地址。
    bodymovin.setQuality() -- 画质设置,调整动画播放器性能。默认为高画质(high), 可选值为'high'、'medium'、'low', 或者大于 1 的数字。对于有的动画这些设置差别不大。

    事件

    • onComplete
    • onLoopComplete
    • onEnterFrame
    • onSegmentStart

    或者你可以对以下事件设置监听(addEventListener):

    • complete
    • loopComplete
    • enterFrame
    • segmentStart

    查看 demo 文件夹中的例子,或者访问 http://codepen.io/airnan/ 可以看到精彩的演示动画

    一些建议

    文件

    如果你使用了图片资源或者未转成形状图层的 Adobe Illustrator 文件图层, 将会同时生成一个 images 文件夹存放这些图片资源。(我建议将 ai 图层转换为形状图层,这样他们会被导出为矢量数据,只需在 AE 中导入的 ai 图层上右键 > 从矢量图层创建形状) 注意,如果不同的带图片资源的动画导出到同一地址, images 文件夹将会被覆盖。

    性能

    Bodymovin 的动画都是实时渲染的。 虽然经过了大量优化,最好还是控制 AE 工程文件体积在一个必要的值。
    更多的优化也正在进行中,但请避免这种情况:绘制了一个巨大的形状图层,但是只通过遮罩使用其中一小部分。
    过多的节点同样会影响性能。

    帮助

    如果你有动画导出失败或者想让我帮你导出, 不要犹豫请告诉我。
    我很乐意能找到这个插件的不足之处。
    我的邮箱是 [email protected]

    演示

    访问 codepen 查看动画演示

    支持的 AE 特性

    • 插件支持预合成、形状图层、固态层、图片、空对象以及文字图层。
    • 支持遮罩和反向遮罩。也许别的模式也会支持,但是会对性能造成巨大影响。
    • 支持时间重映射(是的没错!)。
    • 支持形状图层的形状、矩形、椭圆和星形。
    • 目前只支持滑块效果。
    • 支持部分表达式。更多介绍可以查看这里(英文)
    • 不支持: 图像序列、视频和音频 (也许未来会支持)。
    • 不要伸缩图层!不知为何,伸缩图层会破坏导出的数据,所以不要做这个操作。

    其他说明

    • 如果你想修改或者解析动画播放器,有一些 gulp 命令可以简化这个操作。
    • 看看这些 codepen 上的优秀作品 访问 codepen 作品集
    • gzip 压缩一下动画 json 数据文件和播放器 js 文件可以有效减少文件体积。如果你用在项目里,我建议你这么做。
    6 条回复    2019-04-24 14:04:05 +08:00
    fhefh
        1
    fhefh  
       2017-03-22 23:07:25 +08:00
    这个不错 666
    designer
        2
    designer  
       2017-03-23 00:46:09 +08:00 via iPhone
    厉害
    HiJony
        3
    HiJony  
       2017-03-24 15:14:54 +08:00
    感谢感谢,能不能顺便把 lottie 翻译下:D
    bigxixi
        4
    bigxixi  
    OP
       2017-03-24 16:39:34 +08:00
    @HiJony 翻译了安卓的: https://github.com/bigxixi/lottie-android
    ios 和 rn 的翻页里头也提供了链接
    bigxixi
        5
    bigxixi  
    OP
       2017-03-26 19:00:26 +08:00
    这里好像不能更新已发布的主题?
    我汉化了 bodymovin 插件,说明及下载见:
    https://zhuanlan.zhihu.com/p/25935006
    欢迎试用
    raiz
        6
    raiz  
       2019-04-24 14:04:05 +08:00
    @bigxixi 最近项目需要用到类似的技术,将 AE 动画实时渲染出来,但不是输出到一个 view,而是输出成视频图像,想了解 bodymovin json 文件的结构,发现这个项目 github 地址变了,好像没有文档定义 bodymovin 的文件解析规范,请问有这方面了解么?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3158 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 13:02 · PVG 21:02 · LAX 06:02 · JFK 09:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.