Animasi dalam website merupakan bagian yang bisa dikatakan untuk menarik pandangan dari user atau pengguna website. Dalam banyak website pada umumnya cara atau pembuataan animasi tentu sangat banyak sekali cara membuatnya. Dalam kesempatan kali ini yuk sama-sama belajar membuat animasi menggunakan VueJs.
Animasi menggunakan Vue Js kali ini saya akan menampilkan gambar bisa menggunakan png maupun svg. Tentunya sesuai gambar yang sahabat inginkan.
Baiklah pertama silahkan buat file HTML seperti dibawah ini:
|
1 2 3 4 |
<div id="app"> <button @click="play">Play</button> <tama ref="tama" :x="100" :y="300" :scaleX="0.5" :scaleY="0.5"></tama> </div> |
oke selanjutnya tambahkan script berikut untuk area animasi bergerak:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/x-template" id="tama"> <div> <img class="tama-root" :src="image" alt="root" :style="{ transform: `translate(${x + dx}px, ${y + dy}px) scale(${scaleX * dScaleX}, ${scaleY * dScaleY}) rotate(${rotate + dRotate}deg)`, transition: `transform ${duration}ms ${easing}` }" @click="jump(200)" > </div> </script> |
Jika sudah sekarang menambahkan script perintah untuk bergerak untuk content atau gambar yang dinginkan, berikut codenya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<script> Vue.component('tama', { template: '#tama', props: { x: { type: Number, default: 200 }, y: { type: Number, default: 100 }, scaleX: { type: Number, default: 1.0 }, scaleY: { type: Number, default: 1.0 }, rotate: { type: Number, default: 0 } }, data () { return { dx: 0, dy: 0, dScaleX: 1.0, dScaleY: 1.0, dRotate: 0, duration: 1000, easing: 'ease', image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuuWpLvu58gNAvIrhLtT8KyyPi9HXpm4j6vU1QTpn5eOLQrCMF&s' } }, methods: { async tween (props, duration = 1000) { Object.assign(this.$data, props) this.$data.duration = duration await this.$root.wait(duration) }, async jump (height = 300, duration = 2500) { await this.tween({ dScaleY: 0.8, easing: 'ease' }, duration * 0.1) await this.tween({ dy: -height, dScaleY: 1.1, easing: 'ease-out' }, duration * 0.35) await this.tween({ dy: 0, dScaleY: 1.2, easing: 'ease-in' }, duration * 0.35) await this.tween({ dScaleY: 0.7, easing: 'ease' }, duration * 0.1) await this.tween({ dScaleY: 1.0, easing: 'ease' }, duration * 0.1) }, async walk (step = 100, duration = 500) { await this.tween({ dRotate: 10, dScaleY: 0.8, easing: 'ease' }, duration * 0.2) await this.tween({ dx: this.dx + step, dy: -step * 0.2, dRotate: -5, dScaleY: 1.1, easing: 'cubic-bezier(.04,.67,.52,1)' }, duration * 0.7) await this.tween({ dy: 0, dRotate: 0, dScaleY: 1, easing: 'ease' }, duration * 0.1) } } }) new Vue({ data(){ return{ } }, methods: { wait(ms) { return new Promise(resolve => { window.setTimeout(resolve, ms) }) }, async play () { const tama = this.$refs.tama await tama.jump(100, 1500) await tama.walk(100, 1200) await tama.walk(60, 600) await tama.walk(40, 400) await tama.jump(200, 2500) } } }).$mount('#app') </script> |
Pada data terdapat source image : ‘ lokasi gambar ‘ ,sahabat bisa mengganti dengan gambar yang disuka. Dan berikan juga style CSS seperti code dibawah:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .tama-root { width: 150px; position: absolute; left: 0; top: 50%; margin: -300px auto auto -90px; transform-origin: 90px 100%; will-change: transform; } </style> |
Jadi jika sudah akan seperti tampilan berikut lalu klik button play untuk menggerakan.
Demikian yang bisa saya sampaikan dalam pembahasan artikel kali ini, semoga bermanfaat dan sampai jumpa.
terima kasih