Meringkas Efek Animasi Beruntun/Berkelanjutan - Dewa Blogger

Halaman

    Social Items

Buy Now

Saat kita membuat pengaruh animasi beruntun/berkelanjutan memakai .animate(), biasanya kita akan melaksanakan ini:

$('div').animate({     width:100,     height:30 }, 1000).animate({     marginTop:200,     marginLeft:100 }, 1000).animate({     fontSize:30,     padding:40 }, 1000).animate({     borderWidth:10 }, 1000).animate({     marginTop:0 }, 1000); // dan seterusnya...

Implementasi di atas memang bekerja dan sama sekali tidak salah. Lihat risikonya di sini:

Lihat Demo

Tapi sadarkah Anda bahwa properti-properti animasi yang tertulis di dalam .animate() intinya hanyalah objek:

Implementasi di atas memang bekerja dan sama sekali tidak salah Meringkas Efek Animasi Beruntun/Berkelanjutan
Dan kita dapat mempopulasikan itu ke dalam sebuah array:

var anim = [     { width:100, height:30 },     { marginTop:200, marginLeft:100 },     { fontSize:30, padding:40 },     { borderWidth:10 },     { marginTop:0 } ];

Ini memungkinkan kita untuk menerapkan properti-properti animasi tersebut satu per satu tanpa harus mendeklarasikan .animate() berulang kali:

var anim = [     { width:100, height:30 },     { marginTop:200, marginLeft:100 },     { fontSize:30, padding:40 },     { borderWidth:10 },     { marginTop:0 } ];  $.each(anim, function(i) {     $('div').animate(anim[i], 1000); });

Atau cukup gunakan cara usang yang biasa dipakai untuk menangani array ketika kita memakai JavaScript mentah menyerupai ini:

var anim = [     { width:100, height:30 },     { marginTop:200, marginLeft:100 },     { fontSize:30, padding:40 },     { borderWidth:10 },     { marginTop:0 } ];  for (var i = 0, len = anim.length; i < len; i++) {     $('div').animate(anim[i], 1000); }

Lihat Demo

Performa?

Saya tidak tahu apakah cara ini dapat mempercepat kerja animasi atau tidak (Saya malas mengetesnya). Tapi Saya pikir cara ini dapat mempermudah kita di dalam membangun deret animasi berlebih-lebihan tanpa harus mendeklarasikan jQuery .animate() secara berlebihan. Selain itu, dengan cara mempopulasikan properti animasi di dalam array, maka ini memungkinkan kita untuk membuat gerak animasi yang berbeda-beda pada elemen yang berbeda dengan cara meletakkan array animasi ke dalam atribut elemen. Misalnya menyerupai ini:

<div data-animation="[{top:30},{left:50},{fontSize:30,borderWidth:10},{padding:30}]"></div>

Setelah itu, cukup gunakan method manipulasi atribut untuk mendapat nilai atribut pada masing-masing elemen. Konversi nilainya semoga menjadi array (bukan string) dengan eval():

$('div').each(function() {     var anim = eval($(this).data('animation')), // Mengambil nilai atribut `data-animation` dari elemen         $div = $(this);     $.each(anim, function(i) {         $div.animate(anim[i], 1000);     }); });

Lihat Demo


Referensi: SO - jQuery .animate() with Direction That Created from an Array of Objects, But


Sumber https://www.dte.web.id/

Meringkas Efek Animasi Beruntun/Berkelanjutan

Saat kita membuat pengaruh animasi beruntun/berkelanjutan memakai .animate(), biasanya kita akan melaksanakan ini:

$('div').animate({     width:100,     height:30 }, 1000).animate({     marginTop:200,     marginLeft:100 }, 1000).animate({     fontSize:30,     padding:40 }, 1000).animate({     borderWidth:10 }, 1000).animate({     marginTop:0 }, 1000); // dan seterusnya...

Implementasi di atas memang bekerja dan sama sekali tidak salah. Lihat risikonya di sini:

Lihat Demo

Tapi sadarkah Anda bahwa properti-properti animasi yang tertulis di dalam .animate() intinya hanyalah objek:

Implementasi di atas memang bekerja dan sama sekali tidak salah Meringkas Efek Animasi Beruntun/Berkelanjutan
Dan kita dapat mempopulasikan itu ke dalam sebuah array:

var anim = [     { width:100, height:30 },     { marginTop:200, marginLeft:100 },     { fontSize:30, padding:40 },     { borderWidth:10 },     { marginTop:0 } ];

Ini memungkinkan kita untuk menerapkan properti-properti animasi tersebut satu per satu tanpa harus mendeklarasikan .animate() berulang kali:

var anim = [     { width:100, height:30 },     { marginTop:200, marginLeft:100 },     { fontSize:30, padding:40 },     { borderWidth:10 },     { marginTop:0 } ];  $.each(anim, function(i) {     $('div').animate(anim[i], 1000); });

Atau cukup gunakan cara usang yang biasa dipakai untuk menangani array ketika kita memakai JavaScript mentah menyerupai ini:

var anim = [     { width:100, height:30 },     { marginTop:200, marginLeft:100 },     { fontSize:30, padding:40 },     { borderWidth:10 },     { marginTop:0 } ];  for (var i = 0, len = anim.length; i < len; i++) {     $('div').animate(anim[i], 1000); }

Lihat Demo

Performa?

Saya tidak tahu apakah cara ini dapat mempercepat kerja animasi atau tidak (Saya malas mengetesnya). Tapi Saya pikir cara ini dapat mempermudah kita di dalam membangun deret animasi berlebih-lebihan tanpa harus mendeklarasikan jQuery .animate() secara berlebihan. Selain itu, dengan cara mempopulasikan properti animasi di dalam array, maka ini memungkinkan kita untuk membuat gerak animasi yang berbeda-beda pada elemen yang berbeda dengan cara meletakkan array animasi ke dalam atribut elemen. Misalnya menyerupai ini:

<div data-animation="[{top:30},{left:50},{fontSize:30,borderWidth:10},{padding:30}]"></div>

Setelah itu, cukup gunakan method manipulasi atribut untuk mendapat nilai atribut pada masing-masing elemen. Konversi nilainya semoga menjadi array (bukan string) dengan eval():

$('div').each(function() {     var anim = eval($(this).data('animation')), // Mengambil nilai atribut `data-animation` dari elemen         $div = $(this);     $.each(anim, function(i) {         $div.animate(anim[i], 1000);     }); });

Lihat Demo


Referensi: SO - jQuery .animate() with Direction That Created from an Array of Objects, But


Sumber https://www.dte.web.id/