튜토리얼: 애니메이션 Motivational Post 만들기

Letter Collage Animations를 사용하여 Instagram Stories에 대한 눈길을 끄는 애니메이션 동기 부여 인용을 만드는 것을 배우십시오.

시간: 10분 어려움: 초보자

당신이 만든 것

3개의 구문을 가진 멋진 애니메이션 동기 부여 따옴표, 각 사용 다른 편지 collage 작풍 및 비틀린 생기.

사이트맵 사이트맵 사이트맵 사이트맵 사이트맵 사이트맵

자주 묻는 질문

• Letter Collage 스타일 - 네온 타일, 잡지 컷 아웃, 종이 컷 효과
• Staggered Animations — 하나씩 나타나는 편지
• 배경 발전기 - 애니메이션 sunburst 배경
• Keyframe 애니메이션 - 색상 전환 및 불꽃 효과

1 단계 : 캔버스를 설정

1. PinePaper 편집기 열기
2. Footer에서 canvas size dropdown을 클릭하십시오
3. Instagram 스토리 (1080×1920)

사이트맵 사이트맵

2단계: 애니메이션 배경 추가

1. Scenes 탭을 오른쪽 패널에서 클릭합니다
2. 배경 모드를 Generator로 설정
3. 선택 Sunburst
4. 색상 구성:
   • 색깔 1: #FF6B6B (황금)
   • 색깔 2: #4ECDC4 (전형)
   • 색깔 3: #FFE66D (황색)
5. 레이 카운트: 16
6. EnableAnimate 및 설정 속도: 0.5
7. 클릭 Generate

사이트맵 사이트맵

3 단계 : "DREAM BIG"문자 교원질 만들기

1. Letter Collage 버튼을 클릭합니다. 도구 모음 (또는 L를 누릅니다)
2. 유형: DREAM BIG
3. 스타일 구성:
   • 스타일: Tile
   • 팔레트: Neon
   • 글꼴 크기: 72
   • 코너 반경: 8
   • 비밀번호
4. 중심 정상 지역에 위치 (x: 540, y: 750)

관련 코드:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

4 단계 : "DREAM BIG"에 이상한 애니메이션 추가

1. 선택된 콜리지로 타임라인 패널
2. 클릭Add Staggered Animation
3. 구성 :
   • 효과: Pop In
   • Stagger 지연: 0.08s
   • 기간: 0.5s
   • Sequence: Linear (왼쪽 오른쪽)
   • 에칭:easeOut

관련 코드:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

사이트맵 사이트맵

5 단계 : “WORK HARD” Letter Collage 만들기

1. 다른 편지 교원질을 만들기:

   • 텍스트: 작업 하드
   • 스타일: Magazine (ransom 참고 보기)
   • 팔레트: 매거진
   • 글꼴 크기: 60
   • 위치: (540, 920)

2. Staggered 애니메이션 추가:

   • 효과: Fade 슬라이드 업
   • Stagger 지연: 0.1s
   • Sequence:Wave (흐름 공개)

관련 코드:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

6 단계 : "STAY HUMBLE"문자 교원질 만들기

1. 제3자 콜라주 만들기:

   • 텍스트: STAY HUMBLE
   • 스타일: 종이 컷 (3D 그림자 효과)
   • 글꼴 크기: 68
   • 위치: (540, 1100)

2. 바운드와 함께 이상한 애니메이션 추가:

   • 효과: Pop In
   • Stagger 지연: 0.06s
   • Sequence: 센터 (중상에서 회복)
   • 에칭: Bounce

관련 코드:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

사이트맵 사이트맵 사이트맵 다른 styles와 QAll 세 구문 사이트맵

단계 7: 장식적인 악센트 선을 추가하십시오

1. 장식적인 분배자를 위한 장방형을 창조하십시오:

   • 폭: 500의 고도: 8
   • 색깔: 백색 (#FFFFFF)
   • 구문 아래 위치

2. 색상을 위한 keyframe 애니메이션 추가:

관련 코드:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

8 단계 : 미리보기 및 플레이

1. Space를 눌러 애니메이션을 재생
2. 타임라인은 6초 루프를 보여줍니다
3. 눈에 띄는 밝혀보기 :
   • “DREAM BIG” 문자로 문자에 팝
   • “WORK HARD”는 파 효력으로 위로 미끄러지습니다
   • "STAY HUMBLE"는 센터에서 상쾌합니다

단계 9: 수출

인스타그램 스토리(Video)

1. 수출 버튼
2. WebM (추천) 또는 MP4
3. 구성 :
   • 기간: 6 초
   • 프레임 속도: 30 fps
   • 품질: 높은
4. ClickExport 다운로드 대기

기타 플랫폼

비밀번호

이 애니메이션을 재구성하는 전체 코드는 다음과 같습니다

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

빠른 시작: 템플릿 사용

찰상에서 건물 대신, 미리 만들어진 템플렛을 적재하십시오:

1. 열린 패널 (right sidebar)
2. 카테고리 선택: Social Media
3. 클릭 Motivational Quote
4. 템플릿은 모든 애니메이션을 준비합니다

Letter Collage Styles 참조

Stagger Sequence 패턴

Pro 팁

대비 - 어두운 배경의 빛 텍스트 (또는 vice versa)는 읽기 능력에 필수적입니다.

Stagger 타이밍 - 문자 사이 0.05-0.1s는 자연 느낌. Too 빠른 외모 기계.

Mix styles - 각 구문에 대한 다른 Letter Collage 스타일을 사용하여 시각적 관심을 추가합니다.

강조를위한 부스 - "STAY HUMBLE"에서 bounce가 추가주의를 끌고 있습니다.

다음 단계

• Letter Collage Reference - 모든 스타일과 옵션
• [Keyframe Editor] (/features/keyframes) - 사용자 정의 타이밍 컨트롤
• Effects - 스파클과 하이라이트 추가
• 물리 애니메이션 - 고급 재생 효과