Animasi Morph Demo

Apa beda animasi, animasi morph, slideshow, flash?

Masih sekelompok, masuk dalam rumpun (gambar, foto, citra) bergerak ..beda-beda tipislah. Posting lalu kita sudah membahas cara membuat slideshow di WordPress. Sekarang kita coba bedah animation morph atau morph. Posting morph terbagi 2:  Posting pertama, yang ini, khusus demo dan penjelasan sekedarnya. (Berkas morph cukup besar sehingga makan waktu untuk loadingnya, sabar.. nanti juga normal sendiri.)

Posting berikutnya, cara membuat morph.

Morph sama seperti slideshow. Beda pokok terletak pada peralihan atau transisi antar gambar. Peralihan gambar di slideshow kita tahu, pada morph ada tambahan atau sisipan gambar-antara saat transisi. Akibatnya berkas morph (jauh) lebih besar.

Cara membuat morph? Nanti di posting lanjutannya, sekarang kita bedah cara kerjanya lebih dahulu oke. Konsep morph sederhana, paling bagus dijelaskan melalui contoh seperti berikut.

Tiga gambar masing-masing ‘segitiga‘, ‘segi-4‘, dan  ‘lingkaran‘, seperti gambar di samping. Slideshow menampilkan gambar atau slide secara berurutan tanpa gambar-antara.

Pada morph obyek di gambar kita definisikan ulang dengan memberi sejumlah ‘control point‘ atau “titik referensi”.  Ketika terjadi perubahan antar gambar, titik-per-titik diproyeksikan dari obyek gambar sebelumnya ke gambar berikutnya. Ini yang membentuk gambar-antara.

Akibatnya saat transisi terkesan seolah-olah gambar berubah bentuk atau morph (diindonesiakan, ‘morf‘). Lihat morph di bawah ini, beda tipis ‘kan dengan flash; disampingnya animasi, juga beda tipis dengan slideshow kalau waktu tayang dibuat sedikit lebih lama ya.

Perhatikan gambar-antara yang samar-samar saat peralihan.

Posting-2 berikut adalah cara membuat morph, bukan dengan gambar sederhana seperti di atas melainkan model si nona cantik yang bermetamorfosa kalau sedang marah berubah galak, atau malah jadi jinak? (Kesannya…)

sumber:  (1) si nona cantik, Gisele Bundchen (2) si ‘Singa’
posting animasi lain: Animasi Sederhana (1)  (2) (3) (4) (5)