yaTouchSlider-タッチデバイス用のスライダー

タッチデバイスで知られている多くのモバイルサイトでは、スワイプジェスチャーの後、人が指を離した後にアニメーションが発生するようにスライダー（リーフレット）が配置されています。 これは、iOSデバイスのメイン画面などのネイティブスライダーほど美しくも便利でもありません。



スライダーをネイティブスライダーのように見えるようにするjQueryプラグインを作成し、興味のあるすべての人と共有したいと思います。 プラグインの動作は、たとえば、iPhoneやiPod Touchの新しい検索結果ページの天気や写真で確認できます 。



通常のCSS3 Transformとは異なり、「3D」はiOSでハードウェアGPUアクセラレーションを使用します。 これにより、非常にスムーズで楽しいアニメーションを実現できます。 アニメーション自体のハードウェアアクセラレーションのトピックは非常に広範囲であり、将来、このトピックに関する別の記事があります。



スライダーをネイティブに感じるために、多くの詳細を考慮しました。

• スワイプジェスチャが長い場合、すぐに数ポイントになると、スライダーはこれを理解します。
• 指定したしきい値（デフォルトでは30ピクセル）を超えないで1ステップ未満スワイプすると、スライダーは「跳ね返り」ます。
• また、左または右の制限を超えてスワイプしようとすると、スライダーが跳ね返ります。

ジェスチャー依存

スライダーがより活発に動作し、ジェスチャーからの期待に応えるために、加速を理解するように彼に教えました。 次の式で計算されます（その条件と値は実験的に選択されました）。



accel = speed > 0.3 && speed < 0.6 ? 2 :

speed >= 0.6 && speed < 1 ? 3 :

speed >= 1 ? 4 :

1;







ここで、速度とは、スワイプジェスチャーの開始から終了までの距離をその時間で割ったものです（学校の知識「v = s / t」が最終的に役立ちました:)



平均的なスワイプジェスチャは、ミリ秒あたり約0.4〜0.6ピクセルです。 CSSトランジションのアニメーション時間には、非常に小さいながらも顕著な変動があります。



animationTime = accel >= 3 ? '0.3' : '0.2';







その後、ステップに加速度の値が乗算され、アニメーションが発生します。

外部API

スライダーをブロックにアタッチするとき、コールバック関数を指定できます。 必要なすべてのデータ（速度、ステップ、制限、時間など）の転送セットでスワイプするたびに呼び出されます。 指を使用せずにスライダーを移動し、スライダーブロックでslideLeft([])



またはslideRight([])



イベントをトリガーすることもできます。

「GitHubでフォークしてください」

Githubのプロジェクトリポジトリでコメント付きのプラグインコードを表示またはダウンロードできます。



PS： Yandexインターフェース開発者の公式ブログに興味のあるすべての人を招待します 。