bodymovin에서 SVG 애니메이션 내보내기를 시도했습니다.
5107 단어 AfterEffectsSVG
(1) 애니메이션을 after로 작성
우선 소재 만들기.
에서 윈도우 > 확장 > bodymovin.
(2) 에러가 나온다 - 😂 → 환경 설정이었습니다 😅
allow scripts to write files and access network
라고 나온다. 오류도 귀여운 귀여워!
아무것도 없다!
스크립트에 의한 파일의 쓰기 ~에 체크가 필요했던 것 같습니다.
왼쪽 원에 체크가 있고 저장 위치를 지정하지 않으면
비슷한 토끼가 나오고 조심합니다.
에서 data.json이 내뿜어집니다.
(3) lottie 사이트에서 동작 체크
아래에 data.json을 드래그 앤 드롭. 🍬
h tps : /// ぉ 치에후ぃぇ s. 이 m/p레ゔぃえw
(4) 구현
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lottie</title>
</head>
<body>
<h1>テストですわ</h1>
<div id="lottie"></div>
</body>
<script src="js/lottie.js" type="text/javascript"></script>
<script>lottie.loadAnimation({
container: document.getElementById('lottie'), // アニメーションをさせたいdivなどhtml要素ににつけた名前
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // 自分が書き出したjsonファイルの名前と場所（パス）を記述
});</script>
</html>
▼참고 기사
h tps : //에서. 무 / swcd / n / n b7bdb48 80 또는 # pJ64
움직이지 않아! ! 😂의 원인은
Uncaught TypeError: Cannot read property 'appendChild' of null였습니다.
<div id="lottie"></div>
앞에
container: document.getElementById('lottie')
쓰면, lottie 뭔가 없어요?
라는 것으로 표시되지 않았군요.
▼참고 기사(감사합니다.)
htp : // bg. 네단 d 후에 ld. 코 m / 샤 r / 2015/04 / 아 ぁ sc 리 pt. HTML
▼완성품
htps : // 아 skm과 k. 기주 b. 이오/사 mpぇ2019/
(5) 작성시에 조심하는 것
잘 변환되지 않은 예
❌ 파티클 등의 효과를 사용한 애니메이션
❌ 이미지를 사용한 애니메이션
❌ 일러스트레이터 ai 데이터 그대로의 애니메이션
👉 모양화하지 않으면 안된다고 , , 눈물
Reference
이 문제에 관하여(bodymovin에서 SVG 애니메이션 내보내기를 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/matsuokaasuka/items/d3c021f5c214e94ef6a2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
allow scripts to write files and access network
라고 나온다. 오류도 귀여운 귀여워!
아무것도 없다!
스크립트에 의한 파일의 쓰기 ~에 체크가 필요했던 것 같습니다.
왼쪽 원에 체크가 있고 저장 위치를 지정하지 않으면
비슷한 토끼가 나오고 조심합니다.
에서 data.json이 내뿜어집니다.
(3) lottie 사이트에서 동작 체크
아래에 data.json을 드래그 앤 드롭. 🍬
h tps : /// ぉ 치에후ぃぇ s. 이 m/p레ゔぃえw
(4) 구현
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lottie</title>
</head>
<body>
<h1>テストですわ</h1>
<div id="lottie"></div>
</body>
<script src="js/lottie.js" type="text/javascript"></script>
<script>lottie.loadAnimation({
container: document.getElementById('lottie'), // アニメーションをさせたいdivなどhtml要素ににつけた名前
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // 自分が書き出したjsonファイルの名前と場所（パス）を記述
});</script>
</html>
▼참고 기사
h tps : //에서. 무 / swcd / n / n b7bdb48 80 또는 # pJ64
움직이지 않아! ! 😂의 원인은
Uncaught TypeError: Cannot read property 'appendChild' of null였습니다.
<div id="lottie"></div>
앞에
container: document.getElementById('lottie')
쓰면, lottie 뭔가 없어요?
라는 것으로 표시되지 않았군요.
▼참고 기사(감사합니다.)
htp : // bg. 네단 d 후에 ld. 코 m / 샤 r / 2015/04 / 아 ぁ sc 리 pt. HTML
▼완성품
htps : // 아 skm과 k. 기주 b. 이오/사 mpぇ2019/
(5) 작성시에 조심하는 것
잘 변환되지 않은 예
❌ 파티클 등의 효과를 사용한 애니메이션
❌ 이미지를 사용한 애니메이션
❌ 일러스트레이터 ai 데이터 그대로의 애니메이션
👉 모양화하지 않으면 안된다고 , , 눈물
Reference
이 문제에 관하여(bodymovin에서 SVG 애니메이션 내보내기를 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/matsuokaasuka/items/d3c021f5c214e94ef6a2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lottie</title>
</head>
<body>
<h1>テストですわ</h1>
<div id="lottie"></div>
</body>
<script src="js/lottie.js" type="text/javascript"></script>
<script>lottie.loadAnimation({
container: document.getElementById('lottie'), // アニメーションをさせたいdivなどhtml要素ににつけた名前
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // 自分が書き出したjsonファイルの名前と場所（パス）を記述
});</script>
</html>
▼참고 기사
h tps : //에서. 무 / swcd / n / n b7bdb48 80 또는 # pJ64
움직이지 않아! ! 😂의 원인은
Uncaught TypeError: Cannot read property 'appendChild' of null였습니다.
<div id="lottie"></div>
앞에
container: document.getElementById('lottie')
쓰면, lottie 뭔가 없어요?
라는 것으로 표시되지 않았군요.
▼참고 기사(감사합니다.)
htp : // bg. 네단 d 후에 ld. 코 m / 샤 r / 2015/04 / 아 ぁ sc 리 pt. HTML
▼완성품
htps : // 아 skm과 k. 기주 b. 이오/사 mpぇ2019/
(5) 작성시에 조심하는 것
잘 변환되지 않은 예
❌ 파티클 등의 효과를 사용한 애니메이션
❌ 이미지를 사용한 애니메이션
❌ 일러스트레이터 ai 데이터 그대로의 애니메이션
👉 모양화하지 않으면 안된다고 , , 눈물
Reference
이 문제에 관하여(bodymovin에서 SVG 애니메이션 내보내기를 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/matsuokaasuka/items/d3c021f5c214e94ef6a2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(bodymovin에서 SVG 애니메이션 내보내기를 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/matsuokaasuka/items/d3c021f5c214e94ef6a2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
