跳到主要内容

将After Effects动画导出为HTML5

网上的动画就在这里。它来自于微妙的动作,有助于带来我们的UI设计生活,完全动画的Canvas体验和WebGL实验,挑战我们曾经认为在浏览器中可能实现的目标。

虽然开发人员的创造力和浏览器的功能正在增加,但网络上的动画长期以来与视频的关系很差 - 这是动画制作界多年来一直谨慎对待的事情。

开发人员依靠GreenSock和Snap.svg等库来完成通过JavaScript重现动画的繁重工作。虽然这些工具具有很大的灵活性,但它们无法与可以实现的动画的精确性和微妙性相比较After Effects CC自己的时间表和缓动图。从Web角度来看,After Effects非常适合在将代码提交到代码之前调整和尝试运动。

character with 'Ae' written on its belly

Bodymovin:神奇的'网络渲染'功能Adobe忘了[所有图片:饥饿的三明治俱乐部]

输入Bodymovin,Adobe After Effects的突破性扩展,可将动画直接从After Effects导出到JavaScript,以便在浏览器中显示和操作。由...制作埃尔南·托里西,Bodymovin消除了动画师和开发者之间的许多障碍。在其基础级别,该插件充当Adobe忘记的神奇的“web渲染”功能。最先进的它为互动动画开辟了新的可能性。

Bodymovin是工具,插件和系统链中的一个环节,可以满足其中一些新的可能性。Airbnb的LottieFacebook的关键帧两者都建立在这些基础上 - 他们最终将最强大的动画工具带到了网络上。

为什么要使用Bodymovin?

SVG已经接管了互联网,并带来了一切都应该是高质量,轻便和可扩展的期望。 Bodymovin将你的作品中的所有内容呈现为精美的SVG,使其矢量质量保持在任何大小。没有更多的妥协来减轻GIF或强迫您的用户加载膨胀的视频文件。

除了简化导出动画的过程外,Bodymovin还为开发人员提供了更多创造新互动体验的潜力。查看CodePen,了解扩展程序的一些奇妙方式 - 从交互式IK装备到动画类型的交互式文本。

Ae character and www. character

一切都呈现为一个网络友好的SVG,既清晰又轻盈

导出的动画可以在浏览器中像任何其他元素一样进行操作,使我们能够将动画视为Web设计中的交互式实验工具。现在因为Bodymovin,将您的动画带到网络上从未如此简单。在本教程中,您将学习如何从After Effects导出动画,并创建一个响应用户单击的简单循环动画。

如何准备After Effects文件

对After Effects功能的支持已大大改进,您可以直接获得相当不错的结果。话虽这么说,你喜欢飞行的3D图层不会很好玩,所以在开始之前要注意限制。在开始项目之前,请始终下载最新版本的Bodymovin并检查GitHub页面以查看当前支持的功能。

不要太急于移动到有趣的部分...整洁的文件使整洁的头脑。在这种情况下,它们还可以帮助您从浏览器中完成一些额外的工作,并为您提供丝般顺畅的播放效果。首先,您需要确保您的内容位于After Effects形状图层中,以获得完整的矢量能力。要将任何Illustrator文件转换为形状图层,只需右键单击并选择“从矢量图层创建形状”。在此阶段不是形状的任何图层将被转换为图像,并且它们将不会呈现为矢量。

接下来,检查您的图层和子图层;你很有可能在不牺牲任何东西的情况下简化形状的内容。尝试将组,路径和填充的数量减少到最基本的要素。

小心面具

面具是在这个阶段滑倒的简单方法。请注意,alpha蒙版将与SVG渲染器一起使用,但如果您选择切换到Canvas,则不会显示。面罩的性能可能很昂贵,因此请高效使用。

渲染

Bodymovin分为两个部分 - 一个将动画数据转换为JSON文件的After Effects扩展,以及一个包含在您的网页中的Bodymovin.js播放器,可以解释此文件并在浏览器中呈现它。

认为你的文件很好用吗?通过Window> Extensions打开Bodymovin扩展,然后打开Bodymovin。

点击刷新后,您将看到此After Effects项目中所有合成的列表。选择您选择的comp,然后在Web项目中选择一个目标文件夹。当你开心的时候,只需点击渲染即可看到魔法发生。完成后,您将收到“完成”消息。恭喜!您刚刚导出了一个JSON文件,其中包含播放器重新创建动画所需的所有信息。

two characters

检查图层 - 它可能是After Effects中不支持的功能或表达式

要测试新导出的动画,请单击“预览”>“当前渲染”,并记住擦除时间轴,因为您可能会发现与您期望的内容略有不同的内容。如果您确实发现任何问题,请跳回并检查您的图层 - 它可能是一个不受支持的功能或After Effects中使用的表达式。

一些After Effects插件如Rubberhose现在支持Bodymovin。 Rubberhose使用引导层和隐藏层。要激活它们,只需单击所选组合旁边的设置cog并勾选所需的功能。

如果一切看起来都不错,那么在离开After Effects之前还需要做一件事。在这个阶段你应该有一个新的data.json文件描述你的动画,但没有Bodymovin播放器来解释它。在扩展程序中,单击右上角的“获取播放器”按钮并将其与JSON文件一起保存。

加载动画

现在,您拥有了所需的一切,让我们直接进入代码并放下基础知识,让您的动画显示在页面上。

首先制作一个新容器#anim_container保持你的动画。你还需要包括Bodymovin.js关闭正文标记之前的文件。接下来告诉Bodymovin有关动画的所有内容并将其加载到新容器中。

让我们一步一步地完成设置:

var container = document.getElementById('anim_container'); //设置我们的动画var animData = {container:container,renderer:'svg',autoplay:true,loop:true,path:'data.json'}; var anim = bodymovin.loadAnimation(animData);

您需要定义动画的所有参数。告诉Bodymovin您想要加载动画的容器,然后告诉它将动画渲染为SVG元素。接下来,告诉动画在加载后立即播放,并且希望它在完成时循环回到开始。

path属性告诉Bodymovin播放器在哪里可以找到动画的JSON数据文件。由于跨源资源共享策略(CORS),您将用于访问JSON文件的技术仅在您位于服务器或本地服务器上时才有效。要在本地工作,可以将data.json转换为将对象分配给变量的JavaScript文件。在这种情况下,您的设置可能如下所示:

   

刷新页面,您的动画应该在容器内播放。使用开发工具进行选择,您将看到动画中的每个元素现在都包含在中标签,并正在实时转换。

看起来很棒,对吗?你现在应该在浏览器中显示一个漂亮,清晰的动画(没有看到可怜的视频标签......)。动画将始终缩放以适合其容器,因此请继续将其炸毁!

Bodymovin有一系列强大的方法可以在加载后控制动画。调用类似的方法Anim.pause()要么Anim.setDirection()将使您能够以不同的方式操纵播放。我们来看一些例子:

  • Anim.setDirection(-1)将反向播放动画
  • Anim.pause()Anim.play()将启动和停止动画
  • Anim.setSpeed(0.5)将以半速播放动画

添加互动

在下一步中,您将探索通过JavaScript向动画添加交互的一些不同方法。在这个例子中,我们导出一个带有两个部分的After Effects动画:A部分和B部分.A部分使用从1到20的框架(三角形握着它的pogo)B部分使用20到40帧(三角形是上下跳动)在弹簧高跷上)。

现在,你想在一个循环中播放a部分然后(仅在用户点击之后)播放和循环部分B.你可以利用playSegments属性以这种方式分割动画。此方法将采用两个参数 - 具有起始值和结束值的数组以及第二个布尔值isFrame。将此设置为true将告诉动画将开始和结束值读取为帧,而false将告诉它将这些值作为时间读取。

anim.pause(); anim.playSegments([0,20],true);

添加它会告诉Bodymovin在第一帧暂停并仅播放0到20帧的动画。当您使用a设置动画时循环:是的属性这将继续一次又一次地播放A节。

让我们建立整个例子。在本例中,您将使用两段动画,因此您将创建两个函数:

var container = document.getElementById('anim_container'); //设置我们的动画var animData = {container:container,renderer:'svg',autoplay:false,loop:true,path:'data.json'}; var anim = bodymovin.loadAnimation(animData); //加载动画时,运行我们的firstLoop函数anim.addEventListener('DOMLoaded',firstLoop); //创建我们的播放函数函数firstLoop(){anim.playSegments([0,20],true); }; function secondLoop(){anim.playSegments([20,40],true); }; //侦听单击事件container.addEventListener('click',function(event){anim.addEventListener('loopComplete',secondLoop);});

路要走!现在你的动画将一直循环直到用户点击它,然后它将开始第二个循环。现在唯一的问题是像这样的跳跃是非常突然的,它可能破坏动画的平滑性。

一个理想的情况是包括动画的第三部分,一部分从握住弹簧高跷到跳跃。现在你的结构看起来像这样:

  • FirstLoop- 第0帧到第20帧
  • 过渡- 第20至30帧
  • SecondLoop- 第30至50帧

我们希望您的动画保持在第一个循环中,直到它被点击为止。此时,您将需要等待当前循环的结束并进入转换。转换完成后,转到第二个循环。这听起来很复杂,但和我在一起!这是您的完整代码:

var container = document.getElementById('anim_container'); //设置我们的动画var animData = {container:container,renderer:'svg',autoplay:false,loop:true,path:'data.json'}; var anim = bodymovin.loadAnimation(animData); //加载动画时,运行我们的firstLoop函数anim.addEventListener('DOMLoaded',firstLoop); //创建我们的播放函数函数firstLoop(){anim.playSegments([0,20],true); }; function transition(){anim.playSegments([20,30],true); anim.removeEventListener( 'loopComplete'); anim.addEventListener('loopComplete',secondLoop); }; function secondLoop(){anim.playSegments([30,100],true); anim.removeEventListener( 'loopComplete'); }; //侦听单击事件container.addEventListener('click',function(event){anim.addEventListener('loopComplete',transition);});

点击,你正在使用LoopComplete听众要等到你到达循环的最后一帧,然后运行你的过渡()功能。在这里,您删除最后一个侦听器,播放下一组帧,然后再次执行相同操作。转换完成后,它将调用SecondLoop()

而已!

您今天已经使用了Bodymovin的一些功能,但如果您有兴趣了解有关该插件的更多信息,您可以找到有关该插件的大量信息。Bodymovin GitHub页。有关更多示例,请查看令人印象深刻的Bodymovin CodePen集合。

希望本教程能让您了解使用After Effects和Bodymovin为网络制作一些超酷动画的各种方法!

finished animation with triangles on pogo sticks

动画的每个部分的单独部分

您现在可以设置要为Web导出的动画,将导出的文件导入浏览器并使您的动画响应单击。超越您之前使用的MP4文件,并期待Bodymovin在未来创建更丰富的Web体验。

能够让动画师在开发过程中密切参与变得越来越重要,网页动画领域的发展速度非常快。随着不断增加的新扩展,插件和框架的集合,动画师和开发人员可以期望这个过程随着时间的推移变得更容易和更好。我迫不及待地想看看未来会怎样。

这篇文章最初出现在网络杂志在2017年。在这里订阅

阅读更多:



翻译字数超限