모션 효과 적용하기

이벤트/모션 적용

  • 모션 효과를 적용할 아이템을 선택한 후 이벤트 효과 패널을 이용하여 모션효과를 설정합니다.
    적용된 모션효과는 미리보기 버튼을 클릭하여 바로 확인이 가능합니다.
     
  • 이벤트 속성
    효과/모션?
    이벤트 효과1:
    적용 대상:
    모션 효과:
    Easing:
    대기 시간:
    속도(ms):
    선두께:
    전경색:
    배경색:
    글자색:
    모션 방식:
    패스 대상:
    이동 경로:
    이동 방향:
    시작 지점:
    종료 지점:
    방향 전환:
    투명도:
    각도:
    ScaleX:
    ScaleY:
    1) 이벤트 효과: 모션효과를 적용할 이벤트 설정 (최대 9개까지 설정 가능)
       - 페이지 로딩: 페이지 로딩시 효과 적용
       - 마우스 오버: 마우스가 아이템 위에 올라갔을 때 효과 적용
       - 마우스 아웃: 마우스가 아이템 영역을 벗어났을 때 효과 적용
       - 마우스 다운: 마우스 왼쪽 버튼을 눌렀을 때 효과 적용
       - 마우스 업: 마우스 왼쪽 버튼을 떼었을 때 효과 적용
       - 마우스 더블클릭: 마우스 왼쪽 버튼을 두번 눌렀을 때 효과 적용
       - 마우스 오버/아웃: 마우스 오버 효과 적용/마우스 아웃 복원
       - 마우스 다운/업: 마우스 다운 효과 적용/마우스 업 복원
       - 모션 실행 완료(1회): 모션 1회 실행 완료후 효과 적용
       - 아이템 접촉 (모션 이동): 모션 아이템이 이동 포인트 지점에서 다른 물체와 접촉시 접촉을 당한 물체에 효과 적용 (기본 경로 이동은 이동 중간지점에서 효과 적용 안됨, 동일한 물체와 2번 연속으로 접촉했을 경우 효과 적용 안됨, 접촉 이벤트가 발생한 물체는 2초간 동일 이벤트 적용 안됨)
       - 아이템 접촉 (모션 종료): 모션 아이템이 모션 종료 지점에서 다른 물체와 접촉시 접촉을 당한 물체에 효과 적용 (접촉 이벤트가 발생한 물체는 2초간 동일 이벤트 적용 안됨)
       - 동영상 재생 시간: 설정된 동영상 재생 시간에 효과 적용 (동영상에서만 사용가능)
       - 이벤트 조건 달성: 물체에 설정된 조건 달성시 효과 적용 (조건은 확장 기능 또는 함수로 구현해서 설정)
    2) 적용 대상: 이벤트 발생시 모션 효과를 적용할 아이템 선택 (A에서 이벤트 발생시 B,C,D 아이템에 모션 효과 적용 가능)
    3) 모션 효과:
       - 효과없이 바로 실행: 설정된 효과를 바로 적용
       - 1회 실행: 모션 효과를 1회만 실행
       - 1회 실행 / 링크실행: 모션 1회 실행 후 링크 속성에 설정된 액션 실행
       - 1회 실행 / 동영상 재생: 모션 1회 실행 후 동영상 재생 (적용대상을 동영상으로 설정 필요)
       - 1회 실행 / 동영상 정지: 모션 1회 실행 후 동영상 정지 (적용대상을 동영상으로 설정 필요)
       - 반복 실행 (순환): 시작에서 끝으로 한 방향으로 반복해서 모션효과 실행
       - 반복 실행 (왕복): 시작과 끝을 양방향(왔다갔다)으로 반복해서 모션효과 실행
    4) Easing: 모션 효과 속도의 변화율 설정
       - Ease-In: 느리게 시작해서 점점 빨라짐 (아이템이 화면에서 사라질 때 주로 사용)
       - Ease-Out: 빠르게 시작해서 점점 느려짐 (아이템이 화면에 나타날 때 주로 사용)
       - Ease-InOut: 느리게 시작 → 빨라짐 → 다시 느려짐
    5) 대기시간(ms): 모션 효과가 실행되기 전 대기시간 설정 (2000 설정시 2초뒤에 모션효과 실행)
    6) 속도(ms): 모션 효과 실행 속도 (1000 설정시 1초 동안 모션효과 실행)
    7) 선두께: 모션 효과 실행시 아이템의 선두께를 변경
    8) 전경색: 모션 효과 실행시 아이템의 전경색을 변경
    9) 배경색: 모션 효과 실행시 아이템의 배경색을 변경
    10) 글자색: 모션 효과 실행시 아이템의 글자색을 변경
    11) 모션방식
       - 상대값: 현재 위치에서 설정한 값만큼 이동
       - 절대값: 현재 위치에서 고정된 좌표 위치로 이동
       - 모션 패스: 패스 대상으로 설정된 아이템의 좌표를 순차적으로 이동
    12) 패스 대상: 모션 이동시 모션 패스로 사용할 아이템 설정
       - 도형, SVG, 폴리라인, 그룹 등 다양한 아이템을 모션 패스로 설정 가능
    13) 이동 경로: 모션 이동 방식 설정
       - 기본 경로: 라운드가 포함되지 않은 경로로 이동
       - 세밀한 경로: 라운드가 포함된 경로로 이동 (Easing 효과 적용이 안되고, 빠른 속도로 이동 불가)
    14) 이동 방향: 모션이 이동하는 방향 설정
       - 정방향: 아이템이 이동 포인트 순서대로 이동
       - 역방향: 아이템이 이동 포인트 반대 방향으로 이동
       - 최단 거리: 아이템의 현재 위치에서 종료지점까지의 최단 거리 방향으로 이동
    15) 시작 지점: 모션이 시작하는 위치 설정
       - 랜덤 (Random): 모션 패스 포인트 중에서 랜덤으로 시작 위치 설정
       - 아이템 근접 위치: 아이템과 가장 근접한 위치에 있는 모션 패스 포인트를 시작 위치로 설정
    16) 이동 거리: 모션이 이동하는 거리 설정 (이동방향이 "정방향","역방향" 설정시 활성화)
       - 모션의 시작 지점으로 부터 상대적인 거리를 이동
       - 랜덤 (Random): 랜덤으로 이동 거리 설정
       - 그룹패스 (1개): 모션 패스 대상이 그룹으로 설정되어 있을 경우 그룹에서 1개 아이템에 해당 하는 거리 이동
       - 이벤트 아이템: 모션 이벤트를 보유 또는 실행시킨 아이템과 가장 근접한 모션 패스 포인트 위치로 이동
    17) 종료 지점: 모션이 종료 되는 위치를 설정 (이동방향이 "최단경로" 설정시 활성화)
       - 아이템의 시작 포인트를 기준으로 설정된 위치만큼 이동
       - 랜덤 (Random): 모션 패스 포인트 중에서 랜덤으로 종료 지점 설정
       - 그룹패스 (1개): 모션 패스 대상이 그룹으로 설정되어 있을 경우 그룹에서 1개 아이템이 종료되는 지점으로 이동
       - 이벤트 아이템: 모션 이벤트를 보유 또는 실행시킨 아이템과 가장 근접한 모션 패스 포인트 위치로 이동
    18) 방향 전환: 모션 실행 후 아이템의 방향전환 설정

주의사항

  • 투명한 물체(이미지,도형)에 이벤트를 설정하기 위해서는 반드시 투명도를 0.01 이상으로 설정필요 (투명도를 0으로 설정할 경우 마우스 이벤트 설정 불가, 사각형 도형 제외)
  • 물체에 2개의 모션을 동시 적용 불가 (모션 패스로 이동중인 물체에 추가 모션 적용 불가, 이동이 종료된 이후에 추가 모션 적용 가능)
  • 아이템(물체) 접촉 이벤트는 중복 이벤트 발생을 막기 위해 이벤트가 발생하면 3초 이후에 다시 적용 가능

모션 방식

상대값

현재 위치에서 설정한 값만큼 좌표 이동

절대값

현재 위치에서 고정된 좌표 위치로 이동

모션 패스

패스 대상에 설정된 아이템의 좌표 위치를 순차적으로 이동
폴리라인 또는 SVG 이미지의 좌표를 따라 모션 설정 가능

모션 이동 경로

기본 경로

꼭짓점을 중심으로 모션 이동
꼭짓점이 없는 아이템(원형) 또는 이동 포인트를 가지고 있는 아이템(SVG)의 경우 기본경로 방식으로 설정해도 세밀한 경로 방식으로 자동 변경

  • 꼭짓점을 중심으로 이동하기 때문에 Easing 효과 적용 가능
  • 꼭짓점을 중심으로 빠른 이동 가능
  • 첫번째 꼭짓점을 시작점으로 설정

세밀한 경로

꼭짓점 사이에 다수의 이동 포인트를 추가하여 포인트를 중심으로 모션 이동

  • 꼭짓점 사이에 세밀하게 추가된 포인트 좌표를 중심으로 이동하기 때문에 Easing 효과가 적용되지 않음
  • 1개의 포인트를 이동하는 최소 시간이 존재하기 때문에 이동 속도를 너무 빠르게 설정할 경우 설정한 속도보다 느리게 동작할 수 있음
  • 물체의 상단/중앙을 시작점으로 설정