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 圖層中的顏色，重渲染時與之有關的動畫中的配色即會全部改變。
總之，作為交互動畫的設計師，只用前端程序對接動畫，這樣最終我們才能做到動畫和交互邏輯的完美落地。當然，想要了解更多交互設計相關資訊，請關註我們，下期咱們不見不散哦!