iPhoneのUnlockの動きをTitaniumで再現（解説：前編）

ツイッターのタイムラインでiPhoneのUnlockする時の動きのパーツを探しているツイートを見たので、Titaniumで再現してみた。

ソースは、こちら。

Slider ON/OFFボタンをタップすると、下からアンロックスライダーViewが上がってくるようにする。

まず、アンロックスライダーの背景Viewとスライダーが動く溝のView、そしてスライダーボタンを含んだコンテナViewを定義する。最初は、「bottom:-100」を設定して隠しておく。

var unlockview = Ti.UI.createView({
backgroundImage:'images/sliderTrack.png',
width:'100%',
height:100,
bottom:-100,
backgroundColor:'#666'
});
sliderwin.add(unlockview);

複数のパーツを一括してアニメーションさせたい時は、コンテナViewを作っておくと良い。

そして、Slider ON/OFFボタンをタップした時のEventListenerを以下のように定義する。

startbtn.addEventListener('click', function(e){
sliderButton.animate({center:{x:(sliderView.left+sliderButton.width/2),y:(sliderButton.top+(sliderButton.height/2))}, duration:100});
if (unlockview._up == true) {
unlockview.animate({bottom:-100,duration:500});
unlockview._up = false;
} else {
unlockview.animate({bottom:0,duration:500});
unlockview._up = true;
}
});

上のソースのように、unlockview.animateを設定することで、ON/OFFボタンをタップする毎に、下からアンロックスライダーViewが上がってきたり、下に隠れたりアニメーションする。
この仕組みを応用すれば、スライド式メニューをアプリ内に組み込むこともできる。