Cara Menggunakan "animateTransform" untuk Animasi Inline SVG

Hari ini kami akan memandu Anda melalui dasar-dasar penggunaan animateTransform untuk menghasilkan animasi sebaris dengan SVG (gambar vektor skalabel).

Jika Anda baru menggunakan SVG, saya sarankan untuk memeriksa Memulai Dengan Scalable Vector Graphics (SVG) untuk membawa Anda ke kecepatan.

Teknik yang Anda pelajari akan memungkinkan Anda membuat ikon canggih dan animasi gambar tanpa GIF, JPEG, atau PNG tunggal, dengan JavaScript nol, dan tanpa bisikan samar Flash.

Animasi yang Anda buat akan mudah diedit nanti karena itu adalah kode murni, dan hasilnya hanya akan mengambil beberapa KB bandwidth yang berharga ketika mereka dilihat.

Sebelum kita mulai

Untuk menganimasikan bentuk SVG Anda harus terlebih dahulu memiliki kemampuan untuk membuatnya. Saya telah menemukan cara termudah untuk membuat SVGs adalah dengan menggunakan sketsa dari Bohemia Coding. Jika Anda tidak memiliki sketsa Anda dapat mengambil 30-hari percobaan gratis untuk tujuan dari tutorial ini.

Kita akan memanipulasi kode SVG, jadi setelah Anda menggambar bentuk di Sketch, buat irisan di sekitarnya dan ekspor slice itu sebagai file SVG.

Anda kemudian akan dapat membuka file yang diekspor dalam editor kode (seperti Sublime Text) dan menyalin kode SVG dari dalam. Semua yang kau butuhkan adalah kode dari tag pembuka <svg> ke penutup tag </svg>

Sebagai contoh, sketsa menghasilkan kode SVG berikut untuk persegi biru digambarkan di atas:

1

<svg width="100px" height="125px" viewBox="0 0 100 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

    <!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->

3

    <title>Slice 2</title>

4

    <desc>Created with Sketch.</desc>

5

    <defs></defs>

6

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

7

        <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>

8

    </g>

9

</svg>

Agar kode lebih mudah dilihat secara visual, kita akan membuat beberapa perubahan kecil pada kode.

Mengatur elemen svg width dan height menjadi 100% dan menghapus viewBox setting. Hapus juga komentar Generator, dan judul, desc, defs dan g elemen.

Anda harus berakhir dengan sesuatu seperti ini:

1

<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>

3

</svg>

Masukkan kode itu ke dalam dokumen HTML dan, ketika dilihat di browser, Anda akan melihat kotak biru yang sama pada halaman Anda seperti yang Anda lihat di Sketch:

Catatan: Gambar di atas termasuk sumbu X dan Y di background karena Anda akan perlu memahami ini untuk membuat animasi Anda. Anda akan segera belajar mengapa.

Apa yang "animateTransform" Lakukan?

Jawaban singkatnya adalah, elemen animateTransform menghasilkan animasi dengan menyetel properti transformasi pada bentuk SVG yang diterapkan.

Karena itu, pertanyaan berikutnya yang logis adalah:

Oke, Jadi Apa yang "Transform" Lakukan?

Menambahkan pengaturan transform ke bentuk memungkinkan Anda untuk memodifikasi bagaimana bentuk itu muncul dalam ruang 2D. Ada lima jenis transformasi yang dapat Anda lakukan:

1. translate
   
2. scale
   
3. rotate
   
4. skewX
   
5. skewY

Atribut animateTransform memungkinkan Anda untuk animasikan di antara berbagai status transformasi, jadi sebelum Anda mulai meng-animasi, penting untuk memahami cara kerja transformasi.

Transformasi dan Ruang 2D

Karena transformasi beroperasi dalam ruang 2D, semua pengaturannya berhubungan dengan koordinat X dan Y yang diplot pada sumbu X / Y, seperti yang Anda lihat di belakang kotak biru kami sebelumnya.

• Sumbu X adalah garis horizontal dalam ruang 2D, dan sumbu Y adalah garis vertikal. Secara default, setiap bentuk dimulai di posisi 0 pada sumbu X dan Y.
• Dari posisi 0 pada sumbu X, nilai positif sesuai dengan pindah ke kanan, dan nilai negatif sesuai dengan bergerak ke kiri.
• Dari posisi 0 pada sumbu Y, nilai-nilai positif yang sesuai dengan bergerak ke bawah, dan nilai-nilai negatif sesuai dengan bergerak ke atas.

Jika ini tidak masuk akal, jangan khawatir, karena akan menjadi lebih jelas ketika Anda melihat contoh dari setiap jenis transformasi di bawah ini.

Jangan khawatir tentang kode untuk transformasi ini, karena kita akan membahasnya saat kita beralih ke pembuatan animasi. Untuk memulainya saya hanya ingin Anda mendapatkan hal-hal mendasar tentang apa yang sebenarnya dilakukan oleh lima jenis transformasi.

Translate

Ini menggeser posisi bentuk pada sumbu X (horizontal) dan sumbu Y (vertikal).

Sebagai contoh, di sini adalah persegi panjang biru kita dengan nilai translate 150 pada sumbu X (horizontal) dan 20 pada sumbu Y (vertikal):

Ingat dari bagian di atas bahwa nilai-nilai positif pada sumbu X sesuai dengan bergerak ke kanan, dan nilai-nilai positif pada sumbu Y sesuai dengan bergerak ke bawah.

Dengan menetapkan nilai translate untuk X ke positif 150, persegi panjang kami telah pindah ke kanan oleh 150 piksel. Menetapkan nilai untuk Y 20 positif telah bergerak persegi kami turun oleh 20 piksel.

Scale

Ini mengalikan ukuran keseluruhan bentuk pada sumbu X (lebar) dan sumbu Y (tinggi).

Setelan skala berfungsi sebagai pengganda ukuran asli bentuk. Sebagai contoh, jika kita mengatur skala X ke 3, itu akan membuat bentuknya tiga kali lebih lebar. Jika kita mengatur skala Y ke 1,25 itu akan membuat bentuk satu dan seperempat kali lebih tinggi, seperti:

Rotate

Ini memutar bentuk di sekitar titik tertentu dengan derajat.

Rotasi bekerja dengan mengatur jumlah derajat yang Anda inginkan untuk memutar bentuk. Sebagai contoh, di sini adalah persegi panjang kita diputar oleh 45 derajat:

Secara default, bentuknya akan berputar di sekitar sudut kiri atas tetapi Anda juga dapat memutarnya di sekitar titik yang berbeda. Kita akan membahas cara melakukannya nanti di tutorial.

SkewX

Ini memiringkan bentuk sepanjang sumbu X (horizontal).

Skewing sepanjang sumbu X juga bekerja dalam derajat. Misalnya, pada gambar di bawah persegi panjang kita miring sebesar 20 derajat sepanjang sumbu X:

SkewY

Ini skews bentuk sepanjang sumbu Y (vertikal) dengan derajat.

SkewY bekerja dalam cara yang sama sebagai SkewX, hanya transformasi terjadi secara vertikal sepanjang sumbu Y seperti:

Menghidupkan Transformasi

Sekarang setelah Anda tahu apa yang sebenarnya dilakukan transformasi, Anda dapat mulai membuat animasi di antara berbagai status transformasi. Proses dasar memiliki tiga langkah:

1. Tetapkan status awal transformasi: from state.
   
2. Set kedua negara transformasi: to state.
   
3. Atur waktu dan pengulangan untuk transisi animasi antara from dan to state.

Ini paling baik dipahami melalui contoh praktis, jadi mari kita mulai dengan menganimasikan transformasi translate.

Transformasi Terjemahan Animasi

Anda akan ingat bahwa sebelumnya kita mulai dengan kotak biru kita pada posisi defaultnya 0 0, yaitu 0 pada sumbu X dan 0 pada sumbu Y. Kita akan menetapkan posisi ini sebagai from state kita.

Kita kemudian melihat contoh persegi panjang biru yang sama dengan pengaturan terjemahan 150 20 yang diterapkan, yaitu 150 pada sumbu X dan 20 pada sumbu Y. Kita akan menetapkan posisi ini sebagai to state kita.

Dengan menggunakan animateTransform, kita dapat membuat slide persegi panjang dengan mulus antara from kita dan to state kita selama periode dua detik.

Bentuk SVG Anda, dalam kasus persegi ini, akan perlu untuk memiliki pembukaan dan penutupan Tag misalnya <rect></rect>.

Atribut animateTransform harus ditempatkan di antara tag-tag ini seperti:

1

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

2

    <animateTransform attributeName="transform"

3

      type="translate"

4

      from="0 0"

5

      to="150 20"

6

      begin="0s"

7

      dur="2s"

8

      repeatCount="indefinite"

9

    />

10

  </rect>

Lihatlah properti yang telah ditetapkan dalam tag animateTransform. Inilah yang mengontrol bagaimana animasi Anda berjalan.

Kita telah menetapkan type untuk diterjemahkan, yang berarti kita akan menerapkan jenis transformasi translate. Seperti yang direncanakan, kita telah menetapkan posisi 0 0 kita di from state, dan posisi 150 20 kami di to state.

Nilai untuk begin diatur ke 0s, artinya animasi akan mulai nol detik setelah pemuatan, dan dur disetel ke 2s, yang berarti animasi akan berjalan selama periode dua detik. Akhirnya, kami telah menyertakan repeatCount mengatur untuk indefinite makna animasi akan memutar ulang pada pengulangan.

Ini memberikan animasi berikut:

Menghidupkan Transformasi Lain

Prosesnya persis sama untuk memutar keempat jenis transformasi lainnya. Setelah menetapkan nilai type untuk jenis transformasi apa pun yang Anda inginkan, masukkan nilai from Anda dan to transformation states.

Sebagai contoh, kita dapat menggunakan pengaturan animateTransform berikut untuk menskalakan persegi panjang kita hingga ukuran yang Anda lihat di bagian sebelumnya pada transformasi skala:

1

    <animateTransform attributeName="transform"

2

      type="scale"

3

      from="1 1"

4

      to="3 1.25"

5

      begin="0s"

6

      dur="2s"

7

      repeatCount="0"

8

    />

Karena pengaturan transformasi skala melipatgandakan ukuran asli bentuk, kita mulai dengan nilai 1 1 pada pengaturan from. Melakukan hal ini menentukan ukuran aslinya pada perkalian 1.

Pengaturan kami to pada 3 1,25 akan menganimasikan transformasi skala kami hingga tiga kali lebar asli pada sumbu X, dan satu seperempat tinggi asli pada sumbu Y.

Catatan: Anda akan menemukan bahwa animasi dalam-browser Anda berjalan lebih lancar daripada tangkapan layar GIF yang Anda lihat di atas.

Menghidupkan Beberapa Transformasi

Kita juga dapat menggabungkan dua animasi yang telah kita buat sejauh ini, baik untuk menerjemahkan dan mengukur pada saat yang bersamaan. Anda hanya dapat menggunakan satu tag animateTransform di dalam tag rect Anda, jadi untuk menggunakan beberapa animasi Anda harus memasukkan satu set tag g, yang mewakili sekelompok objek SVG.

Untuk membuat karya ini, tambahkan pembukaan dan penutupan <g></g> tag sekitar rect tag Anda yang sudah ada:

1

  <g>

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

3

    <animateTransform attributeName="transform"

4

      type="scale"

5

      from="1 1"

6

      to="3 1.25"

7

      begin="0s"

8

      dur="2s"

9

      repeatCount="0"

10

    />

11

  </rect>

12

  </g>

Kemudian tambahkan animasi kedua Anda di luar tag penutupan </rect>, tetapi sebelum tag penutup </g>. Dalam hal ini kita akan memperkenalkan kembali transformasi translate kita:

1

  <g>

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

3

    <animateTransform attributeName="transform"

4

      type="scale"

5

      from="1 1"

6

      to="3 1.25"

7

      begin="0s"

8

      dur="2s"

9

      repeatCount="0"

10

    />

11

  </rect>

12

  <animateTransform attributeName="transform" type="translate" from="0 0" to="150 20" begin="0s" dur="2s" repeatCount="0" />

13

  </g>

Kita sekarang memiliki skala dan translate transformasi animasi secara bersamaan:

Anda dapat menggunakan animateTransform satu kali per bentuk atau grup. Jika Anda perlu menambahkan lebih banyak animasi, bungkus kumpulan tag grup lain di sekitar kode Anda dan tambahkan tag animateTransform tambahan Anda di dalamnya.

Mari kita lihat dengan cepat tiga jenis transformasi yang tersisa, masing-masing dibuat dengan mengubah hanya type, from dan to pengaturan, dan juga dikombinasikan dengan animasi translation asli kita.

Rotasi animasi (ditambah terjemahan)

Dalam contoh ini type telah diatur untuk rotate, from yang telah diatur ke 0 untuk memulai tanpa rotasi, dan to telah diatur ke 45 sehingga kita memutar 45 derajat selama dua detik:

SkewX dan SkewY animasi (ditambah terjemahan)

Dalam dua type animasi berikut telah disetel ke skewX dan skewY masing-masing, from diatur ke 0 untuk memulai tanpa skewing, dan to telah disetel menjadi 20 sehingga kita miringkan sebesar 20 derajat selama dua detik:

Contoh Praktis: Memuat Ikon

Ada sejumlah kemungkinan yang tak terbatas untuk animasi yang dapat Anda buat menggunakan teknik dasar ini, tetapi salah satu yang paling berguna adalah pembuatan ikon pemuatan di mana Anda mungkin sebelumnya mengandalkan animasi GIF.

Ini adalah ikon pemuatan yang saya buat dalam waktu sekitar lima menit menggunakan Sketch:

Saya kemudian mengekspornya ke file SVG yang memberi saya kode berikut:

1

<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

    <!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->

3

    <title>loader01 2</title>

4

    <desc>Created with Sketch.</desc>

5

    <defs></defs>

6

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

7

        <g id="Group-3" sketch:type="MSLayerGroup" fill="#4990E2">

8

            <rect id="Rectangle-1" sketch:type="MSShapeGroup" x="16.5873418" y="0" width="3" height="9.13705584"></rect>

9

            <rect id="Rectangle-2" fill-opacity="0.58" sketch:type="MSShapeGroup" x="16.678481" y="26.8629442" width="3" height="9.13705584"></rect>

10

            <rect id="Rectangle-4" fill-opacity="0.79" sketch:type="MSShapeGroup" transform="translate(31.530380, 17.954315) rotate(-270.000000) translate(-31.530380, -17.954315) " x="30.0303797" y="13.3857868" width="3" height="9.13705584"></rect>

11

            <rect id="Rectangle-3" fill-opacity="0.37" sketch:type="MSShapeGroup" transform="translate(4.735443, 18.045685) rotate(-270.000000) translate(-4.735443, -18.045685) " x="3.23544304" y="13.4771574" width="3" height="9.13705584"></rect>

12

            <rect id="Rectangle-4" fill-opacity="0.72" sketch:type="MSShapeGroup" transform="translate(29.758244, 24.676171) rotate(-240.000000) translate(-29.758244, -24.676171) " x="28.2582441" y="20.1076435" width="3" height="9.13705584"></rect>

13

            <rect id="Rectangle-3" fill-opacity="0.3" sketch:type="MSShapeGroup" transform="translate(6.507579, 11.323829) rotate(-240.000000) translate(-6.507579, -11.323829) " x="5.00757864" y="6.75530065" width="3" height="9.13705584"></rect>

14

            <rect id="Rectangle-4" fill-opacity="0.65" sketch:type="MSShapeGroup" transform="translate(24.871110, 29.609153) rotate(-210.000000) translate(-24.871110, -29.609153) " x="23.37111" y="25.0406255" width="3" height="9.13705584"></rect>

15

            <rect id="Rectangle-3" fill-opacity="0.23" sketch:type="MSShapeGroup" transform="translate(11.394713, 6.390847) rotate(-210.000000) translate(-11.394713, -6.390847) " x="9.89471277" y="1.82231869" width="3" height="9.13705584"></rect>

16

            <rect id="Rectangle-4" fill-opacity="0.51" sketch:type="MSShapeGroup" transform="translate(11.473642, 29.654839) rotate(-150.000000) translate(-11.473642, -29.654839) " x="9.97364166" y="25.0863108" width="3" height="9.13705584"></rect>

17

            <rect id="Rectangle-3" fill-opacity="0.93" sketch:type="MSShapeGroup" transform="translate(24.792181, 6.345161) rotate(-150.000000) translate(-24.792181, -6.345161) " x="23.2921811" y="1.77663341" width="3" height="9.13705584"></rect>

18

            <rect id="Rectangle-4" fill-opacity="0.44" sketch:type="MSShapeGroup" transform="translate(6.553148, 24.755301) rotate(-120.000000) translate(-6.553148, -24.755301) " x="5.05314826" y="20.1867727" width="3" height="9.13705584"></rect>

19

            <rect id="Rectangle-3" fill-opacity="0.86" sketch:type="MSShapeGroup" transform="translate(29.712675, 11.244699) rotate(-120.000000) translate(-29.712675, -11.244699) " x="28.2126745" y="6.67617143" width="3" height="9.13705584"></rect>

20

        </g>

21

    </g>

22

</svg>

Mengingat ikon ini terdiri dari berbagai bentuk di dalam grup, dan seperti yang telah kami pelajari dari atas, Anda dapat menerapkan animateTransform ke grup, saya menambahkan kode animasi saya sebelum tag penutup terakhir </g> :

1

        </g>

2

        <animateTransform attributeName="transform"

3

      	type="rotate"

4

    		from="0 18 18"

5

    		to="360 18 18"

6

    		begin="0s"

7

    		dur="0.85s"

8

    		repeatCount="indefinite"

9

    	/>

10

    </g>

11

</svg>

Kode di atas menyetel ikon untuk berputar dari 0 hingga 360 derajat, yaitu lingkaran penuh.

Poros Berputar

Perhatikan bahwa kali ini saya juga menyertakan dua angka tambahan baik from dan to pengaturan. Ini memberitahu animasi untuk berputar di sekitar titik pada sumbu X / Y internal sendiri pada 18 18, yaitu pusat bentuk yang diberikan berukuran 36x36 piksel.

Hal ini menghasilkan animasi berikut:

Sekali lagi, animasi di-browser Anda akan lebih mulus daripada GIF di atas, jadi pastikan untuk memeriksa hal yang sebenarnya. Seperti yang Anda lihat, sangat cepat dan mudah untuk menyatukan animasi yang bisa Anda dapatkan dari penggunaan yang praktis.

Penutup

Jika Anda belum menjalankan di animasi SVG, Anda seharusnya sudah memiliki alat yang Anda butuhkan untuk mendapatkan awal yang baik.

Bacaan lebih lanjut

• Contoh Hebat Codepen animasi loader SVGs
• Lebih lanjut tentang bagaimana animateTransform bekerja di W3C.
• Ambil sendiri salinan sumber untuk tutorial ini, bermain-mainlah dengan contoh-contoh dan bersenang-senanglah membuat animasi SVG inline Anda sendiri!