Cara menggunakan javascript get value path

Question

Ada banyak pustaka animasi JavaScript di luar sana, tetapi Anime. js adalah salah satu yang terbaik. Mudah digunakan, memiliki API kecil dan sederhana, dan menawarkan semua yang Anda inginkan dari mesin animasi modern. Pustaka memiliki ukuran file kecil dan mendukung semua browser modern, termasuk IE/Edge 11+

Table of Contents Show

Memulai Dengan Anime. js
Membuat Animasi Pendulum
Membuat Animasi Pengisian Daya Baterai
Meningkatkan Animasi Pengisian Baterai
Membuat Animasi Lebih Kompleks Dengan Keyframes
Membuat Efek Teks
Membuat Animasi dengan Garis Waktu
Bagikan artikel ini

Satu-satunya hal yang dapat menghentikan Anda menggunakan Anime. js segera adalah dokumentasinya yang minimal seperti zen. Saya suka pendekatan yang ringkas, terstruktur, dan elegan, tetapi menurut saya penjelasan yang lebih mendetail akan sangat membantu. Saya akan mencoba untuk memperbaiki masalah ini dalam tutorial ini

Memulai Dengan Anime. js

Untuk memulai, unduh dan sertakan file

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

1 di halaman HTML Anda

<script src="path/to/anime.min.js"></script>

_

Sebagai alternatif, Anda dapat menggunakan versi terbaru pustaka yang dihosting di CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

Sekarang, untuk membuat animasi, kami menggunakan fungsi

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

2, yang menggunakan objek sebagai argumen. Di objek itu, kami menjelaskan semua detail animasi

let myAnimation = anime({
  /* describe the animation details */
});

_

Ada beberapa macam properti yang digunakan untuk mendeskripsikan animasi. Mereka dikelompokkan ke dalam empat kategori berbeda

Target – ini termasuk referensi ke elemen yang ingin kita animasikan. Itu bisa berupa pemilih CSS (

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

_3,

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

4,

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

5), simpul DOM atau daftar simpul, atau objek JavaScript biasa. Ada juga opsi untuk menggunakan campuran di atas dalam sebuah array

Properti – ini mencakup semua properti dan atribut yang dapat dianimasikan saat berhadapan dengan CSS, objek JavaScript, DOM, dan SVG

Parameter Properti – ini termasuk parameter terkait properti seperti

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

6,

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

7,

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

8, dll

Parameter Animasi – ini termasuk parameter terkait animasi seperti

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

9,

let myAnimation = anime({
  /* describe the animation details */
});

0, dll

Sekarang mari kita lihat bagaimana penerapannya dalam praktik. Perhatikan contoh berikut

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

Lihat Pena
AnimeJS. Contoh Dasar oleh SitePoint (@SitePoint)
di CodePen

Catatan. Saya tidak akan membahas bagian kode HTML dan CSS di tutorial. Ini cenderung mudah dipahami tanpa penjelasan tambahan. Anda dapat menemukan dan menjelajahi HTML dan CSS di pena tersemat yang mengikuti setiap contoh

Dalam contoh di atas

Kami memilih kotak hijau (gaya

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

3)

Kami memindahkannya 100 piksel ke kiri sambil mengubahnya menjadi lingkaran
Kami menyetel semua ini agar terjadi dengan mulus dalam dua detik (
```
let myAnimation = anime({
  /* describe the animation details */
});
```
2 artinya tidak ada easing yang akan diterapkan pada animasi)
Dengan menyetel properti arah ke
```
let myAnimation = anime({
  /* describe the animation details */
});
```
3, kami menginstruksikan elemen
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
```
3 untuk kembali ke posisi dan bentuk awal setelah animasi selesai. Anime. js melakukannya dengan memutar animasi dalam urutan terbalik

Anda mungkin memperhatikan bahwa saya tidak menggunakan unit apa pun saat menentukan nilai properti. Itu karena jika nilai aslinya memiliki satuan, maka secara otomatis ditambahkan ke nilai animasi. Jadi, kita dapat menghilangkan unit dengan aman. Namun jika kita ingin menggunakan satuan tertentu kita harus sengaja menambahkannya

Mari ciptakan sesuatu yang lebih bermakna

Membuat Animasi Pendulum

Dalam contoh ini, kita akan membuat animasi pendulum. Setelah kita "menggambar" pendulum menggunakan keterampilan HTML dan CSS kita, saatnya untuk menghidupkannya

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

Lihat Pena
AnimeJS. Animasi Pendulum oleh SitePoint (@SitePoint)
di CodePen

Dalam animasi ini, kami menggunakan apa yang disebut tipe nilai dari-ke, yang menentukan rentang gerakan untuk animasi. Dalam kasus kami, batang pendulum diputar dari

let myAnimation = anime({
  /* describe the animation details */
});

5 ke

let myAnimation = anime({
  /* describe the animation details */
});

6 derajat. Kami juga menggunakan

let myAnimation = anime({
  /* describe the animation details */
});

_7 easing untuk mensimulasikan gerakan alami pendulum yang melambat di puncak dan semakin cepat di bawah. Kami menggunakan opsi

let myAnimation = anime({
  /* describe the animation details */
});

_3 lagi untuk memindahkan pendulum di kedua arah dan mengatur parameter

let myAnimation = anime({
  /* describe the animation details */
});

0 ke

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

0 untuk mengulangi gerakan tanpa henti

Bagus sekali. Mari beralih ke contoh berikutnya

Membuat Animasi Pengisian Daya Baterai

Dalam contoh ini, kami ingin membuat ikon animasi pengisian baterai, mirip dengan ikon di ponsel cerdas kami. Ini mudah dilakukan dengan sedikit HTML dan CSS. Berikut adalah kode untuk animasi

let animation = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: function(el, i, l) {
    return i * 500;
  },
  endDelay: 500,
  easing: 'linear',
  loop: true
});

Lihat Pena
AnimeJS. Pengisian Baterai Animasi oleh SitePoint (@SitePoint)
di CodePen

Di sini kita memiliki tiga segmen (elemen

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

3 hijau) yang meluas (dengan meningkatkan properti

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

2) satu demi satu. Untuk mencapai efek ini, kita perlu menggunakan penundaan yang berbeda untuk masing-masingnya. Hanya ada satu parameter delay yang bisa kita gunakan untuk animasi, jadi dalam situasi ini, kita akan menggunakan parameter berbasis fungsi yang menghasilkan nilai berbeda untuk setiap target.

Untuk melakukannya, alih-alih nilai literal, kami menyediakan fungsi dengan tiga argumen (

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

3,

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

4, dan

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

5). Dalam kasus kami, fungsi mengembalikan indeks dikalikan dengan 500 milidetik, yang menyebabkan setiap elemen mulai bergerak setengah detik setelah yang sebelumnya

Kami juga menggunakan parameter

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

_6 untuk menjeda sejenak sebelum animasi dimulai lagi

Meningkatkan Animasi Pengisian Baterai

Sekarang, animasinya terlihat bagus, tapi mari kita tingkatkan sedikit dengan menambahkan label progres yang menunjukkan persentase biaya. Ini kodenya

let progress = document.querySelector('#progress');

let battery = {
  progress: '0%'
}

let icon = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: anime.stagger(500),
  endDelay: 500,
  easing: 'linear', 
  loop: true
});    

let label = anime({
  targets: battery,
  progress: '100%',
  duration: 30000,
  easing: 'linear',
  round: 1, 
  update: function() {
    progress.innerHTML = battery.progress
  },
  complete: function() {
    icon.pause();
    icon.seek(icon.duration);
  }  
});

Lihat Pena
AnimeJS. Peningkatan Animasi Pengisian Baterai oleh SitePoint (@SitePoint)
di CodePen

Contoh ini memperkenalkan beberapa fitur pustaka lainnya. Kita akan menjelajahinya satu per satu

Pertama, kita membuat variabel

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

7, yang mereferensikan label dalam HTML. Kemudian kita membuat objek

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

_8 yang menyimpan properti

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

7. Kemudian, kami membuat dua animasi

Animasi pertama hampir identik dengan contoh sebelumnya, kecuali untuk parameter

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

7. Di sini kita akan menggunakan Anime. js yang memungkinkan kita menganimasikan banyak elemen sekaligus. Kami menggunakan fungsi

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

_1 untuk ini. Dalam kasus kita,

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

2 berfungsi seperti parameter berbasis fungsi — ini menambahkan penundaan 50 milidetik sebelum setiap animasi elemen

Pada animasi kedua, kita menggunakan objek ________13______8 sebagai target. Kemudian kami mengatur properti

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

_7 untuk dianimasikan menjadi 100%. Parameter

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

_5 membulatkan nilai animasi ke atas desimal yang diberikan. Dengan menyetelnya ke 1, kita mendapatkan bilangan bulat

Selanjutnya, kami menggunakan dua callback yaitu Anime. penawaran js

Untuk mengikat nilai label kemajuan dari HTML dengan nilai kemajuan

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

8, kami menggunakan panggilan balik

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

7. Kami juga menggunakan callback

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

8 untuk menghentikan animasi setelah progres sama dengan 100%, dan kami menggunakan metode

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

9 untuk menyetel animasi ke keadaan selesai

Akibatnya, animasi pengisian daya akan diputar hingga progres menjadi 100%, lalu akan berhenti dan memaksa segmen ke status animasi akhir. Ikon akan muncul sebagai terisi penuh

Membuat Animasi Lebih Kompleks Dengan Keyframes

Hingga saat ini, kita telah berurusan dengan animasi satu langkah yang memindahkan objek dari A ke B. Tapi bagaimana dengan memindahkannya dari A ke B ke C ke D?

Dalam contoh berikutnya, kita akan mempelajari cara menggunakan keyframe properti untuk membuat animasi multi-langkah. Kami akan memindahkan kotak sederhana di sekitar yang lain yang berfungsi sebagai kotak

let box = document.querySelector('#box');

let animation = anime({
  targets: '#content',   
  translateY: [
    {value: 50, duration: 500},
    {value: 0, duration: 500, delay: 1500},  
    {value: -53, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 2500},
    {value: 50, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 1500}  
  ],
  translateX: [
    {value: 53, duration: 500, delay: 1000},
    {value: 0, duration: 500, delay: 2500},
    {value: -53, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 2500} 
  ],
  easing: 'linear',   
  begin: function() { 
    box.style.borderBottom="none";  
  },
  complete: function() {
    box.style.borderBottom="solid darkorange 3px";     
  }
});

Lihat Pena
AnimeJS. Animasi Kotak Dengan Bingkai Utama oleh SitePoint (@SitePoint)
di CodePen

Pertama, kami membuat referensi ke elemen kotak. Kami menggunakannya dalam panggilan balik

let animation = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: function(el, i, l) {
    return i * 500;
  },
  endDelay: 500,
  easing: 'linear',
  loop: true
});

0 dan

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

8 untuk "membuka" kotak pada awal animasi dan "menutup" pada akhir animasi. Mari jelajahi bagaimana kita memindahkan kotak lainnya — kontennya

Untuk setiap properti yang ingin kita animasikan, kita menggunakan larik objek di mana setiap objek menjelaskan keyframe tertentu

Dalam kasus kami, kami ingin memindahkan kotak secara vertikal dan horizontal. Jadi kami menggunakan properti

let animation = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: function(el, i, l) {
    return i * 500;
  },
  endDelay: 500,
  easing: 'linear',
  loop: true
});

2 dan

let animation = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: function(el, i, l) {
    return i * 500;
  },
  endDelay: 500,
  easing: 'linear',
  loop: true
});

3 dan kami menyediakan array keyframes untuk masing-masingnya. Trik untuk membuat gerakan yang tepat adalah dengan menghitung parameter

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

6 dan

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

7 dengan benar — yang bisa rumit

Frame dieksekusi dari atas ke bawah dan dimulai secara bersamaan untuk setiap properti yang memiliki array keyframe tertentu. Setelah dimulai, bagaimana perjalanan akan dilanjutkan tergantung sepenuhnya pada cara parameter

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

6 dan

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

7 ditetapkan. Selamat menghitung

Hasil dari animasi kita adalah kotak keluar dari kotak, membuat orbit penuh di sekelilingnya, lalu masuk ke dalam lagi

Membuat Efek Teks

Kami telah melihat contoh mengejutkan di atas, dan sekarang kami akan mengeksplorasi penggunaan lebih lanjut. Kami akan menggunakan mengejutkan untuk membuat efek teks yang keren

let animation = anime({
  targets: '.letter',
  opacity: 1,
  translateY: 50, 
  rotate: {
    value: 360,
    duration: 2000,
    easing: 'easeInExpo'
  }, 
  scale: anime.stagger([0.7, 1], {from: 'center'}), 
  delay: anime.stagger(100, {start: 1000}), 
  translateX: [-10, 30]
});

Lihat Pena
AnimeJS. Animasi Efek Teks oleh SitePoint (@SitePoint)
di CodePen

Kami telah menempatkan setiap huruf di dalam elemen

let animation = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: function(el, i, l) {
    return i * 500;
  },
  endDelay: 500,
  easing: 'linear',
  loop: true
});

8. Dalam kode animasi, kami memilih semua huruf, membuatnya terlihat, dan memindahkannya 50 piksel ke bawah

Kemudian, kami memutar huruf dengan menggunakan parameter properti tertentu yang menentukan parameter tertentu untuk properti tertentu. Ini memberi kita kontrol yang lebih rinci atas animasi. Di sini, huruf akan diputar 360 derajat dalam dua detik dengan menerapkan

let animation = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: function(el, i, l) {
    return i * 500;
  },
  endDelay: 500,
  easing: 'linear',
  loop: true
});

9 easing

Dalam dua properti berikutnya, kami menggunakan fungsi

let progress = document.querySelector('#progress');

let battery = {
  progress: '0%'
}

let icon = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: anime.stagger(500),
  endDelay: 500,
  easing: 'linear', 
  loop: true
});    

let label = anime({
  targets: battery,
  progress: '100%',
  duration: 30000,
  easing: 'linear',
  round: 1, 
  update: function() {
    progress.innerHTML = battery.progress
  },
  complete: function() {
    icon.pause();
    icon.seek(icon.duration);
  }  
});

0. Kami mengatur skala untuk didistribusikan secara merata dari 0. Opasitas 7 hingga 1 (menggunakan tipe nilai rentang), mulai dari tengah (menggunakan opsi posisi awal). Ini membuat huruf lebih kecil di tengah kalimat dan lebih besar di kedua ujungnya

Kami mengatur animasi untuk menunggu satu detik sebelum dimulai (dengan menentukan nilai awal), dan kemudian penundaan 100 milidetik ditambahkan secara relatif untuk setiap huruf

Kami sengaja menambahkan properti

let animation = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: function(el, i, l) {
    return i * 500;
  },
  endDelay: 500,
  easing: 'linear',
  loop: true
});

3 di bagian akhir untuk menciptakan efek yang diinginkan, yaitu memutar huruf dalam gerakan spiral

Membuat Animasi dengan Garis Waktu

Garis waktu memungkinkan Anda memanipulasi beberapa animasi secara bersamaan. Mari kita jelajahi contoh sederhana

let animation = anime.timeline({
  duration: 1000, 
  easing: 'easeInOutSine',
  direction: 'alternate',  
  loop: true
});           

animation.add({
  targets: '.one',
  translateY: -50,
  backgroundColor: 'rgb(255, 0, 0)'
}).add({
  targets: '.two',
  translateY: -50,
  backgroundColor: 'rgb(0, 255, 0)'
}).add({
  targets: '.three',
  translateY: -50,
  backgroundColor: 'rgb(0, 0, 255)'
});

Lihat Pena
AnimeJS. Animasi Timeline Balls Spinner oleh SitePoint (@SitePoint)
di CodePen

Dalam contoh ini, kami membuat pemintal bola

Untuk membuat garis waktu, kami menggunakan fungsi ________32______2. Kemudian kami menentukan parameter umum yang diwariskan untuk semua animasi yang ditambahkan

Untuk menambahkan animasi ke garis waktu, kami menggunakan metode

let progress = document.querySelector('#progress');

let battery = {
  progress: '0%'
}

let icon = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: anime.stagger(500),
  endDelay: 500,
  easing: 'linear', 
  loop: true
});    

let label = anime({
  targets: battery,
  progress: '100%',
  duration: 30000,
  easing: 'linear',
  round: 1, 
  update: function() {
    progress.innerHTML = battery.progress
  },
  complete: function() {
    icon.pause();
    icon.seek(icon.duration);
  }  
});

3, lalu kami mendeskripsikan animasi dengan cara yang sama seperti yang telah kami bahas

Dalam contoh kami, kami menambahkan tiga animasi, satu untuk setiap bola. Hasilnya adalah setiap bola naik dan turun satu per satu

Masalahnya, dalam bentuk dasar ini, animasi terkesan sangat statis. Mari kita ubah itu

Secara default, setiap animasi dimulai setelah animasi sebelumnya berakhir. Tapi kita bisa mengontrol perilaku ini dengan menggunakan time offset. Selain itu, jika kita ingin membuat animasi lebih fleksibel dan kompleks, kita harus menggunakan keyframe animasi. Mari kita lihat bagaimana penerapannya dalam contoh berikut

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

0

Lihat Pena
AnimeJS. Peningkatan Animasi Garis Waktu Pemintal Bola oleh SitePoint (@SitePoint)
di CodePen

Di sini, kami menghapus parameter

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

_9, karena kami menggunakan keyframe untuk mencapai gerakan bolak-balik. Kami mendefinisikan keyframe animasi dengan menambahkan parameter

let progress = document.querySelector('#progress');

let battery = {
  progress: '0%'
}

let icon = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: anime.stagger(500),
  endDelay: 500,
  easing: 'linear', 
  loop: true
});    

let label = anime({
  targets: battery,
  progress: '100%',
  duration: 30000,
  easing: 'linear',
  round: 1, 
  update: function() {
    progress.innerHTML = battery.progress
  },
  complete: function() {
    icon.pause();
    icon.seek(icon.duration);
  }  
});

5. Seperti keyframe properti, setiap objek dari array adalah keyframe

Untuk membuat bola bergerak mulus, kami menggunakan waktu offset yang ditentukan sebagai parameter kedua untuk fungsi

let progress = document.querySelector('#progress');

let battery = {
  progress: '0%'
}

let icon = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: anime.stagger(500),
  endDelay: 500,
  easing: 'linear', 
  loop: true
});    

let label = anime({
  targets: battery,
  progress: '100%',
  duration: 30000,
  easing: 'linear',
  round: 1, 
  update: function() {
    progress.innerHTML = battery.progress
  },
  complete: function() {
    icon.pause();
    icon.seek(icon.duration);
  }  
});

3. Dalam kasus kami, kami menggunakan nilai relatif terhadap animasi sebelumnya

Hasilnya adalah animasi pemintal bola yang mulus

Kesimpulan

Saya harap Anda mendapatkan pemahaman Anime yang jauh lebih baik. js. Untuk melanjutkan pembelajaran Anda dengan pengetahuan dasar ini, saya sarankan untuk melihat dokumentasinya

Anime. js adalah mesin animasi sederhana namun kuat yang dapat digunakan untuk membuat berbagai macam animasi. Biarkan imajinasi Anda menjadi liar

Bagikan artikel ini

Ivaylo Gerchev

Saya seorang pengembang/perancang web dari Bulgaria. Teknologi web favorit saya termasuk SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, dan React. Saat saya tidak memprogram Web, saya suka memprogram realitas saya sendiri ;)

kode javascript