phina.jsのアドベントカレンダー2017の7日目です。
6日目の記事を読んで、自分でちゃんと実装してみたいと思いやってみました。
phina.jsでブラウザ風タッチスクロール - Qiita(6日目の記事)
クラス自体は実装してたら、結構長くなってしまったので、コードはgistにおいてあります。
phina.jsを読み込んだ後にこのURLを読み込むことで使うことができます。
https://rawgit.com/simiraaaa/8c0d6bf92cc4b0d4ddedac7ab7a7b72b/raw/039176929aec2838cc0fc7b303b8dac77512e51e/Scrollable.js
<script src="https://rawgit.com/simiraaaa/8c0d6bf92cc4b0d4ddedac7ab7a7b72b/raw/039176929aec2838cc0fc7b303b8dac77512e51e/Scrollable.js"></script>
Scrollableの使い方
スクロールできるようにするアクセサリのクラス名はScrollableです。
Accessoryを継承しています。
Element系のクラスにattachして使います。
最小サンプル
Scrollable().attachTo(this);
シーンのinit内でこの1行だけでシーンの要素全てがスクロールされるようになります。
[phina.js] 要素をスクロールできるようにするアクセサリ最小サンプル | Runstant
枠の外を描画しないようにする
enableClip()
枠の外を描画しないようにします。
enableClipサンプル
disableClip()
枠の外を描画するようにします。
friction, setFriction (摩擦)
最小0,最大1で摩擦を設定できます。
lock(), unlock()
lock()でスクロールできなくします。
unlock()でスクロールできるようになります。
最大スクロール位置の設定
minX, minY, maxX, maxY
- minX = スクロールできるx軸の最小値
- minY = スクロールできるy軸の最小値
- maxX = スクロールできるx軸の最大値
- maxY = スクロールできるy軸の最大値
setMinPosition(minX, minY)
minX, minYを設定できます
setMaxPosition(maxX, maxY)
maxX, maxYを設定できます
スクロールの方法
scrollTypeにスクロール方法を設定することができます。
デフォルトは'normal'です。
setScrollType(type)でも設定できます。
横スクロール固定
scrollTypeに'x'をセットします
縦スクロール固定
scrollTypeに'y'をセットします
縦横スクロール
scrollTypeに'normal'をセットします。
スクロールの量が大きい方だけがスクロールします。
フリック(自由スクロール)
scrollTypeに'flick'をセットします。
動かした方向に動きます。
よくある使い方
普通にありそうな感じのサンプル
ごちゃまぜサンプル
あとがき
実装してから気づいたことは、minとmaxのプラス・マイナスがイメージと逆になっているということです。
座標的には確かにyがマイナスになるほど上にスクロールしていますが、スクロールの最大値というとイメージ的には逆なので、setMaxPositionとsetMinPositionはプラスマイナス反転させたほうが良いのだろうかというのが悩みどころですね。