MooTools-Fx.Options

MooTools는 Fx.Tween 및 Fx.Morph에 도움이되는 다양한 Fx.Options를 제공합니다. 이 옵션은 효과를 제어 할 수 있습니다.

MooTools가 제공하는 몇 가지 옵션에 대해 논의하겠습니다. 계속하기 전에 옵션 설정을위한 다음 구문을 살펴보십시오.

통사론

var morphObject = new Fx.Morph(morphElement, {
   //first state the name of the option
   //place a :
   //then define your option
});

fps (초당 프레임)

이 옵션은 모핑하는 동안 애니메이션의 초당 프레임 수를 결정합니다. 이러한 fps를 Morph 또는 Tween 기능에 적용 할 수 있습니다. 기본적으로 fps 값은 50입니다. 즉, 모핑하는 동안 모든 기능에 초당 50 프레임이 걸립니다.

예

5fps를 사용하여 div 요소를 모핑하는 예를 들어 보겠습니다. 다음 코드를 살펴보십시오.

<!DOCTYPE html>
<html>

   <head>
      <style>
         #morph_element {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var morphStart = function(){
            this.start({
               'width': 200,
               'height': 200,
               'background-color': '#d3715c'
            });
         }
         
         window.addEvent('domready', function() {
            var morphElement = $('morph_element');
            var morphObject = new Fx.Morph(morphElement, {
               fps: 5
            });
            
            $('start').addEvent('click', morphStart.bind(morphObject));
         });
      </script>
   </head>
   
   <body>
      <div id = "morph_element"> </div><br/>
      <input type = "button" id = "start"value = "START"/>
   </body>
   
</html>

다음과 같은 출력을 받게됩니다.

산출

클릭 START버튼을 눌러 모핑 애니메이션을 찾습니다. 이것은 애니메이션에 사용되는 프레임 수를 관찰하는 데 도움이됩니다. 애니메이션의 차이를 얻으려면 fps에 다른 값을 사용하십시오. 10보다 작은 fps 값을 사용하는 것이 좋습니다. 이렇게하면 차이를 쉽게 얻을 수 있습니다.

단위

이 옵션은 숫자의 단위 유형을 설정하는 데 사용됩니다. 일반적으로 px, % 및 ems의 세 가지 유형의 단위가 있습니다. 다음 구문을 살펴보십시오.

통사론

var morphObject = new Fx.Morph(morphElement, {
   unit: '%'
});

위의 구문은 단위에 백분율을 할당하는 것입니다. 이것은 숫자의 모든 값이 백분율로 처리됨을 의미합니다.

링크

이 옵션은 애니메이션을 시작하기위한 여러 호출을 관리하는 방법을 제공합니다. 한 번에 여러 이벤트 호출을 적용하면 이러한 호출이 링크 호출로 처리됩니다. 첫 번째 호출이 완료되면 두 번째 호출이 자동으로 실행됩니다. 그것은 다음 세 가지 옵션을 포함합니다-

ignore− 이것이 기본 옵션입니다. 효과가 완료 될 때까지 모든 호출을 무시합니다.
cancel− 이것은 다른 효과가있을 때 현재 효과를 취소합니다. 최신 통화 우선 순위를 따릅니다.
Chain−이를 통해 효과를 함께 연결하고 호출 스택을 유지할 수 있습니다. 스택의 모든 연결 호출을 통과 할 때까지 모든 호출을 실행합니다.

링크 옵션 사용에 대한 다음 구문을 살펴보십시오.

통사론

var morphObject = new Fx.Morph(morphElement, {
   link: 'chain'
});

지속

이 옵션은 애니메이션 기간을 정의하는 데 사용됩니다. 예를 들어 개체가 1 초 동안 100px 이동하도록하려면 1 초에 1000px 이동하는 개체보다 느리게 이동합니다. 밀리 초 단위로 측정되는 숫자를 입력 할 수 있습니다. 또는 숫자 대신이 세 가지 옵션 중 하나를 사용할 수 있습니다.

짧음 = 250ms
정상 = 500ms (기본값)
긴 = 1000ms

기간 사용에 대한 다음 구문을 살펴보십시오.

통사론

var morphObject = new Fx.Morph(morphElement, {
   duration: 'long'
});

또는,

var morphObject = new Fx.Morph(morphElement, {
   duration: 1000
});

전이

이 옵션은 전환 유형을 결정하는 데 사용됩니다. 예를 들어, 부드러운 전환이되어야하거나 천천히 시작되어야한다면 끝까지 속도를 높이십시오. 전환을 적용하려면 다음 구문을 살펴보십시오.

통사론

var tweenObject = new Fx.Tween(tweenElement, {
   transition: 'quad:in'
});

다음 표는 다양한 유형의 전환을 설명합니다.

S. 아니.	전환 유형 및 설명
1	선의 in, out, in-out 이벤트가있는 선형 전환을 표시합니다.
2	쿼드 in, out, in-out 이벤트가있는 2 차 전환을 표시합니다.
삼	큐빅 in, out, in-out 이벤트와 함께 입방체 전환을 표시합니다.
4	쿼트 in, out, in-out 이벤트가있는 4 차 전환을 표시합니다.
5	Quint in, out, in-out 이벤트가있는 5 가지 전환을 표시합니다.
6	펑 in, out, in-out 이벤트로 Quad, Cubic, Quart 및 Quint를 생성하는 데 사용됩니다.
7	엑스포 in, out, in-out 이벤트와 함께 지수 전환을 표시합니다.
8	Circ in, out, in-out 이벤트가있는 순환 전환을 표시합니다.
9	사인 in, out, in-out 이벤트가있는 사인파 전환을 표시합니다.
10	뒤 전환을 뒤로 이동 한 다음 모두 in, out, in-out 이벤트로 만듭니다.
11	되튐 인, 아웃, 인-아웃 이벤트로 전환을 탄력있게 만듭니다.
12	탄력있는 인, 아웃, 인-아웃 이벤트를 통한 탄성 곡선 전환