AE动画和HTML/SVG/CanvasProcessing的神奇结合

Posted 2021-03-28 坏打印机

    AE是Adobe旗下的影视后期特效软件，html/SVG/Canvas是Web网页的一部分，Processing则是最流行的编程艺术软件。当这三者碰撞在一起的时候，让我今天一整天都很兴奋。

    

---

第一部分：

AE动画和Processing

使用：http://atarabi.com/kikaku/script/processing/#download（日文）

    个人理解，Processing是一款代码驱动的，以呈现视觉效果为目的的软件。在之前也用它做过一些小程序实现AE不能或者难以实现的效果。

    例如下面这个利用图片生成点线网格效果。

    但是现在，有了Processing for AE，我们可以直接在AE里面，用代码去驱动AE实现不了的一些效果。Processing for AE是一款Adobe的拓展插件，它的安装和一般插件不同，具体请参考上面给出的网址。

    Processing for AE的界面如下：

    我尝试用Processing for AE在AE里面实现之前我做的Motion Ball转换图片的效果如下：

    总结：Processing for AE真的很神奇，不过也存在一些不方便的地方：

    ①、调试很不方便，有时会莫名崩，我都是在processing里面调试好了再复制到AE里面

    ②、保存代码文件不方便，不知道是不是我自己的缘故

    ③、引用外面的库，暂时不知道如何引用

    总的来说，Processing for AE打开了新的、有趣的世界。

---

第一部分：

AE动画和HTML/SVG/Canvas

使用：https://github.com/bodymovin/bodymovin

    以前网页上的动画要和AE结合，往往只能导出gif，偏偏gif不仅体积大，而且呈现效果也不佳，有颜色限制，常有噪点。于是人们开始寻找别的出路，在WebP、APNG等还没开始普及的现在，SVG、Canvas等成为了大多数人的选择。

    BodyMovin给出了一个AE动画和HTML/SVG/Canvas的方案。

    以下是BodyMovin自带的demo：

    总结：BodyMovin使用非常方便，很完善成熟。可以允许嵌套合成，同时会把引用到的位图导出，并自动链接好。

    但是因为一些客观因素，它也并不能完全实现AE里面所有的动画，例如一些涉及像素操作的特效（模糊、扭曲等），将会被忽略掉。

---

    

    总的来说，无论是什么，技术上的问题归根结底还是编程，这是基底。

    折腾了一天，学习了两个东西，很开心。希望有兴趣的同学可以去尝试试试这两个扩展插件，就像两座桥，把AE连向两个不同的新的领域。

    晚安。