Akan ada animasi parabola untuk menambahkan produk ke keranjang belanja ke tmall, memberi tahu pengguna bahwa operasi berhasil dan lokasi keranjang belanja. Efek serupa diperlukan dalam bisnis. Catat memo proses implementasi dan mulai demo.
Awalnya saya tidak berpikir untuk menggunakan fungsi parabola untuk melakukannya, dan saya lupa bahwa ada fungsi seperti itu. Saya berpikir bahwa Parabola pada dasarnya memiliki kecepatan ke arah kanan dan ke atas (sejauh demo di atas), kecepatan ke kanan adalah seragam, kecepatan ke arah ke atas berkurang, dan kemudian arah sebaliknya meningkat. Nilai kiri dan atas elemen berubah seiring waktu, dan lintasan gerakan elemen adalah parabola. Gagasan ini tidak universal, dan implementasinya relatif rumit, jadi saya menyerah.
Kemudian, saya merujuk implementasi Zhang Xinxu tentang fungsi parabola dan peningkatan dermaga orang bodoh, dan tiba -tiba menyadarinya.
Saya akan melihat idenya lagi. Fungsi parabola y = a*x*x + b*x + c, di mana a tidak sama dengan 0, a, b, dan c adalah konstanta. X dan Y adalah koordinat parabola yang melewati; A menentukan arah pembukaan parabola, dengan pembukaan A> 0 ke atas dan pembukaan A <0 ke bawah. Jelas bahwa pembukaan parabola Tmall turun, dan juga menentukan ukuran pembukaan. Semakin kecil nilainya, semakin besar pembukaan, semakin halus parabola, dan sebaliknya. Oleh karena itu, nilai a dapat disesuaikan, yang setara dengan mengetahui dua koordinat (titik awal dan titik akhir duduk, yaitu, elemen kiri dan nilai atas). Menemukan dua angka yang tidak diketahui, Anda dapat belajar cara menggunakan matematika sekolah menengah pertama, persamaan kuadrat biner.
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
A diketahui, menggantikan dua koordinat yang diketahui [x1, y1] [x2, y2] dapat menghasilkan nilai B dan C, dan hubungan yang sesuai antara x dan y hadir.
Terlepas dari apakah pembukaan parabola ke atas atau ke bawah, kecepatan elemen yang bergerak ke arah horizontal tetap tidak berubah, yaitu, nilai kiri berubah pada kecepatan konstan. Anda dapat mengatur waktu gerakan parabola t. Kecepatan elemen dalam arah horizontal adalah speedx = (x2 - x1)/t. Atur timer, yang dieksekusi setiap 30 ms. Nilai kiri setelah setiap kali timer dieksekusi adalah x = speedx * timer saat ini telah dieksekusi. Ganti fungsi y = a*x*x + b*x + c untuk mendapatkan nilai teratas. Karena semua perhitungan ini didasarkan pada terjemahan titik awal koordinat ke asal (titik akhir juga diterjemahkan sesuai), ketika akhirnya mengatur nilai kiri/atas dari elemen bergerak, nilai awal/atas dari elemen titik awal harus ditambahkan. Untuk detailnya, silakan periksa kode demo di F12.
Kode utama:
/** * js parabola animasi * @param {[objek]} asal [elemen start] * @param {[objek]} target [elemen titik target] * @param {[objek]} elemen [elemen untuk pindah] * @param {angka]} waktu @parabola radian] * @param {{number] [{parabola @pumsion] [ @parabola @pumsie {{number] {number] {number] {number] {number] {number] {number] eksekusi parabola selesai] */ var parabola = fungsi (config) {var b = 0, interval = 15, timer = null, x1, y1, x2, y2, originx, originy, diffx, diffy; this.config = config || {}; // Mulai titik this.origin = $ (this.config.origin) || null; // titik akhir this.target = $ (this.config.target) || null; // elemen gerak this.element = $ (this.config.element) || null; // Curve Radian this.a = this.config.a || 0,004; // Waktu Gerakan (MS) this.Time = this.config.time || 1000; this.init = function () {x1 = this.origin.offset (). kiri; y1 = this.origin.offset (). Top; x2 = this.target.offset (). Kiri; y2 = this.target.offset (). Top; originx = x1; originy = y1; diffx = x2-x1; diffy = y2-y1, speedx = diffx/this.time; // Diketahui bahwa menurut fungsi parabola y = a*x*x + b*x + c, titik awal parabola diterjemahkan ke asal koordinat [0, 0], dan titik akhir diterjemahkan sesuai. Kemudian parabola melewati asal [0, 0] dan memperoleh c = 0; // Setelah titik akhir diterjemahkan, diperoleh: y2 -y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1) // yaitu diffy = a*diffx*diffx + b*diffx; // Nilai konstanta B dapat ditemukan b = (diffy - this.a*diffx*diffx)/diffx; this.element.css ({kiri: x1, atas: y1}) kembalikan ini; } // Tentukan metode animasi this.movestyle = function () {var movestyle = 'position', testDiv = document.createElement ('div'); if ('placeholder' di testDiv) {['', 'ms', 'moz', 'webkit']. foreach (function (pre) {var transform = pre + (pre? 't': 't') + 'ransform'; if (transform dalam testDiv.style) {movestyle = transform;}})} return moviste.style) {movestyle = transform;}})} return moviste. } 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 === 'function' & _this.config.callback === 'function' & _this.config.callback === 'function' } x = speedx*(tanggal baru (). GetTime () - start); y = _this.a*x*x+b*x; window.requestanimationFrame (_this.element [0] .style [movestyle] = 'translate ('+x+'px,'+y+'px)'); } this.init (); }Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.