소동 과대 광고로 웹 애니메이션의 고급 타이밍 및 완화-IT산업-php.cn

소동 과대 광고로 웹 애니메이션의 고급 타이밍 및 완화 키 테이크 아웃

소문 과대 광고는 애니메이터가 키 프레임 (시작 및 스톱 포인트)을 생성 할 수있는 최신 웹 애니메이션 도구이며 컴퓨터는 모든 프레임 사이의 모든 프레임을 동적으로 채 웁니다. 컴퓨터가 이러한 프레임을 생성하는 방식은 시청자의 관심과 정서적 연결에 영향을 줄 수 있습니다. 타이밍 기능은 애니메이션하는 요소를 인간화하는 데 중요한 역할을합니다. 그들은 정보를 깨끗하고 명확하게 제시하고, 직접 집중하고, 감정을 전달하며, 즐겁게 참여하고 참여할 수 있습니다. 타이밍 기능은 또한 "무생물"과 "애니메이션"객체의 움직임을 모델링 할 수 있습니다. 소형 과대 광고는 제어점을 조작하고 곡선에 새로운 포인트를 추가하여 자신의 사용자 정의 타이밍 기능을 형성 할 수있는 사용자 정의 타이밍 기능 편집기를 제공합니다. 이러한 기능은 과대 광고 문서에서 향후 사용하도록 명명되고 저장 될 수 있으며 모든 새로운 애니메이션의 기본 타이밍 기능으로 설정할 수도 있습니다. 타이밍 기능 사용에 대한 실제 팁은 며칠 동안 애니메이션을 "휴식"하도록하는 것이 포함됩니다. 느리게 느끼고 자연을 관찰하고 중력/물리학의 수학을 이해하여 애니메이션을 작성하는 방법을 알려줍니다.

이 기사는 Tummult 가 후원했습니다. SitePoint를 가능하게하는 파트너를 지원해 주셔서 감사합니다.

애니메이션은 부드러운 변화의 환상을 제공하기 위해 연속적인 이미지 나 프레임을 보여주는 것으로 대략 정의 할 수 있습니다. 소동 과대 광고와 같은 현대적인 웹 애니메이션 도구를 통해 애니메이터가 키 프레임 (일반적으로 시작 및 스톱 포인트)을 생성 할 수 있으며 컴퓨터는 모든 프레임 사이의 모든 프레임을 동적으로 채울 수 있습니다. 컴퓨터가 이러한 프레임을 생성하기로 결정하는 방법은 시청자의 관심과 정서적 연결에 영향을 줄 수 있습니다. 이 기사는 생성 된 애니메이션의 중요한 부분, 타이밍 기능 및 애니메이션에 대한 소동 과대 광고의 고급 타이밍 기능 편집기를 최대한 활용하는 방법을 탐구합니다. 읽기 전에 첫 번째 단계는 소동 과대 광고를 다운로드하는 것입니다. 시험은 14 일 동안 완전히 기능적입니다. 소동 과대 광고에는 표준과 전문가의 두 가지 맛 모드가 있습니다. 사용자 정의 타이밍 기능을 만들고이 기사와 함께 다음과 같은 경우 Hype Professional을 사용하고 싶을 것입니다.

선형 및 완화 타이밍 함수

화면을 가로 질러 움직이는 상자를 애니메이션하고 싶다고 가정 해 봅시다. 2 초 동안 300 픽셀을 왼쪽으로 이동하게됩니다. 애니메이션을 생성 할 때 컴퓨터는 상자의 위치를 제 시간에 결정해야하며 이것이 타이밍 기능의 역할입니다. 이들 중 가장 기본적인 것은 선형 보간으로, 거리를 프레임 수로 균등하게 나눕니다. 따라서, 초당 30 프레임-애니메이션은 각 단계가 300px / (2s * 30fps) = 5px로 상자 5 픽셀을 움직입니다. 이것은 성공적으로 애니메이션을 만듭니다 :

주관적으로,이 애니메이션은 부드럽습니다! 자연적인 육체 나 체중없이 움직입니다. 시청자의 눈은 상자가 움직이는 속도를 따라 잡아야하며 애니메이션이 갑자기 끝나면 시선을 넘어 설 것입니다. 가장 일반적인 솔루션은 기본 가속 및 감속을 상자에 적용하는 것입니다. 이 타이밍 함수는 쉽게 out을 불러옵니다

이것은 더 좋아 보이며 애니메이션에서 가장 일반적인 선택입니다. 소동 과대 광고 및 대부분의 다른 애니메이션 도구의 기본 타이밍 기능입니다. 타이밍 함수의 표현 더 정확하기 위해 타이밍 함수는 시간 (x)의 값을 입력하고 애니메이션 속성 (y)의 값을 출력합니다. 중학교 대수학으로 돌아가는 F (x) = y 스타일 함수는 2D 그래프에 표시 될 수있는 형태입니다. 기본 선형 타이밍 함수는 예상대로 보입니다. 소동 과대 광고로 웹 애니메이션의 고급 타이밍 및 완화

ease in out in out 곡선은 부드러운 곡선으로 느린 속도로 시작하고 끝나는 방법을 보여줍니다.

이 타이밍 기능은 입방 베지어 곡선의 수학으로 만들어집니다. 곡률에 영향을 미치는 제어점을 변경하면 다른 가속 및 감속이 달성 될 수 있습니다.

소동 과대 광고로 웹 애니메이션의 고급 타이밍 및 완화 속성 값은 최소값 또는 최대 값보다 낮아서 기대치와 오버 슈트 타이밍 기능을 생성 할 수 있습니다.

소문 과대 광고는 아직 더 많은 전력을 제공합니다. 여러 베르 지어 곡선을 결합하여 멀티 커브 경로를 형성 할 수 있습니다. 이들은 튀는 또는 탄력성과 같은 다양한 효과에 사용될 수 있습니다.

애니메이션에서 타이밍 기능에 중점을 둔 일반적인 추론 자연은 위의 선형 타이밍 함수와 같이 기계적으로 움직이지 않습니다. 완화와 같은 타이밍 기능은 애니메이션을 인간화하는 데 중요한 역할을합니다. 이것은 정보를 깨끗하고 명확하게 제시하는 데 도움이됩니다. 초점을 지시합니다. 좋은 타이밍은 애니메이션에 의미를 부여하는 데 도움이됩니다. 그것은 생명이없는 모양을 현실로 바꿉니다. 일부는 브랜딩에 중요한 감정을 전달하는 데 도움이 될 수 있습니다. 다른 타이밍은 즐겁게하고 참여할 수 있습니다.

“무생물”대상의 움직임은 물리학에 의해 더욱 통제됩니다. "애니메이션"대상은 자신의 생각과 감정에 의해 지배됩니다. 두 스타일 모두 타이밍 기능으로 모델링 할 수 있습니다 소동 과대 광고에서 타이밍 함수 적용 소동 과대 광고에서 애니메이션의 타이밍 기능 편집은 쉽습니다. Step Zero는 애니메이션을 만들고 있으므로 익숙하지 않은 경우 자습서와 문서를 확인하십시오. 단일 애니메이션의 타이밍 기능을 조정하려면 프로페티 당 영역의 키 프레임 사이에서 애니메이션 표시기 막대를 두 번 클릭 할 수 있습니다.

여러 애니메이션을 선택하면 타임 라인 인터페이스 오른쪽의 타이밍 기능 팝업 버튼을 사용할 수 있습니다.

애니메이션이 선택되지 않으면 기본 타이밍 기능이 타이밍 기능 팝업 버튼의 제목으로 표시됩니다. Hype Professional 에서이 인터페이스를 사용하면 제어점을 조작하고 곡선에 새로운 포인트를 추가하여 고유 한 사용자 정의 타이밍 기능을 형성 할 수 있습니다. 타이밍 기능의 이름을 지정할 수 있으므로 과대 광고 문서에서 향후 사용하기 위해 저장 될 수 있습니다. 새로운 애니메이션의 기본 타이밍 기능으로 설정할 수도 있습니다.