RSS Pipesの補完機能としてのRSSリーダーを、HTML5 Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。
今回は、スクロール時のバウンスに挑戦です。スクロールの端で戻るやつです。
米特許商標局、アップルのバウンススクロール特許は無効と予備的判断。対サムスンでも争点
こんなニュースになっているやつです。
さて、KineticJSにはTweenという機能があって、スムーズな動きが簡単に表現できます。ちなみに、Tweenというのは、
http://en.wikipedia.org/wiki/Inbetweening
のことのようですね。 例によって、 KineticJSのチュートリアル を見ながらやったのですが、一つはまったことがあります。
最初にどのドキュメントをみたのか定かではありませんが、今日までKineticJSのv4.4.2を使ってました。しかし、このバージョンではチュートリアル通りのコードを実行するとエラーになります。最新のv4.5.2を使ったら解決しました。
コードはこんな簡単に書けてしまいました。すごいお手軽。
layer.on('dragend', function() {
var pos = layer.getPosition();
var newY;
if (pos.y > 0) {
newY = 0;
} else if (pos.y < -layerHeight + stage.getHeight()) {
newY = -layerHeight + stage.getHeight();
} else {
return;
}
var tween = new Kinetic.Tween({
node: layer,
easing: Kinetic.Easings.StrongEaseOut,
duration: 0.3,
y: newY
});
tween.play();
});
今回も、実行結果はスクリーンショットでは見せられないので、下記からどうぞ。アニメーション系はスクリーンショットは使えませんね。動画にするのは手間がかかりすぎる気がします。
http://canvas-rss-reader.herokuapp.com/
全コードはこちらです。
https://github.com/dai-shi/canvas-rss-reader/tree/adfe56808e98da9936c690b85bd169aabca4bb13
コミットの日付を見れば分かるでしょうということで、次回からはコミット指定のURLの記載は省略します。
コメント