cssのアニメーション

jQueryのfadeやらなにやら, アニメーションを表現するものの中には機種依存を起こす物がちらほら. そんななか, 「cssの animationを使えばなんとかなるよー」ということなのでやってみた.

cssでアニメーション

1. やりたいこと

いわゆるフェードイン/アウト. しかしjQueryの.fade系は機種依存起こすかも, だとか. なので cssの animationで, cssのプロパティの opacityを操作する. 

( ﾟдﾟ )

おわかりいただけただろうか…

2. アニメーション内容の宣言

いじるのは css. jsはあくまで addClassしてクラスを切り替えるだけ. この切り替えられたクラスに合わせて cssで表現してやると, 再利用性は格段にアップするはず.

用意するコードはいつもとはちょっと異なり, 「アニメーションの動作内容」の部分と「作ったアニメーションを使うことを宣言する」部分に分けられる. 要するにアニメーションメソッドを作って, それを呼び出す, みたいな流れ.

<div class="testface">
( ﾟдﾟ )
</div>

上の例の場合は, まずはフェードするアニメーションを作成する.

@-webkit-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

注意点としては, レンダリングエンジンごとに用意してやる必要があること. Chromeや Safariなら webkit. firefoxならmoz.
上が webkit用, 下は moz用の宣言. 中身を変えてしまうと当然動きも変わってしまうから注意. コピペ推奨.
1行目がレンダリングエンジンの設定と そのアニメーションの名前. 名前は自由に設定できるので, わかりやすい名前を付けてやろう.
2行目から4行目は, 開始の状態. この場合は 「opacity: 0;」透明度100%状態からスタート, となる.
そして5行目から7行目が終わりの状態.  「opacity: 1;」透明度0%状態となり, 完全に出現した状態となる.
この fromと toは, それぞれ 0%, 100%と書くこともでき, また 33%等, 途中の状態も設定できる.
これでアニメーションの内容は宣言できた. 割と簡単.

3. アニメーションの実行を宣言

アニメーションを作ったら, それを付与してやる. この時いろいろプロパティがあり, これがまたいろいろ悩ませてくれる. 

.testface{
    color: red;
    -webkit-animation: anime1 2s linear infinite alternate;
    -moz-animation: anime1 2s linear infinite alternate;    
}

color: red;はキニシナイ. webkit, moz用に2つ設定. 内容は同じ.
最初の anime1は 2.で設定したアニメーションの名前.  ここでどのアニメーションを使うか宣言する.
2s は「2秒」. アニメーション1周期を何秒で描画するか, を設定する.
linearはアニメーション方法の指定, この場合は fromから toまで一定の速度で変化する方法. 他にもいろいろ.
infiniteは描画回数. 単に 6など数字を入れればその回数描画してくれる. この場合は無限回の指定.
alternateはアニメーション方向. 要するに fromから toへアニメーションするか, その逆に toから fromへアニメーションするか, といった設定. alternateは「奇数回目は from→ to, 偶数回目は to→from」という特別な設定. 例にあるとおり, from→ to→ from→ toと, アニメーションの設定を行き来してくれる.
他にも, アニメーションの開始を遅らせるプロパティなども. これらをセットしたら準備OK.


ちなみに opacityをいじっていたところを marginをいじるように変更すれば, こんなものもcssだけでできる.↓

ガクガク (((( ﾟдﾟ ；)))) ブルブル

参考

ViewFlipperでページめくり ～動作編

前回からの続き. ようやくページめくりのお話.

B. コード上で動きを指定

とりあえず

ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper)

で ViewFlipperを取得.
ページを送る/戻す処理は

flipper.showNext()/flipper.showPrevious()

これだけ.
これをボタンのクリックイベントだったり画面のフリックイベントだったりに呼ぶようにしてやれば, それだけで次の/前の子ビューを表示してくれる.便利!

ただこれだけだと一瞬でページが切り替わる非常に味気ないページめくりに…
なので折角だしアニメーションを仕込んでみる.

手順は
① アニメーションの情報を仕込んだxmlを作成
② ①を基にflipperにアニメーションをセット
の2本立てでお送りします

①xmlを作成

まずはres/animを作成. 基本自動生成はされていないので自作のはず.
ここにAndroid XML File を作成します. RootElementは「translate」.
内容は,

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="-100%p"
    android:toXDelta="0%p"
    android:fromYDelta="0%p"
    android:toYDelta="0%p">
</translate>

ためしに左からページが画面に入ってくるアニメーション.

android:durationがアニメーションに書ける時間(ミリ秒)
XDelta, YDeltaはそれぞれViewの左上の座標の位置を指定. 0%pで今写っている画面の左上を指す.
fromがアニメーション開始時の位置, toがアニメーション終了時の位置を指す.
のでこのアニメーションは,
画面外ちょうど画面1枚分左から, 500ミリ秒かけて画面ぴったりに収まるように入ってくる
アニメーションとなる.
ちょっと指定を変えれば出ていく, 逆方向の動きはもちろん, 斜めからスライドイン/アウトだって指定できちゃう(ﾟ∀ﾟ)ﾗｸﾁﾝ!

これを,
1. 左から入ってくる
2. 右へ出て行く
3. 左へ出て行く
4. 右から入ってくる
の4タイプ分用意します.

②flipperにアニメーションをセット

xmlを用意できたらいざセット

Animation slideInFromLeft = AnimationUtils.loadAnimation(this, R.anim.slide_in_from_left);
Animation slideOutToRight = AnimationUtils.loadAnimation(this, R.anim.slide_out_to_right);
flipper.setInAnimation(slideInFromLeft);
flipper.setOutAnimation(slideOutToRight);

slide_in_from_leftがちょうど①に挙げたxml. 同様にAnimation を作成し, InとOutそれぞれflipperにセットしてやる.
新しいページの入り方と古いページの出方…のはず(・ω・`)
これでOK.
ただしIn, Outそれぞれアニメーションは1個ずつしか登録できないため, 上記のコード全部で右にページを送る処理ひとつ.
左にページを送る逆向きの処理を同じ flipperにセットしたい場合, 処理を呼び出すごとにセットしてやらないと, 最後にセットしたアニメーションのみ実行することになります.
なので1ページ戻るアニメーションを実現するなら,

 flipper.setInAnimation(slideInFromLeft);
 flipper.setOutAnimation(slideOutToRight);
 flipper.showPrevious();

これ全部を「戻る」ボタンあたりのonClickで呼んでやる必要がある.逆もまた然り.


これで一応アニメーションしながらページめくりはできる. できるけど…なんか違う.
やっぱりフリックでページをめくりたい！


なのでさらに続けてみます.







あともうちょっとだけ続くんじゃ('A`)