[{"data":1,"prerenderedAt":480},["ShallowReactive",2],{"init":3,"post-aftereffeccts-lottie-wiggle":97,"mdc--inx9rw-key":113},{"authors":4,"categories":24,"tags":39},[5,10,14,20],{"id":6,"name":7,"bio":8,"icon":9,"xId":9,"tiktokId":9,"youtubeId":9},31,"AOI","最近イラスト描き始めたWebデザイン初心者🐣\nブログで学んだことを書き綴っていきます！","",{"id":11,"name":12,"bio":13,"icon":9,"xId":9,"tiktokId":9,"youtubeId":9},30,"ひじき","TypeScriptで食ってる開発者です。\nお役立ちツールや小規模のiOSアプリを運営してます。\n今はAfter Effectsのプラグイン・YouTube Data APIを勉強中。\n",{"id":15,"name":16,"bio":17,"icon":9,"xId":18,"tiktokId":9,"youtubeId":19},29,"やきせん","あしたなでMVのアニメーション作っています。\nモーショングラフィックスを勉強中。\nYouTubeも見に来てね📺","https://x.com/kyouha_yaki29","https://youtube.com/@asitana?si=QbNDdd5t99zib51V",{"id":21,"name":22,"bio":23,"icon":9,"xId":9,"tiktokId":9,"youtubeId":9},28,"デザイン部運営局","Webデザインやグラフィック、アプリ、プラグイン、広告、CMなどを制作しています。\nデザインに関わるみなさんに、ちょっと役立つ情報をシェアします！",[25,29,34],{"id":26,"key":27,"name":28,"icon":9,"icatch":9},10,"design","デザイン",{"id":30,"key":31,"name":32,"icon":9,"icatch":33},9,"movie","動画","category/icatch/PGoD6BD273rXJ53lAyOj0j8IOPk42NpN.json",{"id":35,"key":36,"name":37,"icon":9,"icatch":38},6,"develop","開発","category/icatch/FsM1gE1f65ewXN9mglVbb79ZLCwhqIhn.json",[40,46,52,58,64,70,76,81,87,92],{"id":41,"key":42,"name":43,"textColor":44,"bgColor":45,"icon":9,"icatch":9},43,"empathy-challenge","共感性チャレンジ","#FFFFFF","#F0602A",{"id":47,"key":48,"name":49,"textColor":50,"bgColor":51,"icon":9,"icatch":9},39,"unix-linux","Unix・Linux","#FFF6CA","#2A2A2A",{"id":53,"key":54,"name":55,"textColor":56,"bgColor":57,"icon":9,"icatch":9},36,"premierepro","Premiere Pro","#E2E0FD","#523A9A",{"id":59,"key":60,"name":61,"textColor":62,"bgColor":63,"icon":9,"icatch":9},35,"aftereffects","After Effects","#CFD2FC","#3727A5",{"id":65,"key":66,"name":67,"textColor":68,"bgColor":69,"icon":9,"icatch":9},34,"illustrator","Illustrator","#F79E00","#000000",{"id":71,"key":72,"name":73,"textColor":74,"bgColor":75,"icon":9,"icatch":9},33,"photoshop","Photoshop","#78E2F1","#34539D",{"id":77,"key":78,"name":79,"textColor":69,"bgColor":80,"icon":9,"icatch":9},27,"tips","Tips","#EDEDED",{"id":82,"key":83,"name":84,"textColor":85,"bgColor":86,"icon":9,"icatch":9},26,"typescript","TypeScript","#ffffff","#3D82DA",{"id":88,"key":89,"name":90,"textColor":69,"bgColor":91,"icon":9,"icatch":9},25,"javascript","JavaScript","#F3DC65",{"id":93,"key":94,"name":95,"textColor":85,"bgColor":96,"icon":9,"icatch":9},24,"nodejs","Node.js","#1B7352",{"item":98},{"title":99,"titlePrefix":100,"description":101,"slug":102,"icatch":103,"content":104,"tags":110,"updatedAt":111,"publishedAt":112,"authorId":15,"categoryId":30},"wiggleがLottieで使えない場合","AfterEffects","AfterEffectsでのwiggleを使ったアニメーションをLottieアニメーションを作る時の気をつけるポイントについて書きました","aftereffeccts-lottie-wiggle","note/icatch/HcKGxcN66TbVQlQjZ4QbjTnO7oyz6GmT.webp",{"cwd":105,"data":106,"history":107,"messages":108,"value":109},"/workspace",{},[],[],"\u003Cp>Wiggle等のエクスプレッションを使ったアニメーションをLottieアニメーションとして書き出した時に学んだことを自身の備忘録として残します。\u003C/p>\n\u003Cul class=\"toc\">\u003Cli>\u003Ca href=\"#エクスプレッションをキーフレームに変換\">エクスプレッションをキーフレームに変換\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"#書き出しを軽くする為に「スムーザー」の処理を加える\">書き出しを軽くする為に「スムーザー」の処理を加える\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"#エクスプレッションの削除\">エクスプレッションの削除\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"#まとめ\">まとめ\u003C/a>\u003C/li>\u003C/ul>\n\u003Cp>\u003Cstrong>Aeでのプレビュー、MP4、GIFなどでの書き出し\u003C/strong>\u003Cbr>\n\u003Cimg src=\"https://storage.deza-bu.com/note/post/hWaU5326OYAHVaFDLK1OjMH7Td2qaIn0.gif\" alt=\"画像\">\u003C/p>\n\u003Cp>\u003Cstrong>JSONファイルをWebでの反映\u003C/strong>\u003Cbr>\n\u003Cimg src=\"https://storage.deza-bu.com/note/post/Swduxcs0Mkl8npMqKeV5ZBqPvFWDJyTi.gif\" alt=\"画像\">\u003C/p>\n\u003Cp>今回のユラユラしたアニメーションは、\u003Cbr>\n\u003Cspan class=\"markerpen\">トランスフォーム「位置」にエクスプレッション wiggle(2,2) で動かしています。\u003C/span>\u003C/p>\n\u003Cp>AeのプレビューやMP4、GIFなどで書き出した時はユラユラした動きですが、JSONで書き出すと高速でガタガタした動きになってしましました。\u003Cbr>\n原因としては、下記の理由だと考えられます。\u003Cbr>\n　\u003C/p>\n\u003Cdiv class=\"notice notice__red\">\u003Cdiv>\n\u003Cp>\u003Cstrong>エクスプレッションが対応されていない\u003C/strong>\u003Cbr>\nLottieの公式によるとwuggleなどのネイティブ関数がサポートされていないのが原因みたいです。\u003Cbr>\n\u003Cimg src=\"https://storage.deza-bu.com/note/post/sVl98fCEEDTqcJwXioNvy1Ztjh6TMVXm.png\" alt=\"画像\">\u003C/p>\n\u003Cp>\u003Ca href=\"https://lottie.airbnb.tech/#/web?id=troubleshooting\">Lottieの公式の記事\u003C/a>\u003C/p>\n\u003C/div>\u003C/div>\n\u003Ch2 id=\"エクスプレッションをキーフレームに変換\">エクスプレッションをキーフレームに変換\u003C/h2>\n\u003Cp>キーフレームを最初から手打ちし直す悪夢がよぎりますが、実は作ったエクスプレッションをキーフレームに変換する機能がAeにはあります！\u003C/p>\n\u003Cp>\u003Cstrong>右クリック → キーフレーム補助 → エクスプレッションをキーフレームに変換\u003C/strong>\u003C/p>\n\u003Cp>\u003Cimg src=\"https://storage.deza-bu.com/note/post/uWsxxxFo2NS2JpyowXiRdPF1r018mAOl.png\" alt=\"画像\">\u003C/p>\n\u003Cp>　\u003Cbr>\n　\u003C/p>\n\u003Cp>wiggle(2,2)のエクスプレッションの上にキーフレームが打たれました。\u003Cbr>\n\u003Cimg src=\"https://storage.deza-bu.com/note/post/9KBfIJOfsz3DnXJzEmP6YKPZdYE7cQIy.png\" alt=\"画像\">\u003C/p>\n\u003Cp>　\u003C/p>\n\u003Cp>ただ、これだけだと\u003Cspan class=\"markerpen\">キーフレームが多すぎて\u003C/span>書き出す時に重くなります、、\u003C/p>\n\u003Ch2 id=\"書き出しを軽くする為にスムーザーの処理を加える\">書き出しを軽くする為に「スムーザー」の処理を加える\u003C/h2>\n\u003Cp>\u003Cstrong>ウィンドウ → スムーザー\u003C/strong>\u003Cbr>\n許容量の数値を良い感じのキーフレームの数になるように入力\u003Cbr>\n\u003Cspan class=\"markerpen\">※今回は許容量3で良い感じになりましたが、ここはご自身で色々試してみてください。\u003C/span>\u003Cbr>\n\u003Cimg src=\"https://storage.deza-bu.com/note/post/sBw9WOWFZMm1F0ijI6fYYDgr6SlnvX47.png\" alt=\"画像\">\u003C/p>\n\u003Cp>　\u003C/p>\n\u003Cp>スムーザを加えたwiggle(2,2)のキーフレーム\u003Cbr>\n\u003Cimg src=\"https://storage.deza-bu.com/note/post/BfeyaR1lwvuBmOS1kthKGaRDcmLpS3zl.png\" alt=\"画像\">\u003Cbr>\nキーフレームの数が少なくなり、アニメーションが滑らかになり、書き出したデータも軽くなります。\u003C/p>\n\u003Ch2 id=\"エクスプレッションの削除\">エクスプレッションの削除\u003C/h2>\n\u003Cp>最後にエクスプレッションのWiggle(2.2)を削除します。\u003Cbr>\n\u003Cspan class=\"markerpen\">※ここでエクスプレッションを削除しないと反映されないので、忘れずに削除しましょう！\u003C/span>\u003Cbr>\n\u003Cimg src=\"https://storage.deza-bu.com/note/post/OdzUXRIFLohfodxlmEv8eqSf5uetIdTA.png\" alt=\"画像\">\u003Cbr>\n↓↓↓\u003Cbr>\n\u003Cimg src=\"https://storage.deza-bu.com/note/post/OHR7oJNCk2O6U5UlhY47p9Uitsdjmu7i.png\" alt=\"画像\">\u003C/p>\n\u003Cp>BodymovinでJSONに書き出せばGIFやMP4で書き出したエクスプレッションの動きがJSONに反映されます。\u003C/p>\n\u003Ch2 id=\"まとめ\">まとめ\u003C/h2>\n\u003Cp>\u003Cstrong>①エクスプレッションでアニメーションを作成\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>②エクスプレッションをキーフレームに変換\u003C/strong>\u003Cbr>\n　右クリック → キーフレーム補助 → エクスプレッションをキーフレームに変換\u003C/p>\n\u003Cp>\u003Cstrong>③スムーザーで書き出しを軽くする処理\u003C/strong>\u003Cbr>\n　ウィンドウ → スムーザー\u003C/p>\n\u003Cp>\u003Cstrong>④エクスプレッションを削除\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>⑤BodymovinでJSONに書き出し\u003C/strong>\u003C/p>",[59,77],"2026-03-02T14:53:13.104Z","2026-02-28T05:43:00.148Z",{"data":114,"body":115},{},{"type":116,"children":117},"root",[118,126,170,189,204,220,235,274,279,284,292,299,308,320,333,338,367,384,388,421,426,430,438,451,464,472],{"type":119,"tag":120,"props":121,"children":122},"element","p",{},[123],{"type":124,"value":125},"text","Wiggle等のエクスプレッションを使ったアニメーションをLottieアニメーションとして書き出した時に学んだことを自身の備忘録として残します。",{"type":119,"tag":127,"props":128,"children":131},"ul",{"className":129},[130],"toc",[132,143,152,161],{"type":119,"tag":133,"props":134,"children":135},"li",{},[136],{"type":119,"tag":137,"props":138,"children":140},"a",{"href":139},"#エクスプレッションをキーフレームに変換",[141],{"type":124,"value":142},"エクスプレッションをキーフレームに変換",{"type":119,"tag":133,"props":144,"children":145},{},[146],{"type":119,"tag":137,"props":147,"children":149},{"href":148},"#書き出しを軽くする為に「スムーザー」の処理を加える",[150],{"type":124,"value":151},"書き出しを軽くする為に「スムーザー」の処理を加える",{"type":119,"tag":133,"props":153,"children":154},{},[155],{"type":119,"tag":137,"props":156,"children":158},{"href":157},"#エクスプレッションの削除",[159],{"type":124,"value":160},"エクスプレッションの削除",{"type":119,"tag":133,"props":162,"children":163},{},[164],{"type":119,"tag":137,"props":165,"children":167},{"href":166},"#まとめ",[168],{"type":124,"value":169},"まとめ",{"type":119,"tag":120,"props":171,"children":172},{},[173,179,183],{"type":119,"tag":174,"props":175,"children":176},"strong",{},[177],{"type":124,"value":178},"Aeでのプレビュー、MP4、GIFなどでの書き出し",{"type":119,"tag":180,"props":181,"children":182},"br",{},[],{"type":119,"tag":184,"props":185,"children":188},"img",{"src":186,"alt":187},"https://storage.deza-bu.com/note/post/hWaU5326OYAHVaFDLK1OjMH7Td2qaIn0.gif","画像",[],{"type":119,"tag":120,"props":190,"children":191},{},[192,197,200],{"type":119,"tag":174,"props":193,"children":194},{},[195],{"type":124,"value":196},"JSONファイルをWebでの反映",{"type":119,"tag":180,"props":198,"children":199},{},[],{"type":119,"tag":184,"props":201,"children":203},{"src":202,"alt":187},"https://storage.deza-bu.com/note/post/Swduxcs0Mkl8npMqKeV5ZBqPvFWDJyTi.gif",[],{"type":119,"tag":120,"props":205,"children":206},{},[207,209,212],{"type":124,"value":208},"今回のユラユラしたアニメーションは、",{"type":119,"tag":180,"props":210,"children":211},{},[],{"type":119,"tag":213,"props":214,"children":217},"span",{"className":215},[216],"markerpen",[218],{"type":124,"value":219},"トランスフォーム「位置」にエクスプレッション wiggle(2,2) で動かしています。",{"type":119,"tag":120,"props":221,"children":222},{},[223,225,228,230,233],{"type":124,"value":224},"AeのプレビューやMP4、GIFなどで書き出した時はユラユラした動きですが、JSONで書き出すと高速でガタガタした動きになってしましました。",{"type":119,"tag":180,"props":226,"children":227},{},[],{"type":124,"value":229},"\n原因としては、下記の理由だと考えられます。",{"type":119,"tag":180,"props":231,"children":232},{},[],{"type":124,"value":234},"\n　",{"type":119,"tag":236,"props":237,"children":241},"div",{"className":238},[239,240],"notice","notice__red",[242],{"type":119,"tag":236,"props":243,"children":244},{},[245,265],{"type":119,"tag":120,"props":246,"children":247},{},[248,253,256,258,261],{"type":119,"tag":174,"props":249,"children":250},{},[251],{"type":124,"value":252},"エクスプレッションが対応されていない",{"type":119,"tag":180,"props":254,"children":255},{},[],{"type":124,"value":257},"\nLottieの公式によるとwuggleなどのネイティブ関数がサポートされていないのが原因みたいです。",{"type":119,"tag":180,"props":259,"children":260},{},[],{"type":119,"tag":184,"props":262,"children":264},{"src":263,"alt":187},"https://storage.deza-bu.com/note/post/sVl98fCEEDTqcJwXioNvy1Ztjh6TMVXm.png",[],{"type":119,"tag":120,"props":266,"children":267},{},[268],{"type":119,"tag":137,"props":269,"children":271},{"href":270},"https://lottie.airbnb.tech/#/web?id=troubleshooting",[272],{"type":124,"value":273},"Lottieの公式の記事",{"type":119,"tag":275,"props":276,"children":277},"h2",{"id":142},[278],{"type":124,"value":142},{"type":119,"tag":120,"props":280,"children":281},{},[282],{"type":124,"value":283},"キーフレームを最初から手打ちし直す悪夢がよぎりますが、実は作ったエクスプレッションをキーフレームに変換する機能がAeにはあります！",{"type":119,"tag":120,"props":285,"children":286},{},[287],{"type":119,"tag":174,"props":288,"children":289},{},[290],{"type":124,"value":291},"右クリック → キーフレーム補助 → エクスプレッションをキーフレームに変換",{"type":119,"tag":120,"props":293,"children":294},{},[295],{"type":119,"tag":184,"props":296,"children":298},{"src":297,"alt":187},"https://storage.deza-bu.com/note/post/uWsxxxFo2NS2JpyowXiRdPF1r018mAOl.png",[],{"type":119,"tag":120,"props":300,"children":301},{},[302,304,307],{"type":124,"value":303},"　",{"type":119,"tag":180,"props":305,"children":306},{},[],{"type":124,"value":234},{"type":119,"tag":120,"props":309,"children":310},{},[311,313,316],{"type":124,"value":312},"wiggle(2,2)のエクスプレッションの上にキーフレームが打たれました。",{"type":119,"tag":180,"props":314,"children":315},{},[],{"type":119,"tag":184,"props":317,"children":319},{"src":318,"alt":187},"https://storage.deza-bu.com/note/post/9KBfIJOfsz3DnXJzEmP6YKPZdYE7cQIy.png",[],{"type":119,"tag":120,"props":321,"children":322},{},[323,325,331],{"type":124,"value":324},"ただ、これだけだと",{"type":119,"tag":213,"props":326,"children":328},{"className":327},[216],[329],{"type":124,"value":330},"キーフレームが多すぎて",{"type":124,"value":332},"書き出す時に重くなります、、",{"type":119,"tag":275,"props":334,"children":336},{"id":335},"書き出しを軽くする為にスムーザーの処理を加える",[337],{"type":124,"value":151},{"type":119,"tag":120,"props":339,"children":340},{},[341,346,349,351,354,360,363],{"type":119,"tag":174,"props":342,"children":343},{},[344],{"type":124,"value":345},"ウィンドウ → スムーザー",{"type":119,"tag":180,"props":347,"children":348},{},[],{"type":124,"value":350},"\n許容量の数値を良い感じのキーフレームの数になるように入力",{"type":119,"tag":180,"props":352,"children":353},{},[],{"type":119,"tag":213,"props":355,"children":357},{"className":356},[216],[358],{"type":124,"value":359},"※今回は許容量3で良い感じになりましたが、ここはご自身で色々試してみてください。",{"type":119,"tag":180,"props":361,"children":362},{},[],{"type":119,"tag":184,"props":364,"children":366},{"src":365,"alt":187},"https://storage.deza-bu.com/note/post/sBw9WOWFZMm1F0ijI6fYYDgr6SlnvX47.png",[],{"type":119,"tag":120,"props":368,"children":369},{},[370,372,375,379,382],{"type":124,"value":371},"スムーザを加えたwiggle(2,2)のキーフレーム",{"type":119,"tag":180,"props":373,"children":374},{},[],{"type":119,"tag":184,"props":376,"children":378},{"src":377,"alt":187},"https://storage.deza-bu.com/note/post/BfeyaR1lwvuBmOS1kthKGaRDcmLpS3zl.png",[],{"type":119,"tag":180,"props":380,"children":381},{},[],{"type":124,"value":383},"\nキーフレームの数が少なくなり、アニメーションが滑らかになり、書き出したデータも軽くなります。",{"type":119,"tag":275,"props":385,"children":386},{"id":160},[387],{"type":124,"value":160},{"type":119,"tag":120,"props":389,"children":390},{},[391,393,396,402,405,409,412,414,417],{"type":124,"value":392},"最後にエクスプレッションのWiggle(2.2)を削除します。",{"type":119,"tag":180,"props":394,"children":395},{},[],{"type":119,"tag":213,"props":397,"children":399},{"className":398},[216],[400],{"type":124,"value":401},"※ここでエクスプレッションを削除しないと反映されないので、忘れずに削除しましょう！",{"type":119,"tag":180,"props":403,"children":404},{},[],{"type":119,"tag":184,"props":406,"children":408},{"src":407,"alt":187},"https://storage.deza-bu.com/note/post/OdzUXRIFLohfodxlmEv8eqSf5uetIdTA.png",[],{"type":119,"tag":180,"props":410,"children":411},{},[],{"type":124,"value":413},"\n↓↓↓",{"type":119,"tag":180,"props":415,"children":416},{},[],{"type":119,"tag":184,"props":418,"children":420},{"src":419,"alt":187},"https://storage.deza-bu.com/note/post/OHR7oJNCk2O6U5UlhY47p9Uitsdjmu7i.png",[],{"type":119,"tag":120,"props":422,"children":423},{},[424],{"type":124,"value":425},"BodymovinでJSONに書き出せばGIFやMP4で書き出したエクスプレッションの動きがJSONに反映されます。",{"type":119,"tag":275,"props":427,"children":428},{"id":169},[429],{"type":124,"value":169},{"type":119,"tag":120,"props":431,"children":432},{},[433],{"type":119,"tag":174,"props":434,"children":435},{},[436],{"type":124,"value":437},"①エクスプレッションでアニメーションを作成",{"type":119,"tag":120,"props":439,"children":440},{},[441,446,449],{"type":119,"tag":174,"props":442,"children":443},{},[444],{"type":124,"value":445},"②エクスプレッションをキーフレームに変換",{"type":119,"tag":180,"props":447,"children":448},{},[],{"type":124,"value":450},"\n　右クリック → キーフレーム補助 → エクスプレッションをキーフレームに変換",{"type":119,"tag":120,"props":452,"children":453},{},[454,459,462],{"type":119,"tag":174,"props":455,"children":456},{},[457],{"type":124,"value":458},"③スムーザーで書き出しを軽くする処理",{"type":119,"tag":180,"props":460,"children":461},{},[],{"type":124,"value":463},"\n　ウィンドウ → スムーザー",{"type":119,"tag":120,"props":465,"children":466},{},[467],{"type":119,"tag":174,"props":468,"children":469},{},[470],{"type":124,"value":471},"④エクスプレッションを削除",{"type":119,"tag":120,"props":473,"children":474},{},[475],{"type":119,"tag":174,"props":476,"children":477},{},[478],{"type":124,"value":479},"⑤BodymovinでJSONに書き出し",1775520098834]