【AfterEffects×Web】 만든 동영상 소재를 Web에서 사용대! !
소개
내 여가 시간은 동영상을 만드는 것으로,
평소부터 「동영상과 프로그래밍으로 뭔가 할 수 없을까・・・」
라고 생각했을 때와 어떤 라이브러리를 발견했습니다.
그 이름은・・・・・「Lottie」
오늘은 이 라이브러리를 사용해 Ae로 만든 동영상을 브라우저에 표시시키는 방법을 소개하겠습니다.
Lottie란?
Lottie는 Airbnb에서 등장한 웹, iOS, Android, React Native 지원 애니메이션 라이브러리입니다.
After Effects에서 볼 수 있는 애니메이션을 실시간으로 렌더링하여 애니메이션을 쉽게 만들 수 있습니다.
· 공식 페이지 : htps // // rb b. 데시 겐 / ぉ 치에 /
사용법
먼저 Bodymovin을 설치합니다.
(보충: Bodymovin은 Ae의 확장 기능이며, Ae로 만든 애니메이션 데이터를 JSON 파일로 내보내는 뛰어난 것입니다)
· github : htps : // 기주 b. 코 m / 아이 rb b / ぉ 치에 ぇ b
· Creative Cloud : htps : // 에 x 찬게. 아도베. 이 m/c레아치ゔぇcぉd. 에서 원하는 ls. 12557. 보디도 ゔぃ응. HTML
다양한 설치 방법이 있지만, 나는 Adobe 스토어에서 설치했습니다.
설치되면 Ae 확장에 Bodymovin이 추가됩니다.
Bodymovin을 시작하면 만든 동영상의 이름이 표시됩니다.
아래 이미지라면 Comp1이 표시됩니다.
다음으로 기어 마크의 Setting을 누르면 계속 설정 항목이 표시됩니다.
항목의 상세 아래와 같은 느낌입니다.
Split : json ファイルを指定した秒数で分割する
Glyphs: フォントをシェイプ化する（基本的にこれを選択でOK）
Hidden : 非表示レイヤーも出力する
Guides : ガイドレイヤーを出力する
Extra Comps : エクスプレッション外部ファイル読み込み？
Assets : 画像ファイル出力の詳細設定を行える
Standalone : json を含んだ js ファイルを出力する
Demo : テスト/確認用の HTML を出力する
AMD : XML を出力する
Glyphs를 체크하고 Save를 누릅니다.
Comp1을 선택하고 디렉토리 위치를 설정할 수 있으면,
Render를 누르면 data.json이라는 파일이 생성됩니다!
이것으로 준비는 OK!
브라우저에 표시하자.
<body>
<div class="lottie"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.min.js"></script>
<script src="js/sample.js"></script>
</body>
표시할 요소에 class 또는 id를 붙인다.
Lottie의 CDN을 기술한다.
(CDN은 github에 게시됨)
HTML의 설명은 이것뿐!
JS의 설명은 다음과 같습니다.
bodymovin.loadAnimation({
container: document.querySelector('.lottie'),
renderer: 'svg', //'svg' / 'canvas' / 'html'の中から選ぶことができます。
loop: true, //ループ再生するのかを選びます（true/false）
autoplay: true, //自動再生するかどうかを選択します（true/false）
path: 'json/data.json' //jsonまでのパスを記述します。出力したjsonの名前は適宜変える必要があります。
});
querySelector에서 클래스를 가져옵니다.
그리고 이번은 SVG로 render 해 주었으면하기 때문에 설정은 SVG로 기술하고 있습니다.
loop등 불필요하면 false로 해 주면 1회만 밖에 재생되지 않고 기호로 부디.
이 설정을 할 수 있으면 완성! !
브라우저를 열면, 다시 신기! !
만든 동영상이 표시됩니다.
JS나 CSS로 고리고리에 코딩하지 않아도,
동영상 소재만 있으면 간단하게 브라우저에 떨어뜨릴 수 있습니다! 멋지다! !
장점과 단점
장점
・쉽고 복잡한 애니메이션을 만들 수 있다
· JSON 데이터를 사용하기 때문에 GIF 등과 비교하면 꽤 가볍습니다.
・SVG로 렌더링되므로 확대해도 예쁘다
단점
・현재 실현할 수 없는 동작은 있다
(사용할 수없는 효과가 너무 많아 날뛰었다)
・화상을 그대로 사용할 수 없기 때문에 사용하는 경우는 Ai등으로 패스화하지 않으면 안 된다
・결국 다양한 툴을 사용하게 된다
요약
사쿠와 애니메이션을 만들려면 엄청난 도구가 아닐까 생각했습니다.
또, 현상 아직 서포트하고 있지 않은 이펙트는 있습니다만, 사용할 수 있는 이펙트가 아직도 늘어나는 것 같기 때문에 기대하고 있습니다!
Reference
이 문제에 관하여(【AfterEffects×Web】 만든 동영상 소재를 Web에서 사용대! !), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nagaiwa_jp/items/05aac1196b28427c2730
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Lottie는 Airbnb에서 등장한 웹, iOS, Android, React Native 지원 애니메이션 라이브러리입니다.
After Effects에서 볼 수 있는 애니메이션을 실시간으로 렌더링하여 애니메이션을 쉽게 만들 수 있습니다.
· 공식 페이지 : htps // // rb b. 데시 겐 / ぉ 치에 /
사용법
먼저 Bodymovin을 설치합니다.
(보충: Bodymovin은 Ae의 확장 기능이며, Ae로 만든 애니메이션 데이터를 JSON 파일로 내보내는 뛰어난 것입니다)
· github : htps : // 기주 b. 코 m / 아이 rb b / ぉ 치에 ぇ b
· Creative Cloud : htps : // 에 x 찬게. 아도베. 이 m/c레아치ゔぇcぉd. 에서 원하는 ls. 12557. 보디도 ゔぃ응. HTML
다양한 설치 방법이 있지만, 나는 Adobe 스토어에서 설치했습니다.
설치되면 Ae 확장에 Bodymovin이 추가됩니다.
Bodymovin을 시작하면 만든 동영상의 이름이 표시됩니다.
아래 이미지라면 Comp1이 표시됩니다.
다음으로 기어 마크의 Setting을 누르면 계속 설정 항목이 표시됩니다.
항목의 상세 아래와 같은 느낌입니다.
Split : json ファイルを指定した秒数で分割する
Glyphs: フォントをシェイプ化する（基本的にこれを選択でOK）
Hidden : 非表示レイヤーも出力する
Guides : ガイドレイヤーを出力する
Extra Comps : エクスプレッション外部ファイル読み込み？
Assets : 画像ファイル出力の詳細設定を行える
Standalone : json を含んだ js ファイルを出力する
Demo : テスト/確認用の HTML を出力する
AMD : XML を出力する
Glyphs를 체크하고 Save를 누릅니다.
Comp1을 선택하고 디렉토리 위치를 설정할 수 있으면,
Render를 누르면 data.json이라는 파일이 생성됩니다!
이것으로 준비는 OK!
브라우저에 표시하자.
<body>
<div class="lottie"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.min.js"></script>
<script src="js/sample.js"></script>
</body>
표시할 요소에 class 또는 id를 붙인다.
Lottie의 CDN을 기술한다.
(CDN은 github에 게시됨)
HTML의 설명은 이것뿐!
JS의 설명은 다음과 같습니다.
bodymovin.loadAnimation({
container: document.querySelector('.lottie'),
renderer: 'svg', //'svg' / 'canvas' / 'html'の中から選ぶことができます。
loop: true, //ループ再生するのかを選びます（true/false）
autoplay: true, //自動再生するかどうかを選択します（true/false）
path: 'json/data.json' //jsonまでのパスを記述します。出力したjsonの名前は適宜変える必要があります。
});
querySelector에서 클래스를 가져옵니다.
그리고 이번은 SVG로 render 해 주었으면하기 때문에 설정은 SVG로 기술하고 있습니다.
loop등 불필요하면 false로 해 주면 1회만 밖에 재생되지 않고 기호로 부디.
이 설정을 할 수 있으면 완성! !
브라우저를 열면, 다시 신기! !
만든 동영상이 표시됩니다.
JS나 CSS로 고리고리에 코딩하지 않아도,
동영상 소재만 있으면 간단하게 브라우저에 떨어뜨릴 수 있습니다! 멋지다! !
장점과 단점
장점
・쉽고 복잡한 애니메이션을 만들 수 있다
· JSON 데이터를 사용하기 때문에 GIF 등과 비교하면 꽤 가볍습니다.
・SVG로 렌더링되므로 확대해도 예쁘다
단점
・현재 실현할 수 없는 동작은 있다
(사용할 수없는 효과가 너무 많아 날뛰었다)
・화상을 그대로 사용할 수 없기 때문에 사용하는 경우는 Ai등으로 패스화하지 않으면 안 된다
・결국 다양한 툴을 사용하게 된다
요약
사쿠와 애니메이션을 만들려면 엄청난 도구가 아닐까 생각했습니다.
또, 현상 아직 서포트하고 있지 않은 이펙트는 있습니다만, 사용할 수 있는 이펙트가 아직도 늘어나는 것 같기 때문에 기대하고 있습니다!
Reference
이 문제에 관하여(【AfterEffects×Web】 만든 동영상 소재를 Web에서 사용대! !), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nagaiwa_jp/items/05aac1196b28427c2730
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Split : json ファイルを指定した秒数で分割する
Glyphs: フォントをシェイプ化する（基本的にこれを選択でOK）
Hidden : 非表示レイヤーも出力する
Guides : ガイドレイヤーを出力する
Extra Comps : エクスプレッション外部ファイル読み込み？
Assets : 画像ファイル出力の詳細設定を行える
Standalone : json を含んだ js ファイルを出力する
Demo : テスト/確認用の HTML を出力する
AMD : XML を出力する
<body>
<div class="lottie"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.min.js"></script>
<script src="js/sample.js"></script>
</body>
표시할 요소에 class 또는 id를 붙인다.
Lottie의 CDN을 기술한다.
(CDN은 github에 게시됨)
HTML의 설명은 이것뿐!
JS의 설명은 다음과 같습니다.
bodymovin.loadAnimation({
container: document.querySelector('.lottie'),
renderer: 'svg', //'svg' / 'canvas' / 'html'の中から選ぶことができます。
loop: true, //ループ再生するのかを選びます（true/false）
autoplay: true, //自動再生するかどうかを選択します（true/false）
path: 'json/data.json' //jsonまでのパスを記述します。出力したjsonの名前は適宜変える必要があります。
});
querySelector에서 클래스를 가져옵니다.
그리고 이번은 SVG로 render 해 주었으면하기 때문에 설정은 SVG로 기술하고 있습니다.
loop등 불필요하면 false로 해 주면 1회만 밖에 재생되지 않고 기호로 부디.
이 설정을 할 수 있으면 완성! !
브라우저를 열면, 다시 신기! !
만든 동영상이 표시됩니다.
JS나 CSS로 고리고리에 코딩하지 않아도,
동영상 소재만 있으면 간단하게 브라우저에 떨어뜨릴 수 있습니다! 멋지다! !
장점과 단점
장점
・쉽고 복잡한 애니메이션을 만들 수 있다
· JSON 데이터를 사용하기 때문에 GIF 등과 비교하면 꽤 가볍습니다.
・SVG로 렌더링되므로 확대해도 예쁘다
단점
・현재 실현할 수 없는 동작은 있다
(사용할 수없는 효과가 너무 많아 날뛰었다)
・화상을 그대로 사용할 수 없기 때문에 사용하는 경우는 Ai등으로 패스화하지 않으면 안 된다
・결국 다양한 툴을 사용하게 된다
요약
사쿠와 애니메이션을 만들려면 엄청난 도구가 아닐까 생각했습니다.
또, 현상 아직 서포트하고 있지 않은 이펙트는 있습니다만, 사용할 수 있는 이펙트가 아직도 늘어나는 것 같기 때문에 기대하고 있습니다!
Reference
이 문제에 관하여(【AfterEffects×Web】 만든 동영상 소재를 Web에서 사용대! !), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nagaiwa_jp/items/05aac1196b28427c2730
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
사쿠와 애니메이션을 만들려면 엄청난 도구가 아닐까 생각했습니다.
또, 현상 아직 서포트하고 있지 않은 이펙트는 있습니다만, 사용할 수 있는 이펙트가 아직도 늘어나는 것 같기 때문에 기대하고 있습니다!
Reference
이 문제에 관하여(【AfterEffects×Web】 만든 동영상 소재를 Web에서 사용대! !), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nagaiwa_jp/items/05aac1196b28427c2730텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
