ショッピングカートに製品をTmallに追加するための放物線のアニメーションがあり、ユーザーに操作が成功し、ショッピングカートの場所を伝えます。ビジネスでも同様の効果が必要です。実装プロセスメモを記録し、デモを開始します。
最初は、それを行うために放物線機能を使用することを考えていませんでした、そして、私はそのような機能があることを忘れていました。パラボラは基本的に右方向と上向きの方向（上記のデモまで）の速度があり、右側の速度は均一で、上向き方向の速度が低下し、その後逆方向が増加したと思いました。要素の左と上部の値は時間とともに変化し、要素の動きの軌跡は放物線です。このアイデアは普遍的ではなく、実装は比較的複雑であるため、あきらめました。
その後、Zhang Xinxuの放物線機能の実装と愚か者のw頭の改善を参照し、突然それを実現しました。
もう一度アイデアを見ます。放物線関数y = a*x*x + b*x + c。ここで、aは0、a、b、およびcに等しくありません。 xとyは、通過する放物線の座標です。 Aは放物線の開口方向を決定し、A> 0の開口部とA <0が下向きの開口部を決定します。 Tmallの放物線の開口部が下向きであることは明らかであり、開口部のサイズも決定します。値が小さいほど、開口部が大きくなり、放物線が滑らかになり、その逆も同様です。したがって、Aの値はカスタマイズできます。これは、2つの座標を知ることに相当します（出発点とエンドポイント、つまり、要素の左と上位値）。 2つの未知の数字を見つけると、中学校の数学、バイナリ二次方程式の数学の使用方法を学ぶことができます。
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
aは既知であり、2つの既知の座標[x1、y1] [x2、y2]を置き換えると、bとcの値が生じる可能性があり、xとyの対応する関係が存在します。
放物線の開口部が上方または下向きであるかどうかにかかわらず、水平方向に移動する要素の速度は変更されていません。つまり、左値は一定の速度で変化します。放物線運動時間tを設定できます。水平方向の要素の速度はspeedx =（x2 -x1）/tです。 30ミリ秒ごとに実行されるタイマーを設定します。タイマーが実行されるたびに左値は、タイマーが実行された現在のx = speedx *です。関数y = a*x*x + b*x + cを置き換えて、最高値を取得します。このすべての計算は、起動点座標の原点への変換に基づいているため（エンドポイントもそれに応じて変換されます）、最終的に移動要素の左/最上位値を設定する場合、開始点要素の初期左/上部値を追加する必要があります。詳細については、F12のデモコードを確認してください。
メインコード：
/** * JS Parabola Animation * @Param {[Object]} Origin [Start Element] * @Param {[Object Point]}ターゲット[ターゲットポイント要素] * @Param {[Object]}要素[MOVE] * @Param {[number]}パラボラの実行が完了します] */ var parabola = function（config）{var b = 0、interval = 15、timer = null、x1、y1、x2、y2、originx、originy、diffx、diffy; this.config = config || {}; //起動点this.origin = $（this.config.origin）|| null; //エンドポイントthis.target = $（this.config.target）|| null; //動きの要素this.element = $（this.config.element）|| null; // radian this.a = this.config.a || 0.004; //移動時間（MS）this.time = this.config.time || 1000; this.init = function（）{x1 = this.origin.offset（）。左; y1 = this.origin.offset（）。top; x2 = this.target.offset（）。左; y2 = this.target.offset（）。top; Originx = x1; ORIGINY = Y1; diffx = x2-x1; diffy = y2-y1、speedx = diffx/this.time; //放物線関数y = a*x*x + b*x + cによれば、放物線の開始点は座標起点[0、0]に変換され、エンドポイントはそれに応じて変換されます。次に、放物線は原点[0、0]を通過し、C = 0を取得します。 //エンドポイントが翻訳された後、Y2 -Y1 = a*（x2 -x1）*（x2 -x1） + b*（x2 -x1）// i.e. diffy = a*diffx*diffx + b*diffx; //定数Bの値はb =（diffy -this.a*diffx*diffx）/diffx; this.element.css（{左：x1、top：y1}）これを返します。 } //アニメーションメソッドthis.movestyle = function（）{var movestyle = 'position'、testdiv = document.createelement（ 'div'）; if（ 'placeholder' in testdiv）{[''、 'ms'、 'moz'、 'webkit']。 } this.move = function（）{var start = new date（）。getTime（）、movestyle = this.movestyle（）、_this = this; Timer = setInterval（function（）{if（new date（）。gettime（） - start> _this.time）{clearinterval（timer）; _this.element.css（{left：x2、top：y2}）typeof _this.config.callback == '&& _this.config.config.callback（ = speedx*（gettime（） - start）; y = _ x*x+b*x; window.requestanimationframe（_this.element [0] .style [movestyle] = '翻訳（'+x+'px、'+y+'px）} } this.init（）; }上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。