하이브리드 앱 센차터치 2.0 - 슬라이드 애니메이션

1. 개요

이미지 레이아웃을 카드형태 처럼 겹쳐보이게 구성하고, 각 패널과 연관된 버튼을 클릭해서 슬라이드 형태의 애니메이션을 구현 할 수 있다.

 

2. 구현

Ext.Loader.setConfig({ enabled: true });

Ext.require("Ext.Panel");

Ext..application({

name:"MyAnimation",

launch: function(){

var pContainer = Ext.create("Ext.Panel",{

fullScreen: true,

layout: { type: "card" },

items: [

// 툴바 버튼

{

xtype: "toolbar",

docked: "top",

defaults: {

handler : functoin(){

var num = parseInt( this.getData(), 10);

if(isNaN(num)){

num = 0;

}

// 이미지 슬라이드 구현

p.animateActiveItem( num, {

type: "slide",

direction: this.getText(),

duration: 500

});

}

},//defaults

items:[

{ xtype: "button", text: "up", data: 0 },

{ xtype: "button", text: "down", data: 1 },

{ xtype: "button", text: "right", data: 2 },

{ xtype: "button", text: "left", data: 3 }

]

},

// 이미지 리스트

{

html: "첫번째 페이지",

style: "background-image:url('bgimg/bg1.jpg')",

cls: "card1"

},

{

html: "두번째 페이지",

style: "background-image:url('bgimg/bg2.jpg')",

cls: "card1"

},

{

html: "세번째 페이지",

style: "background-image:url('bgimg/bg3.jpg')",

cls: "card1"

},

{

html: "네번째 페이지",

style: "background-image:url('bgimg/bg4.jpg')",

cls: "card1"

}

]

});

Ext.Viewport.add( pContainer );

}

});