Tambahkan Animasi Menarik Pada Apl Web Anda secara PERCUMA

Animasi Lottie telah menjadi pilihan popular untuk menambahkan animasi yang kaya dan menarik pada tapak web dan apl. Ia ringan, berskala dan mudah dilaksanakan, menjadikannya penyelesaian yang sesuai untuk pereka dan pembangun. Dalam tutorial ini, kami akan meneroka apakah animasi Lottie, cara menggunakannya dan tempat untuk mendapatkannya.

Apa itu Lottie?

Lottie ialah perpustakaan yang dibangunkan oleh Airbnb yang menghasilkan animasi dalam masa nyata di web dan apl mudah alih. Ia membaca fail JSON yang dieksport daripada Adobe After Effects menggunakan pemalam Bodymovin, membolehkan animasi yang kompleks disepadukan dengan mudah tanpa menjejaskan prestasi.

Mengapa Gunakan Lottie?

• Ringan: Berbanding dengan fail video atau GIF tradisional, animasi Lottie bersaiz sangat kecil.
• Boleh Skala: Kerana ia berasaskan vektor, animasi Lottie kekal jelas dan jelas pada sebarang saiz.
• Rentas Platform: Lottie berfungsi dengan lancar merentas platform yang berbeza, termasuk web, iOS dan Android.
• Mudah Disepadukan: Dengan perpustakaan Lottie, melaksanakan animasi adalah mudah, hanya memerlukan beberapa baris kod.
• Sumber Komuniti: Lottie mempunyai komuniti yang aktif, berkongsi banyak animasi secara PERCUMA.

Bermula

LottieFiles ialah sumber utama untuk animasi Lottie. Ia menyediakan perpustakaan besar animasi PERCUMA dan premium, alatan untuk mencipta dan mengedit animasi, dan juga pemalam untuk penyepaduan mudah dengan banyak platform seperti vanilaJS, React, VueJS, IOS, Android, dll.

Lawati LottieFiles.com dan cari melalui kategori untuk mencari animasi yang sesuai dengan keperluan anda. Muat turun animasi yang anda suka dalam format JSON.

Menambahkan Animasi Lottie pada Projek Anda

1. Tambahkan elemen tempat animasi anda akan dipaparkan:

<canvas id="canvas" width="300" height="300"></canvas>

1. Sertakan perpustakaan Web Lottie dan mainkan animasi dengan JavaScript:

<script type="module">
  import {DotLottie} from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";

  new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.getElementById("canvas"),
    src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
  });
</script>

Mahu Benamkan ke dalam HTML atau Wordpress?

Itu pun boleh. Berikut ialah contoh membenamkan animasi lottie:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<lottie-player src="https://lottie.host/4c2a69ec-47c3-49ae-b296-8a4770ce5cf5/sl7OhHvAbk.json" background="#FFFFFF" speed="1" style="width: 300px; height: 300px" loop controls autoplay direction="1" mode="normal">
</lottie-player>

Di manakah penyepaduan IOS, Android, React atau Vue..?

Untuk platform lain, cari pemain loteri yang sesuai di sini.

Kesimpulan

Animasi Lottie menawarkan cara untuk meningkatkan pengalaman pengguna dengan animasi yang kaya dan berkualiti tinggi. Dengan sumber seperti LottieFiles.com, menyepadukan dan menyesuaikan animasi ini tidak pernah menjadi lebih mudah. Sama ada anda seorang pereka bentuk atau pembangun, menambahkan animasi Lottie pada kit alat anda boleh meningkatkan projek anda dan menyerlahkannya.?

Terima kasih kerana membaca. Untuk lebih banyak artikel, anda boleh melanggan surat berita kami.?

Atas ialah kandungan terperinci Tambahkan Animasi Menarik Pada Apl Web Anda secara PERCUMA. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!