1. 修改动画中的图片素材

在设计动画时，需要做的就是使用同一张图来作为动画中的一个图片占位符，合理规范图片层的命名即可。因为Lottie_api 中并没有替换图片素材的方法，所以我们需要使用的是直接修改渲染完的动画中的URL。当SVG动画中有位图元素时，导出动画后会在 data.json 的同级目录下生成一个 images 文件夹，里面就放置了使用的位图。这个就是基本操作，例如青藤小编将需要交互的图片名字命名为sample.jpg，放入动画中后，将图层的名字重命名为「.GiverMark」。当我需要更改这个动画中图片的信息时，我只需要通过 JS 去找到Class=“GiverMark”，然后修改图片的URL就行了。默认情况下，被更新的图片会自动填充满这个容器的宽高。具体的参考代码如下：

$(‘.GiverMark image’).attr(‘href’,’www.test.com/test.jpg’);

2. 修改文字内容

修改动画中的文字内容的方法，我们需要根据具体情况分析，在不同的情况下需要选择不同的交互方法。首先当修改的文字层没有添加文字Animate或者动画中其他部分与之没有任何关联时，修改的方法同图片修改URL，我们只需要给文字图层一个规范的命名即可。这样前端程序就能通过 JS 去更改文字层的内容，参考代码如下：

$(‘.FeedBackMark text tspan').html(‘测试文字’);

3. 修改图层的任一属性

因为 json 文件中保存了所有 AE 中图层的属性和值，所以我们同样可以使用 getKeyPath 方法来定向修改图层中的某一属性，例如可以改变位置，更改缩放大小，更改填充颜色等等。这里要注意的是 AE 中的动画属性的值大多是以数组来保存的，所以我们传递参数的时候要根据该属性的值的类型，来传递修改后的值。另外，修改颜色时我们传递的颜色色值必须是 rgba 格式，且需要对颜色进行换算。

4. 修改动画配色

虽然我们可以通过 lottie_api 来逐一修改图层的颜色，但是当我想要更改整个动画的配色时，显然这样的方法不合理。这里有一个更科学的方法，那就是在合成中添一个 null 图层，然后为其添加 color control 效果，再把动画的图层中的颜色，通过拉索工具连接到这个 null 颜色控制中。这样前端只需要通过一行代码就可以访问，并改变 color ctrl 图层中的颜色，重渲染时与之有关的动画中的配色即会全部改变。

总之，作为交互动画的设计师，只用前端程序对接动画，这样最终我们才能做到动画和交互逻辑的完美落地。当然，想要了解更多交互设计相关资讯，请关注我们，下期咱们不见不散哦!