Fx.Morph(기본적으로 여러 스타일시트 속성을 동시에 그라데이션할 수 있음)를 사용하는 방법을 배운 다음 Fx.Tween 및 Fx.Morph에 적용되는 Fx 옵션 중 일부를 살펴보고 마지막으로 "onComplete" 및 "onStart"와 같은 Fx 이벤트를 사용하는 방법을 살펴보겠습니다. 이러한 옵션과 이벤트를 통해 모양 애니메이션을 더 효과적으로 제어할 수 있습니다. Fx.Morph 새 Fx.Morph 만들기 새 모프를 초기화하는 것은 여러 스타일 속성을 지정한다는 점을 제외하면 새 그라디언트를 만드는 것과 유사합니다. 참조 코드:
// 먼저 , 요소는 변수에 할당됩니다. var morphElement = $('morph_element') // 이제 새 모프를 만듭니다. var morphObject = new Fx.Morph(morphElement) / / 이제 Fx.Tween과 마찬가지로 스타일 속성을 설정할 수 있습니다 // 하지만 여기서는 여러 스타일 속성을 설정할 수 있습니다 morphObject.set({ 'width': 100, 'height ': 100, 'ground-color': '#eeeeee' }); // 그라데이션처럼 변형을 시작할 수도 있습니다 // 여기서는 여러 속성 값을 배치해야 합니다. 동시에 morphObject.start({ '너비': 300, '높이': 300, '배경색': '#d3715c' }) ;
변환을 생성하고 설정하고 시작하는 것이 전부입니다. 이를 보다 합리적으로 만들려면 변수를 만들고, 함수를 분리하고, 이를 제어하기 위한 일부 이벤트를 만들어야 합니다. 참조 코드:
var morphSet = function(){ // 여기서 Fx.Tween 속성과 같은 스타일을 설정할 수 있습니다 // 하지만 여기서는 동시에 여러 스타일 속성을 설정할 수 있습니다. this.set({ 'width': 100, 'height': 100, 'Background-color ': ' #eeeeee' }); } var morphStart = function(){ // 그라데이션처럼 변형을 시작할 수도 있습니다 // 이제 여러 스타일 속성을 사용할 수 있습니다. 동시에 설정 this.start({ '너비': 300, '높이': 300, '배경색': '#d3715c' } ); } var morphReset = function(){ // 초기값으로 설정 this.set({ 'width': 0, 'height' : 0, 'ground-color': '#ffffff' }); } window.addEvent('domready', function() { // 먼저 요소가 할당됩니다. 변수에 var morphElement = $('morph_element'); // 이제 모프를 만듭니다. var morphObject = new Fx.Morph(morphElement)// 여기에 이벤트를 버튼에 클릭 //하고 morphObject를 이 함수에 바인딩 //하면 위 함수에서 "this"를 사용할 수 있습니다 $('morph_set').addEvent('click ', morphSet .bind(morphObject)); $('morph_start').addEvent('click', morphStart.bind(morphObject)) $('morph_reset').addEvent('click', morphReset.bind (morphObject)) });
// 그런 다음 중괄호 사이에 옵션을 설정합니다. { } var morphObject = new Fx.Morph(morphElement, { // 첫 번째는 옵션 이름 // 뒤에 콜론(:) //을 입력하고 옵션을 정의합니다. duration: 'long', transition: 'sine:in' } ) ;
fps(초당 프레임)
이 옵션은 이 애니메이션의 초당 프레임 수를 결정합니다. 기본값은 50이며 숫자와 숫자 값이 있는 변수를 허용합니다. 참조 코드:
// 그래디언트 또는 모프 만들기 // 그런 다음 중괄호 사이에 옵션을 설정합니다. { } var morphObject = new Fx.Morph(morphElement, { fps: 60 });// 또는 이렇게 varframePerSecond = 60; var tweenObject = new Fx.Tween(tweenElement, { fps:framePerSecond }); > unit(단위) 숫자의 단위를 설정하는 옵션입니다. 예를 들어 100이란 100픽셀(px), 백분율 또는 em을 의미합니까?
var morphObject = new Fx.Morph(morphElement, { unit: '%' })
link link 옵션은 효과를 실행하는 여러 함수 호출을 관리하는 방법을 제공합니다. 예를 들어 마우스 오버 효과가 있는 경우 사용자가 이동할 때마다 이 효과가 활성화되기를 원하십니까? 아니면 사용자가 마우스를 두 번 이동하는 경우 두 번째 응답을 무시해야 합니까, 아니면 효과를 두 번째 호출하기 전에 연결하고 첫 번째 호출이 완료될 때까지 기다려야 합니까? 링크에는 세 가지 설정이 있습니다.
"무시"(기본값) - 효과가 완료되기 전에 새 효과를 시작하기 위한 모든 호출을 무시합니다. "취소" - 호출된 다른 효과가 있는 경우 현재 효과를 포기하고 핸들을 돌립니다. 새로운 효과 호출 "체인" - 체인을 사용하면 "체인"과 같은 효과를 연결하고 이러한 호출을 스택한 다음 완료될 때까지 이러한 효과를 하나씩 호출할 수 있습니다. 참조 코드:
var morphObject = new Fx.Morph(morphElement, { link: 'chain' })
duration(기간) duration은 허용됩니다. 이 애니메이션의 지속 시간을 정의할 수 있습니다. 연속적인 이벤트와 속도는 동일하지 않으므로 개체가 1초에 100픽셀을 움직이기를 원한다면 초당 1000픽셀을 움직이는 개체보다 느릴 것입니다. 숫자(밀리초 단위), 값이 숫자인 변수 또는 세 가지 단축키를 입력할 수 있습니다.
var morphObject = new Fx.Morph(morphElement, { duration: 'long' }); 또는 이렇게 var morphObject = new Fx.Morph(morphElement, { duration: 1000 })
transition(전환 효과) 마지막 옵션 : 전환을 사용하면 전환 유형을 결정할 수 있습니다. 예를 들어 전환이 원활해야 하는지 아니면 천천히 시작했다가 끝까지 속도를 높여야 하는지 등이 있습니다. MooTools의 핵심 라이브러리에서 사용할 수 있는 전환 효과를 살펴보세요. 참조 코드:
참고: 첫 번째 전환 막대는 처음에는 눈길을 끄는 빨간색 효과를, 끝에서는 눈길을 끄는 주황색 효과를 트리거합니다. 아래에서 Fx 이벤트를 사용하는 방법을 확인하세요. 위의 30가지 전환 유형은 10개의 그룹으로 나눌 수 있습니다. Quad
Cubic Quart Quint Expo Circ Sine Back Bounce Elastic 각 그룹에는 세 가지 옵션이 있습니다. Ease In Ease Out Ease In Out Fx 이벤트 Fx 이벤트를 사용하면 프로세스 중에 애니메이션 효과를 실행할 수 있습니다. , 일부 코드는 다른 지점에서 실행됩니다. 이는 사용자 피드백을 생성할 때 유용할 수 있으며 그라데이션 및 변형에 대한 또 다른 제어 계층을 제공합니다. onStart - Fx가 시작될 때 실행됩니다. onCancel - Fx가 취소될 때 실행됩니다. Trigger onComplete - Fx가 완료되면 트리거됨 onChainComplete - Fx 체인이 완료되면 트리거됨 그라디언트 또는 변형을 생성할 때 하나 또는 여러 옵션을 설정하는 것처럼 이러한 이벤트 중 하나를 설정할 수 있지만 대신 값을 설정하면 기능이 설정됩니다. 참조 코드:
// 마우스가 입력되었을 때 호출하는 함수입니다 // 너비 그라데이션은 700px입니다 var enterFunction = function() { this.start('width', '700px'); } // 마우스가 떠날 때 호출하는 함수입니다. // 너비 점차적으로 300px로 돌아갑니다. var LeaveFunction = function() { this.start('width', '300px') } window.addEvent('domready', function() { // 여기서는 일부 요소를 변수에 할당합니다. varquadIn = $('quadin') varquadOut = $('quadout') varquadInOut = $('quadinout') ; // 그런 다음 위의 세 변수에 해당하는 세 개의 그래디언트 요소를 생성합니다 // quadIn = new Fx.Tween(quadIn, { link: 'cancel', transition: Fx.Transitions.Quad.easeIn, onStart: function(passes_tween_element){ passes_tween_element.highlight('#C54641') }, onComplete: function(passes_tween_element){ passes_tween_element .highlight ('#E67F0E'); } }); quadOut = new Fx.Tween(quadOut, { link: 'cancel', transition: 'quad:out ' }) quadInOut = new Fx.Tween(quadInOut, { link: 'cancel', transition: 'quad:in:out' }); // 이제 마우스 입력 및 마우스 떠나기 이벤트를 추가합니다 // .addEvents 사용에 유의하세요 // .addEvent 사용과 유사합니다. 하지만 다음을 통해 여러 이벤트를 추가할 수 있습니다. mode $('quadin').addEvents({ // 먼저 어떤 이벤트인지 지정하고 이벤트를 작은따옴표로 묶어야 합니다. // 그 뒤에 콜론(:)을 붙여야 합니다. // 마지막으로 함수 배치 // 이 예에서 함수는 그래디언트 객체에 연결됩니다. 'mouseenter': enterFunction.bind(quadIn), 'mouseleave': LeaveFunction.bind (quadIn) }) $('quadout').addEvents({ // 여기서 이 함수를 어떻게 재사용하는지 주목하세요 'mouseenter': enterFunction.bind(quadOut), ' mouseleave': LeaveFunction.bind(quadOut) }); $('quadinout').addEvents({ // 여기서도 동일한 기능을 사용합니다 // 하지만 매번 우리는 모두 다양한 요소에 이벤트를 적용하고 // 다양한 그라데이션을 바인딩합니다 'mouseenter': enterFunction.bind(quadInOut), 'mouseleave': LeaveFunction.bind(quadInOut) });
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
