Lottieアニメーションã®å®Ÿè£…ã¨åˆ¶å¾¡ã®æ–¹æ³•ã‚’ã€ã‚µãƒ³ãƒ—ルコードを交ãˆã¦è§£èª¬ã—ã¾ã™ã€‚
Webデザイナーã®ãŸã‚ã®Lottieアニメーション実装講座 | C5log
Lottieアニメーションã®å®Ÿè£…ã¨åˆ¶å¾¡ã®æ–¹æ³•ã‚’ã€ã‚µãƒ³ãƒ—ルコードを交ãˆã¦è§£èª¬ã—ã¾ã™ã€‚
ã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼å‘ã‘】Lottieã®ä½¿ã„方。アプリ開発ã«ãŠã‘るアニメーションã®å®Ÿè£…を劇的ã«ç°¡ç•¥åŒ–ã—ã¦ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®è² 担を減らãã†ï¼ï½œnozoe | conoito
↑ã¯å…ˆã»ã©ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—ãŸBodymovin.zxp（プラグイン）をAfterEffectsã«ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã™ã‚‹ç‚ºã«ä½¿ã„ã¾ã™ã€‚ [Download Mac OS X]　ã¾ãŸã¯ã€€[Download Windows]ã‹ã‚‰DLã—ã¦ãã ã•ã„。ç§ã¯Macãªã®ã§MacOSã‚’é¸æŠžã—ã¾ã™ãŒWindowsã®æ–¹ã¯Windowsã§ã€‚ 最後ã«ã€[ZXP Installer]を使ã£ã¦[bodymovin.zxp]をインストールã—ã¾ã™ã€‚ å…ˆã»ã©ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—㟠[ZXP Installer] ã‚’èµ·å‹•ã—ã¦ã€ã“ã‚Œã¾ãŸå…ˆã»ã©ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—㟠[bodymovin.zxp] をドラック&ドãƒãƒƒãƒ—ã§æ”¾ã‚Šè¾¼ã‚ã°ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«å®Œäº†ã§ã™ã€‚ ✔︎をクリックã§ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«å®Œäº†ï¼ 2020/08/22追記 ä¹…ã—ã¶ã‚Šã«Bodymovinを使ãŠã†ã¨ã—ãŸã‚‰ã€ãªã‚“ã¨æ‹¡å¼µæ©Ÿèƒ½ã®ä¸ã‹ã‚‰æ¶ˆãˆã¦ã—ã¾ã£ã¦ã„ã¦ä½¿ãˆãªããªã£ã¦ã„ã¾ã—ãŸðŸ˜ å†ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã—よã†ã¨ã™
ã€Javascript】Lottieを使ã£ã¦ãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã‚’実装ã—ã¦ã¿ã‚‹ | Wood-Roots:blog
Lottieã¯AirbnbãŒé–‹ç™ºã—ã¦ã„るアニメーションライブラリã§ã™ã€‚ Airbnb本体ã®ã‚µãƒ¼ãƒ“スã«ãŠä¸–話ã«ãªã‚‹ã“ã¨ã¯å¤šåˆ†ãªã„ã¨æ€ã„ã¾ã™ãŒï¼ˆæ—…行行ã‹ãªã„ã®ã§â€¦ï¼‰ã€Lottieã¯éžå¸¸ã«ãªã‚らã‹ã§è‡ªç”±åº¦ã®é«˜ã„アニメーションを作るã“ã¨ãŒã§ããã†ã§ã™ã®ã§è©¦ã—ã¦ã¿ã¾ã—ãŸã€‚ デモ
Lottieã«ã‚ˆã‚‹ãƒªãƒƒãƒã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³å®Ÿè£…ã®ãŸã‚ã®AfterEffectsãƒãƒžã‚Šã©ã“ã‚｜ã¾ã‚Šãƒ¼ãªï¼ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢
ã“ã®è³‡æ–™ã¯2018/02/14ã®ç¬¬äºŒå›žiOS UI実装勉強会ã§ç™ºè¡¨ã—ãŸå†…容ã§ã™ã€‚当時調査ã—ãŸå†…容をãã®ã¾ã¾ç·¨é›†ã—ã¦ã„ã‚‹ã®ã§æƒ…å ±ãŒå¤ã„å ´åˆãŒã‚ã‚Šã¾ã™ã€‚ ã”了承ãã ã•ã„ã€‚æœ€æ–°æƒ…å ±ã¯ãƒ‰ã‚ュメントをå‚ç…§ã—ã¦ãã ã•ã„。 下記ãŒãƒ‰ã‚ュメントã§ã™ã€‚ ã¯ã˜ã‚ã«iOSã«After Effectsã§ä½œã£ãŸãƒªãƒƒãƒã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’å°Žå…¥ã§ãã‚‹Lottieライブラリã™ã”ã„ï¼ã¨ãŠã‚‚ã£ãŸã®ã§ã™ãŒï¼ŒAfterEffectsã®ã™ã¹ã¦ã®æ©Ÿèƒ½ã‚’使ãˆã‚‹ã‚ã‘ã§ã¯ã‚ã‚Šã¾ã›ã‚“ã§ã—ãŸãƒ»ãƒ»ãƒ»ãƒ»ãƒ»ãƒ» アニメーションをデザイナーã•ã‚“ã«ãŠé¡˜ã„ã™ã‚‹å‰ã«ï¼Œã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢å´ã‚‚何ãŒã§ãã¦ä½•ãŒã§ããªã„ã®ã‹çŸ¥ã£ã¦ãŠãã¨ã€ä½œã£ã¦ã‚‚らã£ãŸã®ã«å‹•ã‹ãªã„ã¨ã„ã†äº‹æ•…ãŒç™ºç”Ÿã—ã¥ã‚‰ã„ã®ã§ã¯ãªã„ã‹ã¨è€ƒãˆã€çŸ¥è¦‹ã‚’共有ã™ã‚‹ã“ã¨ã«ã—ã¾ã—㟠ã“ã®æ–‡ç« 全体ã§è¨€ã„ãŸã„ã“㨠Lottieã®ãƒ‰ã‚ュメントã¯è¦ç¢ºèªï¼Œæ„図通りã®å‹•ããŒã§ãã¦ã‚‹ã‹é€æ¬¡ãƒã‚§ãƒƒã‚¯ webã ã£ãŸã‚‰å‹•ãã‘ã©Androidã‚„iO
1
ランã‚ング
ãŠçŸ¥ã‚‰ã›
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Lottie Player - Interactivity Guide
{{#tags}}- {{label}}
{{/tags}}