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が上がってきたり、下に隠れたりアニメーションする。
この仕組みを応用すれば、スライド式メニューをアプリ内に組み込むこともできる。