웹 페이지에서 움직이는 캐릭터의 애니메이션을 만드는 방법

개요

↓ 이런 느낌의 손으로 그린 ​​애니메이션을 만드는 방법을 소개합니다.


얼른 구조를 설명하면 아래의 이미지 (문자)를 위에서 패스로 덮고, 그린 순서대로 패스를 숨기고 가는 것으로 손으로 그린 ​​애니메이션처럼되어있다는 느낌입니다.

만드는 방법

1. 이미지 준비

이라레나 포토쇼 등의 패스 기능이 있는 소프트로 좋아하는 문자를 만들어, 배경을 투과해 png 형식으로 저장해 주세요.

문자를 가리도록 패스를 당깁니다. 이 때의 패스의 순서가 문자의 표시의 순서와 같아지므로, 조심해서 당겨 갑시다. 또한 원본 이미지와 레이어를 나눕니다.

능숙한 패스를 뽑으면 이미지 준비가 완료됩니다. 패스를 잘 그리는 요령은 선폭을 굵게 해 알기 쉬운 색으로 하는 것입니다.

2. SVG 준비

방금 준비한 SVG를 원하는 텍스트 편집기에서 엽니 다. 많은 패스를 만들면, 코드 많다…가 되어 버리므로, 가능한 한 패스를 정리하도록(듯이) 하면 만지기 쉬울 것입니다.

우선, 이런 느낌으로 「패스의 레이어」와 「이미지의 레이어」를 나누고 있는 것을 확인합시다. (그렇지 않으면 이런 느낌의 코드로 해주세요)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="640px"
     height="480px" viewBox="0 0 640 480" style="enable-background:new 0 0 640 480;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#FF0000;stroke-width:30;stroke-miterlimit:10;}
</style>

<g id="レイヤー_1">
    <image style="overflow:visible;" width="445" height="147" id="svgMov" xlink:href="svgMov.png" transform="matrix(1 0 0 1 97 149)"/>
</g>
<g id="レイヤー_2">
        <path class="st0" d="M90,172.8c0,0,79.2,12.4,118.4-10"/>
        <path class="st0" d="M90,209.2c0,0,100.2,7.3,132-12.2"/>
        <path class="st0" d="M149.2,142c0,0,44.3,97.3,44.2,98s18.8,10.6-37.4,0"/>
        <path class="st0" d="M116.1,234.1c0,0-40,57.2,86.2,46.6"/>
        <path class="st0" d="M246.1,183.4c0,0,67.2,9,90.2-7.2"/>
        <path class="st0" d="M305.9,139.9c0,0-23.3,101.9-55.6,122.5"/>
        <path class="st0" d="M344.5,176.3c0,0,50.2,24.5,50.2,27.5"/>
        <path class="st0" d="M344.5,197c0,0,8.8,86.3-8.2,85s-38.9,8.4-38.9-24s87.6,13.1,87.6,13.1"/>
        <line class="st0" x1="432.3" y1="176.3" x2="537.9" y2="176.7"/>
        <path class="st0" d="M441.4,227.9c0,0-18.1,52.8,33.2,50.5s73.1-6,73.1-6"/>
</g>
</svg>

경로 부분의 g 태그를 <mask id="id名" maskUnits="objectBoundingBox"> 및 </mask>로 바꿉니다.
또한 id를 설정하고 CSS를 직접 씁니다. 이런 느낌↓

<mask id="masking" maskUnits="objectBoundingBox">
        <path fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" d="M90,172.8c0,0,79.2,12.4,118.4-10"/>
        <path fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" d="M90,209.2c0,0,100.2,7.3,132-12.2"/>
        <path fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" d="M149.2,142c0,0,44.3,97.3,44.2,98s18.8,10.6-37.4,0"/>
        <path fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" d="M116.1,234.1c0,0-40,57.2,86.2,46.6"/>
        <path fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" d="M246.1,183.4c0,0,67.2,9,90.2-7.2"/>
        <path fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" d="M305.9,139.9c0,0-23.3,101.9-55.6,122.5"/>
        <path fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" d="M344.5,176.3c0,0,50.2,24.5,50.2,27.5"/>
        <path fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" d="M344.5,197c0,0,8.8,86.3-8.2,85s-38.9,8.4-38.9-24s87.6,13.1,87.6,13.1"/>
        <line fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" x1="432.3" y1="176.3" x2="537.9" y2="176.7"/>
        <path fill="none" stroke="#FF0000" stroke-width="30" stroke-miterlimit="10" d="M441.4,227.9c0,0-18.1,52.8,33.2,50.5s73.1-6,73.1-6"/>
</mask>

그런 다음 이미지 부분의 g 태그를 <g mask="url(#さっきパス部分に設定したid)" fill="#お好みの色で（ここの色によって出力に影響が出ることはないです）"> 같은 느낌으로 다시 써주세요.

이제 SVG의 준비는 괜찮습니다.

3. 웹 페이지에 삽입

jQuery DrawSVG을 다운로드하고 jquery.drawsvg.js를 애니메이션을 채우는 웹 페이지의 폴더에 넣습니다.

애니메이션을 넣고 싶은 곳에 방금 쓴 SVG의 코드를 통째로 복사합니다.

HTML 또는 jQuery에 다음 코드를 추가합니다.

var $svg = $('svg').drawsvg({
      duration: 200,
      easing: 'linear'
    });
$svg.drawsvg('animate');

이것으로 완성입니다! 수고하셨습니다!

잘 못했다면...

만약 잘 안된다면 다음을 확인해 보세요.

png 이미지 경로가 올바르게 설정되어 있습니까?

패스가 잘 걸렸습니까?

코드가 제대로 복사되어 있습니까? 또한 제대로 쓸 수 있습니까?

확장자가 맞습니까? 이미지 투과가 가능합니까?

jquery.drawsvg.js 또는 jQuery 링크가 작성되었습니까?

대체로 이것으로 해결할 것입니다만, 안 된다면 포기합시다.
다시 시도하면 의외로 잘 가기도 합니다.

여담

「패스 당기거나 svg 괴롭히거나 순서 많아요!
이것은, svg 형식의 패스의 애니메이션을 드래그＆드롭 하는 것만으로 간단하게 작성할 수 버리는 것입니다.

이번 소개한 것과 무엇이 다른가 하면, 이번 소개한 녀석은 패스로 마스크 한 순서대로 아래의 이미지가 표시되어 가는 것으로, 이쪽은 그린 패스가 그대로 움직인다는 것이 됩니다.

패스로 일러스트 그리는 장인(?)의 분에게는 이쪽이 좋을지도 모릅니다.
취향에 따라 구분해 보세요.

그럼 좋은 웹 디자이너 생활을 ~

참고로 한 페이지

Lazy Line Painter