11

ズームした画像のドラッグに運動量/慣性効果を追加しようとしています(この例のように、またはiOのように)、苦労しています。

私はしばらくこれに苦労していて、いくつかの役立つリソース(このようなもの)を見つけましたが、ほとんどのソリューションにはjQueryが含まれており、フレームワークを含まないプレーンなjavascriptに固執したいと思います。

私はHTML5/CSS3ズーム画像コードに取り組んでいます。ダブルタップズーム、ピンチズーム、ドラッグ、パンなどのすべての標準機能があり、すべてがCSS3の変換変換とスケーリングを組み合わせて使用​​されます。元。

transform: translate(100px, 100px);
transition: 100ms;

私は他の人がそれをどのように行っているかを見ました、そしてそれは一種のイーズイン効果を作成するために、持続時間/距離を減らしながら、左/右のプロパティの連続したアニメーションを含みます。

ある種の再帰関数を使用して、翻訳を使用して再作成しようとしました(ここにフィドルが表示されます(Webkitブラウザーで動作します)。コーディングスタイルは無視してください。ベストプラクティスではなく、単なるデモです)。この場合、アニメーションはすべて流動的ではなく、連続する翻訳は接続されません。

私は原理についてある程度基本的な理解があり、オンラインで利用可能ないくつかのアルゴリズムを調べましたが、css変換を使用してこれをどのように達成できるかを理解できません。

mousemove / touchmoveで行われるドラッグの最初の部分は、カーソル/指で画像を移動しますが、終了後の継続的な変換は...連続的ではありません。最初のアニメーションの後の別のアニメーションのようであり、自然なものとは異なります。運動量/慣性効果。

4

2 に答える 2

11

最終的には何か役立つものを見つけることができました。それはまだ進行中の作業ですが、結果は有望に見えます。

The starting point was this post made by Aryia Hidayat and in particular his Kinetic Scroll, as well as a post made by Joe Hewitt. Also, this older version of his code seemed easier to understand and grasp the basic concept, even though the most recent should be better.

Basically, instead of connecting various translations with a non-null duration and synchronize their timing and acceleration, this method uses a large number of 0-duration translations, called very often.

于 2012-08-21T13:49:23.667 に答える
2

1つの方法はanimation-timing-function:、を使用することです。これには、現在ベンダープレフィックスが必要だと思います。ease-in、、、、またはease-outを使用することを選択できます。後者は、2D空間での関数の視覚化を使用します。ジェネレーターを使用して構成する方が簡単です。私の個人的なお気に入りはCeaserです。ease-in-outcubic-bezier

于 2012-08-20T13:42:42.193 に答える