ズームした画像のドラッグに運動量/慣性効果を追加しようとしています(この例のように、またはiOのように)、苦労しています。
私はしばらくこれに苦労していて、いくつかの役立つリソース(このようなもの)を見つけましたが、ほとんどのソリューションにはjQueryが含まれており、フレームワークを含まないプレーンなjavascriptに固執したいと思います。
私はHTML5/CSS3ズーム画像コードに取り組んでいます。ダブルタップズーム、ピンチズーム、ドラッグ、パンなどのすべての標準機能があり、すべてがCSS3の変換変換とスケーリングを組み合わせて使用されます。元。
transform: translate(100px, 100px);
transition: 100ms;
私は他の人がそれをどのように行っているかを見ました、そしてそれは一種のイーズイン効果を作成するために、持続時間/距離を減らしながら、左/右のプロパティの連続したアニメーションを含みます。
ある種の再帰関数を使用して、翻訳を使用して再作成しようとしました(ここにフィドルが表示されます(Webkitブラウザーで動作します)。コーディングスタイルは無視してください。ベストプラクティスではなく、単なるデモです)。この場合、アニメーションはすべて流動的ではなく、連続する翻訳は接続されません。
私は原理についてある程度基本的な理解があり、オンラインで利用可能ないくつかのアルゴリズムを調べましたが、css変換を使用してこれをどのように達成できるかを理解できません。
mousemove / touchmoveで行われるドラッグの最初の部分は、カーソル/指で画像を移動しますが、終了後の継続的な変換は...連続的ではありません。最初のアニメーションの後の別のアニメーションのようであり、自然なものとは異なります。運動量/慣性効果。