By

Titaniumであのウィーンを作ってみた!!

このエントリーをはてなブックマークに追加

これがウィーンだ!!

「ウィーンってなんだ?」と思った方がほとんどだと思います.ウィーンとは,人口約176万人のオーストリアの首都…ではなくこのGIF画像です!!

set○○メソッドで実装

今回,view(背景色がグレーの部分)を移動させるためにtopプロパティを変化させています.setTopを用いるとこうなります.

ソースコードを以下に示します.

// index.js

flag = true;

$.button.addEventListener("click", function(e){
  setInterval(function(){
    if(flag){
      $.view.setTop("20%");
    } else{
      $.view.setTop("80%");
    }

    flag = !flag;
  }, 2000);
});

$.win.open();

アニメーションを実装

なぜsetTopを使ったらアニメーションがなくなってしまいましたが,アニメーションを付けるにはどうしたらいいでしょう.答えは簡単です.animateメソッドを使えばアニメーションが付いちゃいます!

// index.js

flag = true;

$.button.addEventListener("click", function(e){
  setInterval(function(){
    if(flag){
      $.view.animate({top: "20%", duration: 1000});
    } else{
      $.view.animate({top: "80%", duration: 1000});
    }

    flag = !flag;
  }, 2000);
});

$.win.open();

気をつけること

ただ,気を付けないとレイアウトが崩れてしまいます. bottomを0にして,heightを可変にすると…

こんな感じに背景がつぶれてしまいます. 背景が単色等でない限り,heightを可変にするのではなく,top等を変化させましょう.

綺麗にウィーンできました.

さあ,皆さんもLet’s ウィーン.