Procreate 드로잉을 웹 애니메이션으로 바꾸는 방법

최근에 Apple Pencil이있는 Procreate 앱을 사용하여 iPad를 그리기 시작했습니다. 나는 이런 식으로 그리는 유연성을 즐기고있다. 일반적으로 집에서 그림을 그리는 것은 설정, 청소 브러시, 적절한 환기 및 실제로 그림 자체와 관련이없는 기타 요인과 같은 기본적인 것들입니다. Procreate는 페인팅 및 드로잉 프로세스를 모방하는 훌륭한 작업을 수행하지만 실행 취소/레디, 레이어 및 레이어 효과와 같은 디지털 기능을 추가합니다.

다음은 웹에서 수출 및 애니메이션을 상처를 입었다는 예식적인 그림입니다.

당신도 이것도 할 수 있습니다! 여기서 다룰 두 가지 기본 애니메이션 효과가 있습니다. 호버에서 발생하는 시차 효과 (전정 장애가있는 사람들을 위해 꺼질 수 있음) 및 페이지로드시 작은 드로잉 효과.

드로잉 레이어 시차

나는 iPad를 그리는 것을 좋아하는 이유 중 일부는 레이어에서 작업하는 능력이라고 언급했습니다. 레이어를 만들 때, 예를 들어, 얼룩말 줄무늬는 하나의 레이어에 있고 점은 줄무늬 아래의 자체 층에 있습니다.

위의 레이어에서 라인이 끝나는 곳의 경계를 넘어서 드로잉을 확장 할 것입니다. 주로 시차 효과에서 도면을 움직일 때 약간 엿볼 수 있기 때문입니다. 라인이 언제라도 날카 로워지면 부자연스럽게 보일 것입니다.

Layer를 작성하면 Procreate의 내보내기 옵션 덕분에 포토샵 (PSD) 파일로 내보내기를 수 있습니다.

그런 다음 몇 가지에 합류하여 최대 약 8 개의 층으로 만 작업 할 수 있습니다. TinypNG라는 Photoshop 플러그인을 사용하여 각 계층을 개별적으로 내보내고 있습니다. 더 나은 압축 도구가 있다고 들었지만 이것에 매우 만족했습니다.

다음으로 코드 편집기로 가서 레이어에 포함 된 다양한 이미지를 모두 수용 할 수있는 DIV를 만들겠습니다. 내부의 모든 이미지가 절대 포지셔닝을 얻는 반면, 나는 그 분할 상대 포지셔닝을 제공합니다. 이것은 이미지를 하나씩 위에 놓습니다.

 <div>
  <img  src="'https" : alt="Procreate 드로잉을 웹 애니메이션으로 바꾸는 방법" >
  <img  src="'https" : alt="Procreate 드로잉을 웹 애니메이션으로 바꾸는 방법" >
 …
</div>

 #Zebra-ill {
  위치 : 상대;
  Min-Height : 650px;
  최대 세포 : 500px;
}

.zebraimg {
  위치 : 절대;
  상단 : 0;
  왼쪽 : 0;
  관점 : 600px;
  변환 스타일 : Preserve-3D;
  변환 : translatez (0);
  너비 : 100%;
  }

이미지의 100% 너비는 모든 이미지를 모 Div의 크기로 제한합니다. 나는 동일한 제한으로 한 번에 그들을 모두 제어하도록하기 위해이 작업을 수행합니다. 이는 반응 형 조건에 적합합니다. 부모의 최대 득과 최소 높이는 특히 CSS 그리드 레이아웃에 떨어질 때와 같이 DIV가 수축되고 자라는 방식을 제한 할 수 있습니다. 융통성이 있어야하지만 몇 가지 제약 조건이 있으며 CSS 그리드는 이에 적합합니다.

다음으로 JavaScript가있는 부모 DIV에 MousEmove 이벤트 리스너를 추가합니다. 이를 통해 e.clientx 및 e.clienty를 사용하여 마우스의 좌표에 대한 정보를 캡처 할 수 있습니다.

 const zebraill = document.querySelector ( '#Zebra-ill')

// 호버
zebraill.addeventListener ( 'mousemove', e => {
  x = e.clientx를하자;
  y = e.clienty를하자;
})

그런 다음 각 도면을 살펴보고 해당 좌표를 사용하여 이미지를 움직입니다. 해당 좌표에 연결된 변환 스타일을 적용하겠습니다.

 const zebraill = document.querySelector ( '#Zebra-ill')
const zebraillimg = document.queryselectorall ( '. zebraimg')
const rate = 0.05

// 호버
zebraill.addeventListener ( 'mousemove', e => {
  x = e.clientx를하자;
  y = e.clienty를하자;
  
  zebraillimg.foreach ((el, index) => {
    el.style.transform = 
      `rotatex ($ {x} deg) rotatey ($ {y} deg)`
  })
}) 

Woah, 속도가 느려 파트너! 그것은 너무 많은 움직임입니다. 우리는 조금 더 미묘한 것을 원합니다. 따라서 0.05와 같이 낮은 속도로 곱하여 속도를 늦출 필요가 있습니다. 또한 레이어 당 약간만 변경하고 싶습니다. 그래서 레이어 인덱스를 사용하여 속도를 높이거나 속도를 늦출 것입니다.

 const zebraill = document.querySelector ( '#Zebra-ill')
const zebraillimg = document.queryselectorall ( '. zebraimg')
const rate = 0.05

// 호버
zebraill.addeventListener ( 'mousemove', e => {
  x = e.clientx를하자;
  y = e.clienty를하자;
  
  zebraillimg.foreach ((el, index) => {
    Speed ​​= Index = 1을 둡니다
    XPOS = 속도 속도 * x를 두십시오
    ypos = 속도 속도 * y
    
    el.style.transform = 
      `rotatex ($ {xpos -20} deg) rotatey ($ {ypos -20} deg) translatez ($ {index * 10} px)`
  })
})

마지막으로,이 효과를 끄고 싶은지 사용자에게 묻는 확인란을 만들 수 있습니다.

 <p>
  <input type="checkbox" name="motiona11y">
  <label for="motiona11y"> 전정 장애가있는 경우 효과 중 일부를 끄는 것을 확인하십시오 </label>
</p>

 const zebraill = document.querySelector ( '#Zebra-ill')
const zebraillimg = document.queryselectorall ( '. zebraimg')
const rate = 0.05
const motionCheck = document.getElementById ( 'motiona11y')
ischecked = false를 보자

// 누군가가 전정 장애 부품을 확인했는지 확인하십시오.
MotionCheck.addeventListener ( 'Change', e => {
  ischecked = e.target.checked;
})

// 호버
zebraill.addeventListener ( 'mousemove', e => {
  if (ischecked) 반환
  x = e.clientx를하자;
  y = e.clienty를하자;
  
  // ...
})

이제 사용자는 호버링의 도면의 계층 치수를 볼 수 있지만 귀찮은 경우 효과를 끄면 효과가 있습니다.

드로잉 효과

페이지에 그려진 것처럼 보이게하는 능력은 한동안 주변에 있었고 그것이 어떻게 수행되는지에 대한 많은 기사가 있습니다. 나는 Frontend Masters를 위해 만든 과정에서도 그것을 다룹니다.

전제는 다음과 같습니다.

• SVG 경로를 가져 와서 DashOffset으로 점선으로 표시하십시오.
• 대시를 모양의 전체 길이로 만듭니다.
• Dashoffset (대시 사이의 공간)에 애니메이션.

결국 당신이 얻는 것은 일종의 "끌기"효과입니다.

그러나이 특별한 그림에서 당신은 내가 애니메이션 한 부분이 손으로 그려진 것처럼 보이는 것을 알았을 것입니다. 이것은 조금 더 독특합니다. 그 효과는 더 기계적인 도면에서 잘 작동하지만 웹은 아직 테이퍼 라인의 사용을 지원하지 않습니다 (더 많은 손으로 그린 ​​느낌의 전형적인 두께가 다른 선).

이 접근법을 위해 파일을 Illustrator로 가져 와서 그림의 해당 부분에서 선을 추적하고 스트로크 패널로 들어가서 "더 많은 옵션"을 선택하고 드롭 다운에서 테이퍼 옵션을 클릭했습니다.

나는 그 라인을 복제하고 그 아래에 뚱뚱한 균일 한 경로를 만들었습니다. 그런 다음 그 지방 선을 가져 와서 페이지에 애니메이션했습니다. 이제 내 드로잉은 모양을 통해 표시됩니다.

내가 한 일은 다음과 같습니다.

• 펜 도구를 추적하고 테이퍼 브러시를 사용했습니다.
• 층을 복제하고 선을 균일하고 두껍게 변경했습니다.
• 첫 번째 층을 가져 와서 복합 경로를 만들었습니다.
• 경로 지점을 단순화했습니다.
• 클리핑 마스크를 만들었습니다.

거기에서 나는 DrawSVG와 Greensock으로 모든 것을 애니메이션 할 수 있습니다. 필요는 없지만 이런 종류의 애니메이션에 CSS를 사용할 수 있습니다. 이 경우 많은 경로 지점이 있으므로 더 강력한 것을 사용하는 것이 합리적입니다. 나는 이런 종류의 애니메이션을 만드는 방법에 대해 깊이있는 또 다른 게시물을 썼습니다. 신선하다면 거기서 시작하는 것이 좋습니다.

DrawSVG를 사용하려면 몇 가지 작업을 수행해야합니다.

• 플러그인 스크립트를로드하십시오.
• JavaScript 파일 상단에 플러그인을 등록하십시오.
• 경로가 사용되고 그 경로에 뇌졸중이 있는지 확인하십시오.
• 그 경로가 그들을 수용하는 그룹보다는 대상이되어 있는지 확인하십시오. 부모 요소는 대신 타겟팅 될 수 있습니다.

다음은 DrawSVG (Greensock의 제공)의 매우 기본적인 예입니다.

따라서 그래픽 편집기에는 더 교묘 한 선이있는 클리핑 마스크가있어서 그 아래에 지방 균일 한 선을 노출시킵니다. 여기에서 우리는 그 두꺼운 경로를 잡고 DrawSVG 플러그인을 사용하여 페이지에 애니메이션을 사용합니다.

 // 플러그인을 등록합니다
gsap.registerplugin (drawsvgplugin);

const drawlines = () => {
  gsap.set ( '. cls-15, #yellowunderline, .cls-13', {
    가시성 : '가시적'
  })
  
  const 타임 라인 = gsap.timeline ({{ 
    기본값 : {
      지연 : 1,
      편의 : 'Circ',
      기간 : 2
    }		  
  })
  .add ( '시작')
  .fromto ( '. Cls-15 Path', {
    drawsvg : '0%'
  }, {
    drawsvg : '100%',
    즉각도 : 사실
  }, '시작')
  .fromto ( '#allownunderline path', {
    drawsvg : '50% 50% '
  }, {
    drawsvg : '100%',
    즉각도 : 사실
  }, 'start = 1')
  .fromto ( '. cls-13', {
    drawsvg : '50% 50% '
  }, {
    drawsvg : '100%',
    즉각도 : 사실
  }, 'start = 1')
}

Window.onload = () => {
  드로 라인 ()
};

그리고 거기에 우리는 그것을 가지고 있습니다! Procreate iPad 앱의 계층화 된 그림에서 만든 사이트의 초기 그림. 멋진 손으로 그린 ​​삽화로 웹 프로젝트를 독특하게 만들 수 있기를 바랍니다. 당신이 멋진 것을 만들면 아래 의견에 알려주십시오!

위 내용은 Procreate 드로잉을 웹 애니메이션으로 바꾸는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!