フリック距離からスピード等を計算してスライダーを作っています。
slideX1 に座標を入れて基本的な動きは問題ないのですが
lang
1$('#slider').css({'transform':'translate3d('+slideX1+'px, 0,0)'});
lang
1animation-timing-function:ease-out
求められるのがAmazonのスマホ版の様な止まり方で ease-out とかで指定するよりも緩急が多く
停止後にまた余韻の様なアニメーションを追加しても「かっくん」と言った感じで不自然になります。
Keyflame で %毎に移動距離を指定しても やはり境目が不自然になります。
setTimeout で終了を見計らって アニメーションを繋げても 不自然なパターンが出ます。
現在 setInterval で監視をして 指定座標を超えたらアニメーションを差し替える と言う感じのことをしていますが、こちらも $('#slider').css({'transform':'none'}); のタイミングで不自然になります。
lang
1 if( $('#slider').position().left <= slideX2 ){ 2 if( ivf == 0 ){ 3 4 $('#slider').css({'transform':'none'}); 5 6 7 8 $('#slider').css({ 9 'transition-duration':'900ms', 10 'animation-timing-function':'cubic-bezier(0.6, 0.9, 0.1, 0.9) ' 11 // 'animation-timing-function':'linear' 12 13 }); 14 15 16 17 setTimeout(function(){ 18 $('#slider').css({'transform':'translate3d('+slideX1+'px, 0,0)'}); 19 $('#vartest').html("★>>"+$('#slider').position().left+"<br>siv1:"+ivf+"/X2:"+slideX2+"/X1:"+slideX1); 20 21 ivf = 1; 22 23 24 25 },1); 26 } 27 }
停止後の余韻を追加したいのですが、根本的な考え方が違うのか、何か良い方法は無いでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/10 08:36
2015/04/10 08:38