원인과 움직임

특정 중단점에서 애니메이션을 표시하는 방법

특정 중단점에서 애니메이션을 시작하려는 경우 애니메이션이 발생하기를 원하는 중단점을 확인할 수 있습니다. 기본적으로 애니메이션은 모든 중단점(데스크톱 이상, 태블릿, 휴대폰 가로 및 휴대폰 세로)에서 트리거됩니다.

예를 들어, 이는 마우스 클릭 상호 작용이 데스크톱 및 중단점 위에서만 발생하도록 하려는 경우 유용할 수 있습니다. 이 시나리오에서 방문자는 마우스로 상호 작용을 활성화할 수 있습니다.

동일한 클래스를 가진 모든 요소에서 애니메이션을 시작하는 방법

동일한 클래스를 공유하는 모든 요소에서 애니메이션을 시작하려는 경우 해당 클래스가 있는 한 요소에 상호 작용을 구현한 후 전체 클래스에 적용할 수 있습니다.

해당 클래스가 있는 모든 요소에 애니메이션을 설정하려면 다음을 수행하세요.

1. 요소에 애니메이션 설정
2. 로 진행 트리거 설정 그리고 골라 수업
3. 애니메이션을 적용하려는 클래스를 선택하세요. 수업 쓰러지 다

상호작용 재사용에 대해 자세히 알아보세요. 

추가 애니메이션 구성

스크롤 오프셋

다양한 페이지 스크롤 트리거(예: '스크롤하여 보기', '보기에서 스크롤하는 동안(연속)' 등)의 경우 오프셋. 이는 페이지의 특정 스크롤 비율에 도달할 때까지 상호 작용 시작을 연기합니다. 스크롤 오프셋이 클수록 상호 작용이 시작되기 전에 방문자가 스크롤하는 시간이 길어집니다.

지연

애니메이션을 정의하는 기능이 있습니다. 지연, 할당된 시간 지연이 경과한 후에만 애니메이션이 발생하도록 합니다.

스무딩

다음을 수정할 수도 있습니다. 스무딩 애니메이션의. 스무딩은 애니메이션이 마우스 움직임에 반응하는 속도를 나타냅니다.

애니메이션을 구성하는 방법

방금 설정한 트리거를 기반으로 애니메이션을 구성하려면 맞춤 애니메이션 또는 기존 애니메이션(예: 페이드, 축소, 젤로 등)을 선택합니다.

기존 애니메이션을 설정하는 방법

기존 애니메이션에는 다음이 포함됩니다. 나타나고 사라지다 그리고 중요성 Designer에서 사전 구성된 애니메이션. 이는 애니메이션의 각 구성 요소를 개별적으로 구축하는 것보다 더 빠른 대안으로 선택할 수 있습니다.

메모: 기존 애니메이션은 페이지 트리거가 아닌 요소 트리거에 대해서만 설정할 수 있습니다.

기존 애니메이션을 구성하려면:

1. 시작하다 요소 트리거 (예: 마우스 오버, 스크롤하여 보기 등)
2. 펼치다 행동 시작 작업 세그먼트의 드롭다운(예: 마우스 호버 요소 트리거를 선택한 경우 행동 드롭다운에서 호버링 시 분절)
3. 다음 중 하나에서 작업을 선택합니다. 나타나고 사라지다 category 또는 중요성 범주

이후에 방향과 지연을 사용자 정의할 수 있습니다. 나타나고 사라지다 애니메이션이나 방향 중요성 애니메이션.

사용자 정의 애니메이션을 구성하는 방법

사용자 정의 애니메이션을 구성하려면:

1. 설립 요소 트리거 (예: 마우스 오버, 스크롤하여 보기 등) 또는 페이지 트리거 (예: 페이지 로드, 페이지 스크롤 등)
2. 공개하다 행동 초기 작업 섹션의 드롭다운(예: 마우스 호버 요소 트리거를 선택한 경우 행동 드롭다운에서 호버링 시 분절)
3. 아래의 '애니메이션 시작'을 클릭하세요. 맞춤 애니메이션
4. “를 클릭하세요....을 더한"에 인접 시간 제한 애니메이션
5. 이름 상호 작용 패널 위에 있는 애니메이션
6. 누르세요 "...을 더한" 의 우측에 행위
7. 다음을 선택하세요 전역 변수, 변환, 스타일, 또는 여러 가지 잡다한 드롭다운의 애니메이션

그런 다음 애니메이션의 타이밍을 미세 조정합니다. 애니메이션 타임라인.

애니메이션 타임라인 조작 방법

새 애니메이션을 만들거나 기존 애니메이션을 수정하는 경우 애니메이션 타임라인에서 키프레임을 사용하여 다양한 요소에 애니메이션을 적용할 수 있습니다.

애니메이션 타임라인에 작업을 추가하려면 처음에 애니메이션 타임라인. 그런 다음 다음 두 가지 방법 중 하나로 작업을 추가할 수 있습니다.

• '를 탭하세요....을 더한타임라인 상단의 ” 아이콘
• “를 클릭하세요....을 더한” 아이콘을 타임라인 내에서 기존 작업 이전, 중간, 게시하여 작업을 인라인으로 삽입할 수 있습니다.

삽화

예를 들어, "페이지가 스크롤되는 동안" 페이지 트리거에 대한 애니메이션을 구성해 보겠습니다. 페이지를 아래로 스크롤하면 히어로 섹션 텍스트가 수평으로 이동하고 불투명도가 감소되도록 할 수 있습니다. 애니메이션 타임라인의 녹색 재생 헤드는 페이지의 현재 위치(0% – 100%)를 나타냅니다.

시간이 지정된 애니메이션은 다른 트리거(밀리초, 초 등)를 자주 활용하지만 이 인스턴스는 페이지의 현재 스크롤 위치를 나타내기 위해 백분율을 사용합니다. 여기서 0%는 페이지 상단의 스크롤 위치를 나타내고, 100%는 페이지 하단의 스크롤 위치를 나타낸다. 

이제 페이지의 다양한 지점에서 다양한 작업을 통합할 수 있습니다. 예를 들어, 0% 스크롤 위치에 4개의 프로시저를 포함할 수 있습니다.

• 텍스트 배경 — Shift 0px
• 텍스트 배경 - 투명도 100%(완전히 표시됨)
• 텍스트 전경 — Shift 0px
• 텍스트 전경 — 투명도 100%

이 단계에서는 텍스트 배경과 텍스트 전경을 0px(움직임 없음)에 배치하고 투명도를 100%(완전히 표시됨)로 설정합니다. 방문자가 페이지 상단에 도달하면 텍스트 배경과 전경이 완전히 표시되고 원래 위치에 유지됩니다.

100% 스크롤 위치에서 4가지 방법을 도입할 수도 있습니다.

• 텍스트 배경 — Shift 900px
• 텍스트 배경 - 투명도 0%(완전히 투명함)
• 텍스트 전경 — Shift 900px
• 텍스트 전경 - 투명도 0%

이 경우 각 요소는 어느 방향으로든 900px만큼 이동되며 투명도는 0%로 설정됩니다. 스크롤 애니메이션에 대한 최종 작업을 검토해 보겠습니다.

이 단계에서는 텍스트 배경과 텍스트 전경의 위치를 900px(어느 쪽이든 900px 이동)로 조정하고 투명도를 0%(완전히 투명)로 설정합니다. 방문자가 페이지 하단에 도달하면 텍스트 배경과 전경이 완전히 투명해지며 원래 위치에서 페이지 오른쪽이나 왼쪽으로 900px 이동됩니다.

전문가 팁: 애니메이션 타임라인에서 여러 작업을 선택하는 두 가지 기술이 있습니다. 여러 개를 선택하려면 연이은 작업, 길게 누르기 옮기다 해당 작업을 선택하세요. 여러 개를 선택하려면, 비연속적 행동, 누르기 명령 (Mac의 경우) 또는 제어 (Windows의 경우) 작업을 선택합니다.

액션 타겟에 관해서

기본적으로 애니메이션 타임라인에 추가하는 각 작업은 선택한 요소에 영향을 미칩니다. 그러나 다음 두 가지 방법 중 하나로 작업의 초점을 수정할 수 있습니다.

• 작업의 영향을 받는 대상 요소를 대체합니다.
• 작업이 선택한 요소에만 영향을 미치는지, 동일한 category를 공유하는 모든 요소 또는 상호 작용 트리거 자체에 영향을 미치는지 확인합니다.

대상 요소 수정

작업의 영향을 받는 요소를 수정하려면 다음을 수행하세요.

1. 애니메이션 타임라인에서 작업을 마우스 오른쪽 버튼으로 클릭하세요.
2. 딸깍 하는 소리 대상 변경
3. 작업을 적용할 캔버스에서 다른 요소를 선택하세요.

중요한: 애니메이션 타임라인 내의 모든 수정 사항은 애니메이션 시퀀스를 활성화하는 모든 상호 작용에 영향을 미칩니다.

작업이 단일 요소, 요소의 category 또는 상호 작용 트리거에 어떻게 영향을 미치는지 결정

작업을 생성하면 이 작업이 다음에 영향을 미칠지 여부를 선택할 수 있습니다.

• 오직 선택된 요소
• 선택한 요소와 동일한 category를 공유하는 모든 요소
• 상호작용 트리거 자체

선택한 요소만 타겟팅

선택한 요소는 사용자가 구성하는 모든 애니메이션 작업의 표준 대상입니다. 선택한 요소에 영향을 미치도록 설정된 모든 작업은 꾸준히 정확한 요소에 영향을 미칩니다. 결과적으로 선택한 요소에 영향을 미치는 작업으로 애니메이션을 재사용하면 해당 작업은 트리거 요소에 관계없이 해당 요소에 일관되게 영향을 미칩니다.

선택한 요소와 동일한 category를 갖는 모든 요소 타겟팅

또한 다음을 타겟팅하는 것을 선호할 수도 있습니다. 범주 선택한 요소의 이렇게 하면 애니메이션 작업이 선택한 요소와 동일한 category를 공유하는 모든 요소에 영향을 미치게 됩니다.

이 선택은 페이지가 로드될 때 여러 요소를 병렬로 이동하려는 경우 유용합니다. 이를 달성하려면 모든 요소에 동일한 category를 할당하고 콤보 카테고리를 사용하여 페이지의 다른 위치로 이동하십시오. 그런 다음 기본 category에서 동일한 애니메이션 작업을 활용하여 각 요소가 유사하게 이동하지만 초기 위치는 서로 다릅니다.

영향을 받는 요소를 상호작용 트리거와 동일한 category를 공유하는 자녀, 형제자매 또는 부모로만 제한할 수도 있습니다.

선택한 요소와 동일한 category를 공유하는 자녀, 형제자매 또는 부모를 타겟팅합니다.

트리거 요소의 하위, 형제 또는 상위인지 여부를 지정하여 작업의 영향을 받는 클래스를 정의할 수 있습니다.

이 옵션은 동일한 category를 공유하는 버튼 요소 내의 모든 화살표를 마우스 오버 시 애니메이션으로 표시하려는 경우 유용할 수 있습니다. 동일한 category가 있는 모든 요소에 애니메이션 작업을 통합하는 경우 1개 버튼 위로 마우스를 가져가면 해당 페이지의 모든 버튼에 있는 모든 화살표가 움직이는 것을 볼 수 있습니다. 해당 순간에 마우스를 올려놓은 버튼으로 애니메이션 동작을 제한하려면 영향을 미치다 메뉴를 클릭하고 '카테고리'를 선택하세요. 그런 다음 범주 드롭다운에서 "이 category를 가진 어린이만"을 선택하세요.

"이 클래스의 형제만" 선택은 애니메이션을 적용하려는 요소가 메뉴 드롭다운 또는 팝업 모달과 같은 트리거 요소의 형제인 경우에 유용합니다. 마찬가지로 애니메이션 대상 요소가 트리거 요소의 상위인 경우 "이 category의 상위만" 대안을 활용할 수 있습니다.

메모: 클래스 기반 애니메이션을 형성하기 전에 category를 요소에 귀속시키십시오. "category" 선택은 특정 클래스를 포함하지 않는 요소에 적용되는 작업에 대해 준비되지 않습니다.

상호작용 유발 요인을 타겟팅하기 위한 전략

또한 다음과 같은 운영을 설정할 수도 있습니다. 독특하게 영향을 미치다 상호작용의 방아쇠. 이후에 애니메이션을 재사용하는 후속 상호 작용의 경우 애니메이션은 이전 대상 요소를 새 상호 작용의 트리거 요소로 대체합니다. 이를 통해 새로운 애니메이션을 생성할 필요 없이 모든 요소에 동일한 애니메이션을 신속하게 적용할 수 있습니다.

논평: "상호작용 트리거" 옵션은 상호작용의 트리거 요소에서 작업이 실행될 때만 액세스할 수 있습니다. 따라서 이 선택 사항은 페이지 트리거에 의해 프롬프트되는 애니메이션에서는 제공되지 않습니다.

활성 애니메이션 수정

상호 작용 패널로 이동하고 애니메이션을 선택하여 구성을 공개함으로써 기존 애니메이션을 수정할 수 있습니다. 결과적으로 애니메이션 제목 위로 마우스를 가져간 다음 설정 아이콘 "을 탭합니다.장부”는 애니메이션 제목 오른쪽에 위치합니다. 이 작업을 수행하면 해당 특정 애니메이션의 애니메이션 타임라인이 공개됩니다.

대체 소스

• 상호 작용 채택에 대한 지식 확장
• 보간, 완화 및 스무딩 자세히 알아보기
• 스크롤할 때 요소를 수평으로 이동하고 페이드하는 연속 애니메이션을 설정하는 프로세스를 알아보세요.

활용되지 않는 트리거 및 애니메이션 제거 및 삭제

트리거 및 애니메이션을 삭제하는 절차

상호 작용 패널에서 트리거나 애니메이션을 제거할 수 있습니다. 이렇게 하면 트리거나 애니메이션이 더 이상 특정 대상 요소나 페이지 작업에 연결되지 않습니다. 트리거 또는 애니메이션을 제거하려면 다음을 수행하십시오.

1. 다음으로 진행하세요. 상호 작용 패널
2. 삭제하려는 애니메이션 또는 트리거 위로 마우스를 가져가세요.
3. “를 선택하세요.쓰레기트리거 이름 옆에 있는 " 아이콘

주목: 상호 작용 패널에서 트리거를 삭제하면 이전에 연결되었던 애니메이션은 삭제되지 않습니다. 단지 해당 특정 트리거에서 애니메이션을 분리할 뿐입니다. 이후에도 새 트리거를 구성할 때 애니메이션을 계속 사용할 수 있습니다.

웹사이트에서 트리거 및 애니메이션을 제거하는 프로세스

애니메이션이 제거되거나 연결된 애니메이션이 없는 트리거가 상호 작용 패널에서 삭제되어도 해당 트리거 또는 애니메이션이 완전히 제거되지는 않습니다. 대지. 이는 대체 요소 또는 페이지 트리거에서 이전에 생성된 애니메이션을 재사용할 수 있기 때문입니다. 그럼에도 불구하고 사이트 최적화 및 성능 향상을 위해 사용되지 않는 트리거나 애니메이션을 정리하는 것을 고려할 수 있습니다. 

사용되지 않는 상호 작용을 지우는 동안 제거할 트리거를 선택할 수는 없지만 유지하거나 삭제할 애니메이션을 결정할 수 있습니다. 사용되지 않은 상호 작용을 정리하는 동안 사용되지 않은 모든 트리거가 지워집니다.

팁: 애니메이션을 완전히 제거(정리)하는 옵션은 애니메이션이 요소 또는 페이지 트리거에 연결되지 않은 경우에만 가능합니다. 처음에는 상호 작용 패널의 모든 요소 또는 페이지 트리거에서 애니메이션을 제거한 다음 계속 진행하여 웹 사이트에서 애니메이션을 제거합니다.

사용되지 않는 트리거 및 애니메이션을 지우려면 다음을 수행하십시오.

1. 액세스 상호 작용 패널
2. 누르다 정리하다 패널 상단에 위치
3. 삭제/유지하려는 애니메이션 결정
4. 클릭 삭제