2

これはロングショットだと思いますが、尋ねる価値があります。多くのモバイル アプリ (Facebook など) の左側のメニューに似たものがあり、[開く] ボタンを押すと (私の場合は CSS トランジションを使用して) スムーズに開きますが、ドラッグアウトも実装しました。画面の左からスワイプしてメニューをドラッグできる機能。このシナリオでは、JavaScript によって駆動されており、CSS トランジションが何をすべきかを知るには速すぎます (一見)。混乱したり、途切れたり、逆戻りしたりします。そのため、ユーザーがメニューをドラッグしている間は、トランジションを単純に遮断しました。これは、完全にスムーズな iOS で非常にうまく機能し、Android と Blackberry の両方が最善を尽くしていますが、もっとスムーズにできれば素晴らしいことです。

これは、開いている/閉じているメニュー状態のCSSです

#view_wrap {
    position: absolute;
    top: 0px;
    right: -100%;
    left: 100%;
    bottom: 0px;
    -webkit-transition: all .2s 0s;
    -webkit-transform: translate(-100%);
    background-color: #fff;
}

#menu.open + #view_wrap {
    -webkit-transform: translate(-3.125em);
    box-shadow: 0px 0px .3125em rgba(0,0,0,.5);
    overflow: hidden;
}

#view_wrap.animating {
    -webkit-transition: none;
}

ドラッグ機能はtranslate、それぞれの値を変更するだけですtouchmove

CSSトランジションの有無にかかわらず、このような急速な変更をよりスムーズに適用するためのトリックを知っていますか?

4

1 に答える 1

1

あなたの状況でうまくいくかどうかは完全にはわかりませんが、次と戻るボタンと指でドラッグして画像を水平にスライドさせるスライドショーがあります。

私はあなたと同様の状況にありました.ボタンを使ったスライドは3Dトランジションによって駆動され、それをサポートするデバイスでは非常にスムーズでしたが、ドラッグはプレーンな古いjavascriptだけで行われ、多くのカクつきがありました.

これよりもはるかに多くのコードがありますが、わかりやすくするために、移行に関係するビットを抽出しただけです。

ドラッグされている要素で、jquery を使用して touchstart イベントに短い期間のトランジションを追加することから始めました。100ms はうまく機能しているようです。

// inside the touchstart event
$('#my-element').on('touchstart', function(e) {
      $(this).css('transition','100ms');
});

touchmove イベントが発生している間、以前は左手の位置を計算して要素の左の位置を設定していましたが、これを 3D トランジションを適用し、ユーザーが指を動かしたときに X 座標を更新することで置き換えました。注: translate3d は、iOS デバイスでは明らかに「ハードウェア アクセラレーション」であり、「translate」はそうではないため、Y & Z を 0 に設定して 3D 変換を行う方が適切です。

// Inside the touchmove event, -10px will change as the user drags
$('#my-element').on('touchmove', function(e) {
   var newLeft = /** A calculation of the new left hand position **/
   $(this).css('transform','translate3d('+newLeft +'px,0px,0px);
});

最後に、touchend イベントで、CSS トランジションを削除し、要素の左側の位置を正しい位置に再設定しました。

// Inside the touchend event
$('#my-element').on('touchend', function(e) {
   var endLeft = /** A calculation of the new left hand position **/
   $('#sliding-element').css('transition','');
   $('#sliding-element').css('transform','');
   $('#sliding-element').css('left', endLeft /** Whatever the new left hand position is **/);
});

お役に立てれば

于 2013-07-25T10:01:11.900 に答える