Skip to content

Computer animation

Animation으로도 들어올 수 있다.

Categories

  • Skeletal animation
  • Path animation
  • Hand writing animation
  • Gooey 이펙트
  • SVG
  • Carousel
  • Morphing (모핑)
  • Sliding Animation
  • The Stomp Animation
  • The Curtain Animation
  • Animated Text Outline Effect
  • Animated Text Fill Effect
  • Neon Light Animation
  • In and Out of Focus Effect
  • Carousel (캐러셀)
  • Glassmorphism Effect - 글래스모피즘 이팩트 (유리창 글레어)

Examples

Tools

  • SpookyGhost - A procedural sprite animation tool made with the nCine

Skeletal Animation Tools

Libraries

애니메이션의 12 가지 기본 원리

Animation12principles_-_squash_stretch.gif
Animation12principles_-_anticipation.gif

Squash & Stretch

Anticipation

Animation12principles_-_staging.gif
Animation12principles_-_straight_ahead_pose_to_pose.gif

Staging

Straight Ahead & Pose To Pose

Animation12principles_-_follow_through_overlapping.gif
Animation12principles_-_slow_in_slow_out.gif

Follow Through & Overlapping

Slow In & Slow Out

Animation12principles_-_arcs.gif
Animation12principles_-_secondary_action.gif

Arcs

Secondary Action

Animation12principles_-_timing.gif
Animation12principles_-_exaggeration.gif

Timing

Exaggeration

Animation12principles_-_solid_drawings.gif
Animation12principles_-_appeal.gif

Solid Drawings

Appeal

See also

Favorite site

  • 좋은 애니메이션과 훌륭한 애니메이션의 차이 | GeekNews
    • [원문] Good vs Great Animations
    • 애니메이션은 UI의 품질을 좌우하는 핵심 요소로, 단순히 보기 좋음을 넘어 자연스러운 느낌과 인터랙션의 직관성을 제공함
    • 훌륭한 애니메이션을 만들기 위해서는 원점 인식, 적절한 Easing 선택, 스프링 효과 활용, 도구에 대한 깊은 이해가 필수임
    • 기본 CSS Easing 함수보다 커스텀 Easing 곡선이 더 강한 몰입감과 에너지를 전달할 수 있음
    • 프레이머 모션의 useSpring 훅을 사용하면 마우스 위치 기반 인터랙션이 더 현실적이고 부드럽게 느껴짐
    • CSS 속성에 대한 이해가 깊을수록 새로운 애니메이션을 창의적으로 구현하거나 기존 애니메이션을 개선할 수 있음