Cara Membuat Jantung Detak Animasi dengan SVG

() translation by (you can also view the original English article)

Ini hari Valentine! Jadi mari kita masuk ke dalam semangat hal-hal, menjadi semua merah muda dan smooshy dalam proses, dan kode diri kita dengan detak jantung animasi sederhana dengan SVG.

Inilah yang akan kami buat:

Ini adalah latihan yang bagus untuk membiasakan diri dengan sintaks SVG dan animasi otentik. Kami akan mengambil hati SVG premade, mengingatkan diri kita sendiri bagaimana viewBox bekerja, kemudian menambahkan elemen animateTransform untuk mengendalikan gerakan pemukulan. Mari kita mulai!

1. Buat Ikon Hati

Di alat vektor pilihan Anda, gambar ikon hati yang sederhana. Itu tidak harus sempurna, tetapi menjadikannya satu jalan terus menerus demi kemudahan. Saya membuat milik saya di atas kanvas 100x100px dan mengisi hampir semuanya.

Unduh Illustrator dan versi SVG milik saya jika Anda ingin menggunakannya.

Salin dan Tempel Ke Editor Teks

Dalam sebagian besar aplikasi vektor saat ini Anda dapat menyalin objek dan menempelkan kode SVG yang dihasilkan ke dalam editor teks. Jadi lakukan itu dengan objek hati. Kami akan kembali ke cuplikan SVG ini sebentar lagi.

2. Mulai Menulis SVG

Dalam Codepen (atau file HTML blanco) mulai dengan menulis tulang kosong elemen SVG:

1	<svg width="100" height="85" viewBox="0 0 100 85">
2
3	</svg>

Di sini kami memberikan tinggi dan lebar SVG yang sama dengan gambar asli kami. Kami juga mengatur viewBox pada 0 0 100 85. Ini berarti bahwa jendela yang sedang kami lihat SVG kami mulai di koordinat 0 0 (kiri atas) dan berukuran 100x85px, sehingga cocok dengan SVG kami dengan sempurna.

Untuk mengingatkan bagaimana cara kerja viewBox, saya sarankan Anda melihat penjelasan ini oleh Kezz Bracey:

SVG

SVG Viewport dan viewBox (Untuk Pemula Lengkap)

Kezz Bracey

Untuk melihat dengan jelas apa yang Anda hadapi, tambahkan aturan CSS untuk mewarnai latar belakang SVG:

1	svg {
2	background: blue;
3	}

Mari kita juga pusatkan apa yang kita lihat, menggunakan flexbox:

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

3. Tambahkan Jalur Hati

Sekarang kita perlu membuat elemen path di SVG. Mulailah dengan jalur kosong, dengan warna fill dan kosong d:

1	<path fill="tomato" d="">

D mendefinisikan jalur yang ditarik, jadi mari kita tambahkan koordinat jalur kita ke sana. Dalam cuplikan SVG yang Anda tempelkan ke editor teks, ambil semuanya dari atribut d dan tempelkan di yang kosong. Anda harus berakhir dengan string yang campur aduk yang terlihat seperti ini:

<path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z">

</path>

Semua itu akan menciptakan yang berikut:

4. Biarkan hati Anda tumbuh

Saya ingin hati yang lebih besar.

By doubling the SVG width and height attributes to width="200" height="170" we’ll double the size of the whole thing. Atau kita bisa skala segala sesuatu oleh 150% lebar = "150" tinggi = "127". Atau sesuatu yang lain. Kami tidak perlu menyentuh nilai viewBox mereka akan tetap relatif terhadap Viewport kita hanya telah berubah.

5. menambahkan sentuhan animasi

Untuk menghidupkan jantung kita akan menggunakan elemen animateTransform, bersarang dalam SVG kami.

Mulailah dengan menambahkan unsur di dalam SVG, sebagai saudara kandung dari jalan:

<animateTransform 
    attributeName="transform" 
    type="scale" 
    dur="1s" 
    repeatCount="indefinite">
</animateTransform>

Ini akan menghidupkan elemen orangtua, yaitu: seluruh <svg>. Ini tidak akan cocok di banyak situasi, dan akan lebih baik untuk menghidupkan unsur-unsur dalam <svg>, tetapi pendekatan ini bekerja dengan baik bagi kita.</svg> </svg> For a refresher on how animateTransform works, Kezz (as usual) has you covered:

SVG

Cara menggunakan "animateTransform" untuk Inline SVG animasi

Kezz Bracey

Atribut yang kami telah digunakan cukup jelas. Kami menciptakan transform skala, dengan durasi 1s, yang akan mengulangi tanpa batas.

Menambahkan nilai untuk mengubah

Sekarang kita perlu menambahkan daftar nilai-nilai, jadi tahu oleh berapa banyak untuk menghidupkan:

<animateTransform
      attributeName="transform"
      type="scale"
      dur="1s"
      values="1; 1.5; 1.25; 1.5; 1.5; 1;"
      repeatCount="indefinite">
</animateTransform>

Jadi di sini jantung dimulai pada ukuran normal (1), maka skala ke ukuran normal 1.5, kemudian turun sedikit 1,25, lalu kembali ke 1.5, dan sebagainya. Nilai-nilai ini memberi kita efek pemukulan.

Catatan: setiap nilai mengambil porsi sama waktu kedua 1 yang telah kami tentukan. Seperti yang Anda bayangkan, gerak akan muncul untuk mempercepat dan memperlambat tergantung pada berapa banyak skala ini perlu dilakukan untuk setiap langkah.

Kesimpulan

Saya harus jujur, aku suka hasil akhir ini! Ini adalah animasi yang sederhana namun efektif, dan memberikan kita kesempatan sempurna untuk berlatih keterampilan SVG kita. With a lavender coloured background, here’s the end result (head over to CodePen and give it some hearts!)