Meringkas Efek Animasi Beruntun/Berkelanjutan

Saat kita membuat efek animasi beruntun/berkelanjutan menggunakan .animate(), biasanya kita akan melakukan 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 hasilnya di sini:

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

Dan kita bisa 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 lama yang biasa digunakan untuk menangani array saat kita menggunakan JavaScript mentah seperti 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);
}

Performa?

Saya tidak tahu apakah cara ini bisa mempercepat kerja animasi atau tidak (Saya malas mengetesnya). Tapi Saya pikir cara ini bisa 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 menciptakan gerak animasi yang berbeda-beda pada elemen yang berbeda dengan cara meletakkan array animasi ke dalam atribut elemen. Misalnya seperti ini:

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

Setelah itu, cukup gunakan method manipulasi atribut untuk mendapatkan nilai atribut pada masing-masing elemen. Konversi nilainya agar 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);
    });
});

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