ListView 의 이미지에 카드를 뒤집는 Flip Animation 에 샘플입니다.
어떤 widget은 iOS에서 되고 안드로이드에서는 안되길래 만들어 봤습니다.
최근 FoodGawker 라는 앱을 타이타늄으로 개발하면서 시도했었는데요.
개발자 분들에게 도움이 되었으면 좋겠습니다.
//index.xml
<Alloy>
<Window class="container">
<ListView id="listView">
<Templates>
<ItemTemplate name="template" width="Ti.UI.FILL" height="70dp">
<ImageView class="img" bindId="img" onDoubletap="animation" />
</ItemTemplate>
</Templates>
<ListSection id="section"/>
</ListView>
</Window>
</Alloy>
//index.js
var data = [];
for (var x = 0; x < 20; x++) {
data.push({
template : "template",
img : {
image : "/images/testImage.png"
}
});
}
$.section.setItems(data);
//더블탭 이벤트
function animation(e) {
e.source.animate(Ti.UI.createAnimation({
duration : 250,
transform: Ti.UI.create2DMatrix().scale(0.005, 1)
}));
setTimeout(function(){
e.source.animate(Ti.UI.createAnimation({
duration : 250,
transform: Ti.UI.create2DMatrix().scale(1, 1),
}));
}, 250);
}
$.index.open();