Flip Animation Example (iOS, Android)

[heedoo (문희두)]

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();