Ext 애니메이션

Ext 사전 설정된 11개의 애니메이션 기능
　　1.slideIn/slideOut:
원소의 미끄럼 또는 미끄럼 효과.기본 슬라이드 인은 맨 위에서 미끄러지고 슬라이드 아웃은 맨 아래에서 미끄러집니다. 첫 번째 파라미터를 수정하여 미끄러지거나 미끄러지는 위치를 설정할 수 있습니다.그 사용 방법은 아래 코드를 보십시오.

　　var el = Ext.get('elId'); //  
　　el.slideIn(); //  
　　el.slideOut(); //  
　　el.slideIn('l',{ easing: 'easeOut', duration: .5 }); 

　　
2.puff: 원소가 천천히 사방으로 확대되고 사라진다.효과가 완성되면 원소는 숨겨지지만 (visibility 속성은hidden) 원소가 원래 차지하는 위치는 계속 존재합니다.요소를 삭제하려면remove 속성을true로 설정하십시오.그 사용 방법은 아래 코드를 보십시오.
　　

var el = Ext.get('elId'); //  
　　el.puff(); 
　　// ，  
　　el.puff({ easing: 'easeOut', duration: .5, remove: true, useDisplay: false }) 

　　
3. switchOff: 원소가 깜박이고 중심으로 접는다(텔레비전을 끄는 것과 유사).효과가 완성되면 원소는 숨겨지지만 (visibility 속성은hidden) 원소가 원래 차지하는 위치는 계속 존재합니다.요소를 삭제하려면remove 속성을true로 설정하십시오.그 사용 방법은 아래 코드를 보십시오.
　　

var el = Ext.get('elId'); //  
　　el.switchOff(); 
　　// ，  
　　el.switchOff({ easing: 'easeOut', duration: .5, remove: true, useDisplay: false }); 

　　
4.highlight: 설정된 색상을 사용하여 요소를 강조 표시한 다음 원래 색상으로 점차 감춥니다.기본값은 요소 배경색을 설정하는 것입니다.attr 속성을 설정하여 강조 표시 방식을 설정할 수 있습니다.초기 색상이 없으면 endColor 속성을 사용하여 억제된 색상을 설정할 수 있습니다.그 사용 방법은 아래 코드를 보십시오.
　　

var el = Ext.get('elId'); //  
　　el.highlight(); 
　　//  
　　el.highlight('0f0f0f',{ easing: 'easeOut', attr: 'color' duration: .5, endColor: 'dddddd' }); 

5.frame: 요소 경계부터 물결 확산 방식으로 사용자에게 알립니다.그 사용 방법은 아래 코드를 보십시오.
　　

var el = Ext.get('elId'); //  
　　el.frame(); 
　　//  
　　el.frame('0f0f0f',{ duration: .5, }); 

　　
6.pause: 대기열의 애니메이션이 시작되기 전에 정지합니다.그 사용 방법은 아래 코드를 보십시오.
　　

el.pause(1); // 1  

　　
7.fadeIn/fadeout: 그라데이션 효과를 실현합니다.fadeIn 메서드는 투명에서 불투명으로 그라데이션됩니다.fadeOut 방법은 투명하지 않고 점차적으로 투명해진다.endOpacity 속성을 통해 그래디언트가 끝난 후의 불투명도를 설정할 수 있습니다.IE에서 useDisplay 속성을true로 설정할 수 있습니다.그 사용 방법은 아래 코드를 보십시오.
　　

var el = Ext.get('elId'); 
　　el.fadeIn(); 
　　el.fadeOut(); 
　　//  
　　el.fadeIn({ endpacity: 1, easing: 'easeOut', duration: .5 }); 

　　
8.scale: 요소의 치수를 기존 치수에서 설정된 치수로 변환합니다.그 사용 방법은 아래 코드를 보십시오.
　　

var el = Ext.get('elId'); 
　　el.scale(100，200);
　　//  
　　el.fadeIn(100，200，{ easing: 'easeOut', duration: .5 }); 

　　
9.shift: 요소가 새로운 위치, 새로운 사이즈, 불투명도로 점차적으로 변한다.이 방법은 최소한 위치, 사이즈, 불투명도 중 하나를 설정해야 한다. 그렇지 않으면 요소가 바뀌지 않는다.그 사용 방법은 아래 코드를 보십시오.
　

　var el = Ext.get('elId'); 
　　el.shift({ width:100, //  
　　height: 100, //  
　　x: 10 , // x  
　　y: 10 , // y  
　　opacity: .8， //  
　　easing: 'easeOut', duration: .5 }); // width、height、x、y、opacity  

　　
10.ghost: 원소가 점점 어두워질 때 원소가 동시에 미끄러진다.첫 번째 매개변수를 사용하여 슬라이드 아웃 위치를 설정할 수 있습니다.그 사용 방법은 아래 코드를 보십시오.
　　

var el = Ext.get('elId'); 
　　el.ghost(); 
　　// ，  
　　el.ghost('l'，{ easing: 'easeOut', duration: .5, remove:false, userDisplay:fase }); 

　　
11. animate: 이 방법을 통해 복잡한 애니메이션 효과를 사용자 정의할 수 있습니다.그 사용 방법은 아래 코드를 보십시오.
　　

var el = Ext.get('elId'); 
　　el.animate( { borderWith:{to : 3,from:0}, 
　　opacity: {to: .5, from:1} 
　　height: {to 100 , from:el.getHeight()}, 
　　widht: {to 200 , from:el.getwidth()}, 
　　top:{by:-100,unit: 'px'} }, 
　　1,// ， ，  
　　null, // ，  
　　'easeOut',// ，  
　　'run' //  ); 

정의에서borderWidth,opactiy 등 속성은 요소의 모든 스타일 속성이 될 수 있습니다.애니메이션 유형은 다음과 같습니다.
run: 기본 형식입니다.
color: 그래디언트 배경, 텍스트 또는 경계 색상을 애니메이션합니다.
motion: 그라데이션 동안 동작 궤적으로 베지어 커브를 사용합니다.
scroll: 수직 또는 수평 스크롤 방식으로 동작합니다.