Bodymovin是支持將AE動畫導出為json格式文件的插件,方便開發者將動畫應用在網頁、移動應用和游戲等領域。Bodymovin支持導出高度還原的動畫效果,支持SVG和Canvas兩種渲染引擎,同時導出的json文件也是支持多平臺使用,如Web、iOS、Android等。因此,Bodymovin越來越受到開發者們的青睞。本文將著重講解Bodymovin生成的json文件結構及其使用方法。
{ "v": "5.5.9", "fr": 30, "ip": 0, "op": 180, "w": 640, "h": 640, "nm": "Comp 1", "layers": [ { "ddd": 0, "ind": 1, "ty": 3, "nm": "Layer 1", "sr": 1, "ks": { "o": { "a": 0, "k": 100 }, "r": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [ 306.5, 320, 0 ] }, "a": { "a": 0, "k": [ 150, 142.5, 0 ] }, "s": { "a": 0, "k": [ 100, 100, 100 ] } } } ] }
如上述json文件結構所示,包含了版本號、幀速率、項目起始時間、項目結束時間、畫布的寬高、組成畫布的所有圖層等屬性。其中每個圖層都包含了圖層的類型、名稱、位置、旋轉、大小和透明度等屬性。如果需要對某個圖層做進一步的控制,就可以利用這些屬性進行操作。
將Bodymovin生成的json文件引入到HTML文件中,可以通過bodymovin.loadAnimation()方法加載動畫文件,并創建動畫對象。通過動畫對象就可以進行控制了,如暫停、播放、重新播放、改變動畫速度和方向等等。同時,Bodymovin還支持鉤子函數,可以通過addListener()方法監聽某些事件,如動畫播放完成、進入某一幀等等。
綜上所述,Bodymovin提供了一種簡單易學、高效便捷的方式創建和應用動畫。在Web、移動端等領域都有著廣泛的應用。由于其生成的json文件結構清晰明了,開發者可以靈活地對動畫進行控制和調整。相信它在未來的應用場景中還會有更多的發展和應用。