마스크 애니메이션

5 min read

Animated Masks를 사용하여 전문적인 결과를 보여줍니다. 마스크 클립 콘텐츠와 시간이 지남에 따라 항목을 공개 할 수 있습니다 - 제목 순서, 전환 및 영화 효과에 적합합니다.

사용 가능한 마스크 애니메이션

한국어 제품 정보 제품 정보
위/아래 상단 또는 하단의 내용이 표시됩니다 텍스트 제목, 인용
닦음 왼쪽 / 오른쪽 수평 공개 교통, 밝혀
아이리스 원은 센터에서 확장 드라마틱, 초점
아이리스 아웃 중심의 원형 수축 Fade outs, 전환
스타 마스크 스타 모양은 내용을 밝혀 장난 꾸러기
하트 마스크 심장 모양은 내용을 계시합니다 발렌타인, 로맨스 테마
기타 제품 본문 바로가기 단계 / 극장 효과
Diagonal 닦음 각도 표시 동적 전환
영화의 Letterbox 바 animate 영화 스타일 소개

Mask 템플릿 사용

마스크 애니메이션을 사용하는 가장 쉬운 방법은 템플릿을 통해:

  1. Templates Panel (클릭 템플릿 탭 또는 T 누르기)
  2. 필터 로 Category: Masking
  3. 템플릿을 클릭하여 미리보기
  4. Click 파일 사용 적용

사용 가능한 Masking 템플릿

한국어 이름 *
텍스트 공개 라인 슬라이드 1 로 하나
텍스트 Reveal Down 라인 슬라이드 다운
수평한 닦음 왼쪽의 내용 와이퍼
아이리스 Reveal 서클은 밝혀
스타 마스크 스타 모양 밝혀
하트 마스크 하트 모양 공개
Diagonal 닦음 각도 전환
Cinematic 소개 영화 작풍 Letterbox

마스크 애니메이션 작업

Animated masks work by clipping content 와 the 모양 그 변경 시간:

  1. 마스크 모양 - 클립 경계 (rectangle, 원형, 별, 심장)
  2. Animation Type - 마스크 이동 방법 (wipe, iris, Scale)
  3. 타이밍 - 시작 시간, 기간 및 상승
  4. Direction - 공개가 일어나는 일

타이밍 모수

  • 시작 시간 - 공개가 시작될 때 (초)
  • Duration - 얼마나 계시는지
  • Easing - 애니메이션 곡선 (linear, easyIn, easyOut, easyInOut)

Staggered 텍스트 Reveals

멀티 라인 텍스트의 경우, 캐스케이드 효과에 대한 시작 시간:

제품정보 시작 시간 제품 정보
라인 1 0.2s 첫 번째
라인 2 0.35s 두 번째
라인 3 0.5s 제 3 부

이것은 전문 모션 그래픽에서 본 고전적인 "line-by-line reveal"을 만듭니다.

다른 효과와 결합

가면 생기는 잘 작동합니다:

  • Keyframe 애니메이션 - 그들이 계시하는 동안 항목을 이동
  • Simple 애니메이션 - 공개 후 펄스 또는 페이드 추가
  • 배경 발전기 - 애니메이션 배경에 콘텐츠를 공개

이미지 보호 (Static)

이미지에 정체되는 모양 masking를 위해:

  1. 수입 이미지 선택
  2. 속성 패널에서, 클릭 마스크
  3. 모양을 선택하십시오 (원격, 별, 심장, 6각형, 등)
  4. 마스크 크기와 위치를 조정
  5. 클릭 Apply Mask

이 모양에 영구적인 작물을 만듭니다 (애니메이션 아닙니다).

최고의 결과에 대한 팁

  1. ** - 0.4-0.8 초가 가장 잘 작동합니다
  2. EasyOut 사용 - 더 자연스러운 느낌
  3. Stagger는 일관적으로 - 선 사이 0.1-0.2s
  4. 콘텐츠를 잡아 - 극적인 용 아이리스를 사용, 전문가 용 와이퍼
  5. 전체 속도에 대한 리뷰 - 시험 타이밍은 맞습니다

마스크 모드

마스크 모양이 당신의 내용과 상호 작용하는 방법을 통제하십시오:

주요 특징 제품 정보 사용 사례
클립 (과태) 마스크 모양 안에서만 볼 수 있는 내용 표준 공개, framing
기타 제품 except 안쪽 가면 모양에 눈에 보이는 내용 Cutout 효력, 구멍
회사연혁 마스크 오버랩만 볼 수 있는 콘텐츠 Venn 도표 효력

마스크 모드를 변경하려면:

  1. 마스크 아이템 선택
  2. 속성 패널에서 마스크 모드 드롭 다운을 찾습니다
  3. 클립, Subtract, Intersect

회사 소개

복잡한 마스킹 효과를 위한 단일 항목에 여러 마스크를 적용:

  1. 초기 마스크 (예, 원)
  2. 다른 형태를 가진 두번째 가면 층을 추가하십시오:
    • 추가 - 두 마스크 모양 (중 하나에서 보이지 않는)
    • Subtract - 첫 번째 모양을 잘라
    • Intersect - 과잉 영역만 볼 수 있습니다

예제: 스타 컷 아웃과 서클

  1. 클릭 마스크 (클립 모드)
  2. star 마스크 레이어 추가 (subtract mode)
  3. 결과 : 중심의 별 모양의 구멍이있는 원형 프레임

사이트맵 사이트맵

Multiple 가면은 결합했습니다: 별 subtracted
를 가진 원형 가면 사이트맵

많은 가면 층으로 겹쳐 쌓일 수 있습니다. 다른 사람에게 영향을 주지 않고 개별 레이어를 제거하십시오.

Vertex 애니메이션

마스크 모양은 두 주 사이에 vertices를 변형시켜야합니다

  1. 시작 마스크 모양 정의 (vertex 위치)
  2. 종료 마스크 모양 정의 (vertex 위치)
  3. 이 마스크는 재생 중에 모양 사이에 부드럽게 변형합니다

이 생성 유기, 흐르는 마스크 전환은 간단한 규모와 위치 애니메이션을 넘어 간다.

사이트맵 사이트맵 사이트맵 Q Clip, Subtract 및 Intersect Mask Modes와 동일한 아이템 사이트맵

기술 노트

  • 가면 사용 Paper.js는 내부로 구멍을 뚫었습니다 그룹
  • 중심 마스크 (스타, 심장) 규모
  • Rectangle 가면은 닦음 효력을 위한 차원을 변화합니다
  • 마스크는 템플릿을 로딩할 때 다시 제작됩니다
  • 풀 프로그래밍 제어를 위해, applyCustomMask()에 대한 API 문서를 참조하십시오

관련: 공지 | 키프레임 편집기 | 템플릿