月別: 2012年10月

Zoomboxプラグイン
サムネイル画像をクリックすると
そのページ内で動画がズームアップされて表示されるようにできる
あと、ゲームのサンプルCGとかも
これが使われるようだ
これを実装するには
jQueryUIのプラグインのひとつ
Zoomboxプラグインを使うことでできる
必要なプラグインをダウンロードして解凍
その中にあるので、必要なファイルが
zoombox.js
Zoomboxプラグインの本体
zoombox.css
Zoomboxプラグインのスタイルシート
img
Zoombox分で使える画像
あとは、これらを
scriptタグや linkタグでファイルのパスを指定すれば適用できる

タッチイベントについて
タッチイベントは、大きく分けて２つ
基本的なタッチイベント
複雑なタッチイベント
基本的なタッチイベントは
スクリーンのタッチ
スクリーンから指をはなす
スクリーン上でドラッグとか、
単純な操作のこと
複雑なタッチイベントは
長押し
フリック
ダブルタップ
など、複雑にした操作

アニメーションタグで指定可能な属性
rotateタグの属性
android:fromDegree
アニメーション開始時の画像の角度設定
android:toDegree
アニメーション終了時の画像の角度設定
android:pivotX
回転の中心となるX座標の設定
android:pivotY
回転の中心となるY座標の設定
続いて、translateタグの属性
android:fromXDelta
アニメーション開始時のX座標の設定
android:fromYDelta
アニメーション開始時のY座標の設定
android:toXDelta
アニメーション終了時のX座標の設定
android:toYDelta
アニメーション終了時のY座標の設定
fromで開始時、toで終了時と覚えると楽
次に、scaleタグ
android:fromXScale
アニメーション開始時の水平方向の要素を設定
android:fromYScale
アニメーション開始時の垂直方向の要素を設定
android:toXScale
アニメーション終了時の水平方向の要素を設定
android:toYScale
アニメーション終了時の垂直方向の要素を設定
android:pivotX
スケール変更の中心となるX座標を設定
android:pivotY
スケール変更の中心となるY座標を設定
これも
fromで開始時、toで終了時
そして
Xは水平、Yは垂直と覚えると楽
最後に、alpha属性
android:fromAlpha
アニメーション開始時の透過度を
0.0~1.0で設定
ちなみに、1.0は無透過になる
android:toAlpha
アニメーション終了時の透過度を
0.0~1.0で設定
ちなみに、alphaは透過度という意味

InterpolatorサブクラスとリソースID
AccelerateDecelerateInterpolator
リソースは
@android:anim/accelerate_decelerate_interpolator
開始は遅く、その後加速し
終了に向けて減速
AccelerateInterpolator
リソースは
@android:anim/accelerate_interpolator
開始は遅く、その後加速
加速割合は
android:factor属性で設定
デフォルトは1
AnticipateInterpolator
リソースは
@android:anim/anticipate_interpolator
開始位置から目的位置とは逆方向に
一度移動してから目的位置に移動
逆方向に移動する割合は
android:tension属性で設定
デフォルトは2
AnticipateOvershootInterpolator
リソースは
@android:anim/anticipate_overshoot_interpolator
開始位置から目的位置とは逆方向に移動してそのまま通り過ぎてから
目的位置に移動
通り過ぎる割合は
android:tensionで設定
デフォルトは2
android:tension属性の倍の割合を
android:extratension属性で設定
デフォルトは1.5
BounceInterpolator
リソースは
@android:anim/bounce_interpolator
最後にバウンド
CycleInterpolator
リソースは
@android:anim/cycle_interpolator
指定した回数繰り返す
繰り返しの回数は
android:cycle属性で設定
デフォルトは1
DecelerateInterpolator
リソースは
@android:anim/decelerate_interpolator
最初は速く、その後減速
減速の割合を
android:factor属性で設定
デフォルトは1
LinearInterpolator
リソースは
@android:anim/linear_interpolator
変化の割合は一定
OvershootInterpolator
リソースは
@android:anim/overshoot_interpolator
開始位置から目的位置まで移動し
そのまま通り過ぎてから
目的位置に移動
通り過ぎる割合を
android:tension属性で設定
デフォルトは2

アニメーションタグの共通属性
android:interpolator
アニメーションの加速と減速を設定
android:duration
アニメーションの動作時間
単位はミリ秒
android:fillAfter
trueなら
アニメーション終了後の状態を維持
android:fillBefore
trueなら
アニメーション終了後に開始時の状態を維持
android:fillEnabled
trueなら
fillAfter属性を有効にする
android:repeatCount
アニメーションの繰り返す回数
android:repeatMode
アニメーションの繰り返す動作
restartで初めから繰り返す
reverseは終わりから繰り返す
android:startOffset
アニメーション開始までの待ち時間
単位はミリ秒
android:zAdjustment
アニメーション実行中の
コンテンツのZ軸方向の設定
この中で
android:interpolator属性は
アニメーションに
加速、減速、動きの繰り返し、バウンドなどの効果をつける
　
この属性に設定できるのは
interpolatorのサブクラスを参照する
リソースID

アニメーションXMLで使用するタグ
rotate
回転アニメーション
translate
移動アニメーション
scale
拡大縮小アニメーション
alpha
透過アニメーション
set
複数のアニメーションの組み合わせ
animation-list
画像の切り替えアニメーション
このうち
animation-listタグ以外は
同じような設定、プログラムになる

アニメーションXMLを使用した描画
Androidでは、以下のアニメーションが実現可能
Rotate
画像を回転させる
Translate
画像を移動
Scale
画像の拡大縮小
Alpha
画像の透明度を変える
Animation-list
複数の画像を切り替えて表示
ちなみに、アニメーションXMLではなく
Javaでも実装できるけど
こっちのほうが楽
アニメーションXMLは
プロジェクトの
resフォルダに
animフォルダを作成し
その中に配置する

Canvasクラスのメソッド
Canvasクラスのメソッドを使うことで
点、線、円などの描画ができる
以下は代表的名もの
drawArc()
円弧を描画
drawBitmap()
ビットマップ形式の画像を描画
drawCircle()
円を描画
drawColor()
Canvasの色を指定する
drawLine()
直線を描画
drawOval()
楕円を描画
drawPath()
複数の直線で多角形を描画
drawPicture()
画像を描画
drawPoint()
点を描画
drawPosText()
float型配列posで指定した座標に沿って
テキストを描画
写真に文字を描くようなかんじ
drawRect()
四角形を描画
drawRoundRect()
角の丸い四角形を描画
drawText()
指定した座標(xとy)を基点にテキスト描画
CDのレーベルに文字をいれるようなかんじ
補足事項として
ビュークラスを定義し
レイアウト設定ファイルに直接設定する場合
コンストラクタの引数は2つになる
第1引数は、コンテキスト情報
第2引数は、レイアウト設定ファイルで設定された属性情報
が引き渡される
さらに、ビューのサイズが変更されたときに
ビューのサイズを再度正しく設定するための
onMeasure()も定義する必要がある
Canvasクラスのメソッド
Canvasクラスのメソッドを使うことで
点、線、円などの描画ができる
以下は代表的名もの
drawArc()
円弧を描画
drawBitmap()
ビットマップ形式の画像を描画
drawCircle()
円を描画
drawColor()
Canvasの色を指定する
drawLine()
直線を描画
drawOval()
楕円を描画
drawPath()
複数の直線で多角形を描画
drawPicture()
画像を描画
drawPoint()
点を描画
drawPosText()
float型配列posで指定した座標に沿って
テキストを描画
写真に文字を描くようなかんじ
drawRect()
四角形を描画
drawRoundRect()
角の丸い四角形を描画
drawText()
指定した座標(xとy)を基点にテキスト描画
CDのレーベルに文字をいれるようなかんじ
補足事項として
ビュークラスを定義し
レイアウト設定ファイルに直接設定する場合
コンストラクタの引数は2つになる
第1引数は、コンテキスト情報
第2引数は、レイアウト設定ファイルで設定された属性情報
が引き渡される
さらに、ビューのサイズが変更されたときに
ビューのサイズを再度正しく設定するための
onMeasure()も定義する必要がある

Paintクラスのメソッド
Paintクラスのメソッドは
筆の太さ、色、塗り方を設定できる
setColor()
筆の色を設定
setARGB()
筆の色をRGBと
アルファ値(透明度)で設定
setAntiAlias()
アンチエイリアスを有効にする
trueを設定すると
輪郭が滑らかに表示されて見やすくなる
setAlpha()
筆の色のアルファ値 (透明度)を設定
setStrokeWidth()
筆の太さを設定
setStyle()
図形の塗り方を設定
引数には
Paint.Style.STROKE
輪郭線のみ
Paint.Style.FILL
塗りつぶし
Paint.Style.FILL_AND_STROKE
塗りつぶして、輪郭線も描く

Canvasクラスを利用した描画
Canvasクラスを直接利用して描画する方法
何かを描画するには
キャンパス
と
筆とかの絵を描く道具
が必要
Androidだと
キャンパスが Canvasクラス
筆がPaintクラス
となる
これらを使えば
画面にタッチして絵を描いたり
手書きメモもできる