Tutor Animasi Menggunakan Gambar SVG dan Jquery

Well, mungkin sudah tidak asing dengan yang namanya animasi, sperti halnya filem kartun, dalam dunia per-web-an animasi tidak kalah penting peranya dalam membuat website yang dinamis dan terlihat cool, banyak yang menggunakan Flash sebagai media penampil animasi, tetapi setelah Jquery dan HTML5 lahir Animasi tidak harus menggunakan flash lagi, ditambah kehadiran CSS3 yang dapat membuat website begitu terlihat keren ketika menggabungkan Jquery HTML dan CSS3, dikesempatan kali ini saya akan mencoba memaparkan pembuatan animasi dengan menggunakan File image SVG yang di gabungkan dengan HTML5 dan Jquery

Scalable Vector Graphics (SVG)

Sebelum membahas lebih lanjut ada baiknya jika kita megetahui dulu apa itu SVG, SVG adalah singkatan dari Scalable Vector Graphics dan merupakan format file baru untuk menampilkan grafik dalam pengembangan web yang berbasis XML (eXtensible Markup Language) SVG telah direkomendasikan oleh World Wide Web Consortium (W3C) untuk menampilkan grafik serta mendeskripsikan gambar 2 dimensi dalam pengembangan web yang berbasis XML. SVG memperbolehkan tiga tipe dari obyek grafis, yaitu bentuk vektor grafis (misalkan jalur yang terdiri dari garis lurus dan kurva), gambar dan teks. Hasil dari SVG dapat juga interaktif dan dinamis. Animasi dapat didefinisikan dan ditimbulkan secara menempelkan elemen animasi SVG pada isi SVG) atau dengan menggunakan skripting. SVG dapat digunakan untuk menghasilkan berbagai macam variasi dari obyek grafis, dan juga menyediakan bentuk dasar umum seperti bujur sangkar dan elips. SVG memberikan pengendalian kualitas melalui sistem koordinat dari obyek grafis yang telah didefinisikan dan transformasi yang akan digunakan selama proses render. Penyimpanan berkas (file) SVG dilakukan dengan cara memberi nama ekstensinya dengan “.svg” (memakai huruf kecil semua), dan untuk menyimpan file SVG yang terkompresi memakai ekstensi “.svgz” (semua memakai huruf kecil) berikut contoh dari file SVG

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD svg 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303 stylable.dtd">
<svg width="100px" height="50px">
<text style="fill:red" x ="10" y="20">Hello World !</text>
</svg>

Lazy Line Painter

Lazy Line Painter Adalah sebuah plugin dari Jquery untuk membaca File Path Line dari File svg dan merubahnya kedalam bentuk animasi, untuk lebih jelas tentang penggunaan Plugin ini teman-teman bisa langsung main ke empunya plugin di http://lazylinepainter.info/ Cara menggunakan Plugin ini juga cukup sederhana, tetapi dengan catatan kita harus membuat terlebih dahulu file svg yang akan kita gunakan sebagai object animasi, file svg yang akan digunakan bisa dibuat dengan menggunakan Adobe Ilustrator, ada beberapa catatan khusus tentang file svg yang bisa digunakan untuk animasi, file svg harus dibuat dengan menggunakan line tool atau pen tool pada Image editornya, karena yang menjadi dasar animasinya adalah line yang terdapat pada file svg yang kita buat
, contoh gambar svg yang saya gunakan dalam tulisan ini seperti berikut



Konfigurasi Lazy Line Painter

Code:

'strokeWidth'    // Adjust width of stroke
'strokeColor'    // Adjust stroke color
'strokeCap'      // Adjust stroke cap  - butt  | round | square
'strokeJoin'     // Adjust stroke join - miter | round | bevel
'strokeDash'     // Adjust stroke dash - ["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]
'strokeOpacity'  // Adjust stroke opacity 0 - 1
'onComplete'     // Callback fired after animation
'delay'          // Delay before animation starts
'overrideKey'    // Set this property if you selector id doesn't match the key referencing your path data value within svgData.

Code:

$('#demo').lazylinepainter({  
        'svgData' : svgData, // data yang berisi object svg
        'strokeWidth':7,  
        'strokeColor':'#de8f8f'
    }
)

How To

Setelah kita mempersiapkan file svg yang akan dianimasikan, kita hanya tinggal melakukan konversi svg kedalam bentuk javascript, caranya cukup mudah, masuk ke alamathttp://lazylinepainter.info/ Scroll kebagian bawah, teman-teman akan menemukan tempat untuk melakukan konveresi file SVG kedalam bentuk Javascript Object, berikut hasil image SVG yang saya konversi

Code:

var pathObj = {
    "stylized_yoga_person_ger_03": {
        "strokepath": [
            {
                "path": "       M506.492,0.089c-7.02-0.216-24.625-0.324-37.404,1.044c-12.852,1.44-22.645,3.348-38.951,6.84       c-16.598,3.528-38.846,7.992-58.969,14.22c-20.125,6.444-43.992,18.18-60.516,23.688c-16.561,5.544-25.309,4.644-37.908,8.964       c-12.709,4.392-23.652,5.976-37.404,16.848c-13.896,11.088-32.328,32.04-44.748,48.42       c-12.42,16.236-26.784,43.416-28.944,47.916c-2.088,4.104,8.856-12.42,16.308-22.644c7.272-10.44,16.956-26.064,27.396-38.412       c10.44-12.384,22.536-26.568,34.74-34.776c12.06-8.136,24.336-10.332,37.367-14.22c12.961-3.78,26.354-4.356,40.033-8.928       c13.535-4.68,25.92-12.816,41.039-18.432c15.156-5.364,32.4-10.008,48.961-14.22c16.416-4.212,35.424-8.64,48.959-11.052       c13.428-2.196,21.889-2.232,31.068-2.628c9.072-0.216,19.908,0.936,23.184,0.54C513.799,2.825,513.367,0.521,506.492,0.089z",
                "duration": 1800
            },
            {
                "path": "       M503.324,7.974c-2.844-0.036-9.361,0.036-13.176,1.584c-3.816,1.692-4.934,6.732-9.469,7.884       c-4.752,1.116-16.92-1.368-17.893-1.044c-0.898,0.54,8.496,3.528,12.637,3.708c3.996,0.216,8.459-1.224,11.592-2.664       c3.061-1.404,3.527-4.428,6.84-5.76c3.205-1.152,10.98-0.937,12.637-1.584C508.004,9.521,506.023,8.117,503.324,7.974z",
                "duration": 600
            },
            {
                "path": "       M453.824,17.441c-1.225,1.116-20.449,7.128-32.113,11.088c-11.664,4.032-26.387,8.064-37.367,12.636       c-11.016,4.608-19.152,8.964-28.439,14.724c-9.469,5.976-26.137,19.692-27.361,20.016c-1.115-0.072,9.756-12.312,20.521-19.476       c10.691-6.984,29.844-16.308,43.164-22.14c13.211-5.688,25.379-9.216,35.818-12.096       C438.344,19.458,454.76,16.397,453.824,17.441z",
                "duration": 800
            },
            {
                "path": "       M329.047,82.206c0.396-0.504,7.381,1.8,11.09,0.54c3.49-1.62,6.768-7.2,10.512-8.964c3.744-1.656,7.775-1.404,12.096-1.044       c4.248,0.216,14.004,2.16,13.176,2.628c-1.045,0.288-14.076-1.476-18.973,0c-5.039,1.512-7.344,7.092-10.512,8.964       c-3.203,1.584-5.543,2.016-8.424,1.584C335.061,85.409,328.652,82.781,329.047,82.206z",
                "duration": 600
            },
            {
                "path": "       M393.309,89.045c2.986,5.328,4.283,10.368,4.176,15.264c-0.324,4.824-2.592,8.892-5.256,13.716       c-2.773,4.716-7.201,7.812-10.514,14.724c-3.275,6.876-4.5,21.672-8.963,26.316c-4.645,4.464-10.691,4.644-18.432,0.54       c7.488,2.232,12.887,1.26,16.344-2.628c3.383-4.032,1.871-15.264,4.211-21.06c2.27-5.832,6.121-8.316,9.469-13.68       c3.313-5.58,8.316-13.428,10.008-18.972C395.756,97.649,395.539,93.005,393.309,89.045z",
                "duration": 800
            },
            {
                "path": "       M354.859,119.069c0.289,0.432,11.809,4.572,14.725,3.672c2.736-1.26,2.375-9.504,2.123-10.008       c-0.324-0.468-0.898,6.3-3.672,7.38C365.119,121.085,354.572,118.602,354.859,119.069z",
                "duration": 600
            },
            {
                "path": "       M333.799,118.025c0.396,1.188,9.865,5.472,11.594,11.052c1.654,5.508-2.484,17.46-1.584,22.104       c0.791,4.536,5.58,5.364,6.299,5.256c0.576-0.216-2.699-1.944-2.627-6.3c-0.072-4.536,3.348-15.192,2.627-20.016       c-0.791-4.716-4.715-6.552-7.344-8.424C339.92,119.538,333.367,116.837,333.799,118.025z",
                "duration": 600
            },
            {
                "path": "       M361.16,81.162c-0.684-0.324,0.539,9.18,1.584,11.592c1.008,2.304,4.355,3.924,4.211,2.088       C366.523,92.79,361.951,81.558,361.16,81.162z",
                "duration": 600
            },
            {
                "path": "       M381.715,93.257c0.541,1.224,1.836,5.4,1.404,6.984c-0.539,1.512-3.527,3.096-4.104,1.98c-0.648-1.26-0.145-7.812,0.396-9.252       C379.844,91.493,381.031,91.961,381.715,93.257z",
                "duration": 600
            },
            {
                "path": "       M375.92,79.434c0.721,0.756,2.447,3.312,2.557,4.608c-0.109,1.116-1.729,2.988-2.484,2.304       c-0.756-0.828-1.801-5.436-1.764-6.588C374.119,78.605,375.236,78.642,375.92,79.434z",
                "duration": 600
            },
            {
                "path": "       M381.572,77.633c-0.396,0,1.764,2.736,1.764,4.32c-0.145,1.476-2.377,4.464-1.98,4.536c0.324-0.108,4.104-3.312,4.141-4.752       C385.459,80.117,381.932,77.633,381.572,77.633z",
                "duration": 600
            },
            {
                "path": "       M384.92,90.593c-0.252,0.072,2.016,2.88,2.34,4.932c0.18,1.944-1.512,6.588-1.188,6.696c0.252-0.108,2.844-5.004,2.771-6.912       C388.557,93.293,385.172,90.521,384.92,90.593z",
                "duration": 600
            },
            {
                "path": "       M322.352,130.914c-0.469,0.72-5.977,2.304-9.432,5.328c-3.6,2.916-10.369,12.096-11.412,12.564       c-1.045,0.324,2.951-7.128,5.328-10.008c2.375-3.024,5.904-5.904,8.641-7.272C318.068,130.157,322.676,130.085,322.352,130.914       z",
                "duration": 600
            },
            {
                "path": "       M317.637,80.189c-0.469,0.432-11.09-0.504-15.732-0.576c-4.645-0.144-8.965-2.16-11.412-0.216       c-2.412,1.944-2.701,6.624-2.953,11.412c-0.395,4.644,1.26,17.208,0.793,16.308c-0.576-1.152-4.141-17.172-3.744-22.392       c0.359-5.184,2.447-7.668,5.725-8.856c3.059-1.332,8.604-0.108,13.176,0.756C308.061,77.31,317.816,79.613,317.637,80.189z",
                "duration": 600
            },
            {
                "path": "       M329.588,139.589c0.756,0.036,6.264,10.044,7.379,17.388c0.865,7.272-2.482,16.74-1.584,25.776       c0.793,8.892,3.025,16.633,6.842,27.396c3.779,10.727,11.916,25.379,15.803,36.324c3.781,10.727,1.152,14.975,6.84,27.898       c5.689,12.961,24.732,43.633,26.857,48.961c1.871,5.004-9.973-9.936-15.266-18.432c-5.398-8.676-12.275-21.781-16.344-32.652       c-4.068-11.053-4.248-21.709-7.883-32.111c-3.744-10.441-10.621-19.945-14.221-29.484c-3.672-9.504-6.553-18.432-7.381-27.36       c-0.936-9.108,2.27-18.9,2.125-26.316C332.504,149.598,328.904,139.589,329.588,139.589z",
                "duration": 1300
            },
            {
                "path": "       M278,209.609c-1.873-4.391-11.34-15.768-13.68-23.147c-2.305-7.524-2.305-16.02,0-21.06c2.268-5.112,8.027-7.128,13.68-8.964       c5.688-1.908,14.904-3.996,20.016-2.088c4.932,1.764,7.199,5.076,10.008,13.14c2.809,8.136,3.564,23.004,6.84,35.28       c3.025,12.096,6.264,25.057,12.096,37.369c6.014,12.238,21.961,34.775,23.148,35.818c0.9,0.758-12.564-20.807-17.352-30.527       c-4.859-9.791-8.676-17.207-11.592-27.396c-2.916-10.402-3.924-23.723-5.797-33.695c-1.943-9.972-2.484-19.692-5.795-25.272       c-3.457-5.652-8.641-7.632-14.725-8.424c-6.264-0.9-16.271,0.756-22.104,3.168c-5.904,2.376-10.297,5.832-12.637,11.052       c-2.375,5.184-3.564,11.448-1.08,19.476c2.449,8.027,12.529,23.436,15.805,27.9C277.928,216.376,279.729,213.929,278,209.609z",
                "duration": 1400
            },
            {
                "path": "       M245.348,175.914c1.224,0.972-18.792,1.548-28.944-1.044c-10.296-2.844-30.096-13.644-31.608-14.76       c-1.404-1.044,12.996,5.652,23.184,8.424C218.204,171.125,243.764,174.833,245.348,175.914z",
                "duration": 600
            },
            {
                "path": "       M283.795,222.246c-1.547-0.721,9.324,20.879,14.725,28.98c5.4,8.063,8.279,11.734,17.389,18.936       c9,7.057,34.02,21.996,36.324,23.148c2.016,0.898-15.625-10.549-23.186-16.85c-7.486-6.371-14.074-11.447-21.563-20.52       C299.889,246.689,285.236,223.146,283.795,222.246z",
                "duration": 600
            },
            {
                "path": "       M398.023,335.429c-0.611-1.799,12.457,10.297,16.848,14.76c4.428,4.285,8.209,6.805,8.965,11.592       c0.432,4.861-1.729,14.076-5.797,17.354c-4.104,3.096-18.072,2.23-18.432,1.584c-0.359-0.721,12.996-2.521,16.309-5.797       c3.131-3.455,5.543-7.596,2.664-14.221C415.484,354.041,398.637,337.193,398.023,335.429z",
                "duration": 600
            },
            {
                "path": "       M394.352,369.125c1.549-2.734,3.205-5.58,2.629-8.928c-0.686-3.492,2.016-4.715-6.336-11.592       c-8.533-6.984-24.697-17.316-44.209-29.484c-19.799-12.348-53.459-31.5-72.648-43.164       c-19.151-11.592-29.555-18.432-41.075-25.811c-11.52-7.453-19.62-14.941-27.36-18.432c-7.848-3.602-9.684-3.602-18.972-2.629       c-9.36,1.008-19.332,5.904-36.324,8.424c-17.244,2.34-54.324,4.176-65.269,5.797c-10.728,1.619-4.5,3.168,1.044,3.672       c5.544,0.287,20.196-0.686,31.608-1.549c11.376-0.936,23.724-1.619,35.784-3.707c11.952-2.305,26.208-8.244,35.28-8.93       c8.82-0.646,8.676,0.361,17.892,5.258c9.288,4.895,21.924,14.039,37.368,23.688c15.408,9.504,36.217,22.176,54.252,33.156       c17.965,10.908,39.023,23.436,52.633,31.607c13.391,7.955,21.023,11.592,27.898,16.309c6.912,4.535,10.656,8.207,13.178,11.592       c2.23,3.348,1.799,5.219,1.043,8.928c-0.791,3.672-5.508,12.096-5.256,13.176C387.729,377.441,392.695,371.789,394.352,369.125       z",
                "duration": 1800
            },
            {
                "path": "       M82.664,257.525c-0.252,5.977-2.052,20.484-5.256,31.572c-3.42,11.053-11.772,24.084-14.22,34.236       c-2.34,10.008,1.368,19.08,0,25.271c-1.476,5.977-3.384,9.109-8.928,10.512c-5.724,1.225-15.732-3.168-24.768-2.627       c-9.252,0.504-28.152,5.904-29.484,5.795c-1.188-0.252,15.588-5.219,22.14-6.84c6.372-1.764,10.836-3.096,16.308-3.168       c5.4-0.107,12.42,4.105,15.804,2.629c3.24-1.691,2.7-6.191,3.672-12.096c0.828-6.012-0.864-14.328,1.584-23.148       c2.412-8.82,9.36-18.504,12.636-29.484c3.096-11.268,4.5-31.283,6.3-36.863C80.216,247.876,82.736,251.406,82.664,257.525z",
                "duration": 1300
            },
            {
                "path": "       M11.6,350.693c10.116-3.348,17.352-8.063,22.104-14.723c4.608-6.66,4.5-10.332,5.796-24.77       c1.152-14.723-0.684-46.619,1.583-62.1c2.196-15.371,4.068-21.203,12.132-29.988c8.1-8.928,19.512-16.055,36.324-23.184       c16.776-7.164,54.108-17.172,63.684-19.476c9.36-2.484,1.584,1.908-7.38,5.256c-9.216,3.384-31.5,7.704-46.836,14.761       c-15.516,6.982-35.568,16.523-44.748,26.818c-9.144,10.297-7.776,19.766-9.504,34.236c-1.764,14.365-0.396,38.377-1.044,51.049       c-0.756,12.527-0.324,17.244-3.132,23.725c-2.916,6.264-7.992,10.475-13.716,14.184c-5.724,3.707-12.564,6.299-20.52,7.92       L11.6,350.693z",
                "duration": 1300
            },
            {
                "path": "       M45.296,281.753c0.18-0.611,9.648,3.275,13.68,4.717c4.032,1.295,10.008,2.482,10.008,3.168       c-0.252,0.539-7.128,1.836-11.052,0.539C53.864,288.738,45.116,282.365,45.296,281.753z",
                "duration": 600
            },
            {
                "path": "       M355.904,287.009c-0.396,0.18,0.359,8.893,2.123,12.096c1.691,3.061,4.969,3.205,7.885,6.84       c2.844,3.781,8.1,15.445,8.963,15.264c0.648-0.504-2.375-13.318-4.752-17.352c-2.592-4.068-7.596-3.492-10.008-6.336       C357.668,294.605,356.264,286.757,355.904,287.009z",
                "duration": 600
            },
            {
                "path": "       M374.336,332.298c-0.396-0.541,2.664,0.07,4.752-1.08c1.871-1.189,6.371-6.266,6.84-5.797c0.287,0.432-2.232,7.236-4.213,8.461       C379.736,334.96,374.732,332.765,374.336,332.298z",
                "duration": 600
            },
            {
                "path": "       M289.988,111.869c-0.109,0.324,4.031,8.784,9.791,10.8c5.652,1.836,23.939,0.756,24.193,0.504c0-0.288-17.713-0.432-23.4-2.232       C294.813,118.961,290.131,111.582,289.988,111.869z",
                "duration": 600
            },
            {
                "path": "       M284.768,58.697c-0.359,0.288,5.725,3.348,11.305,6.12c5.4,2.772,20.34,10.512,20.916,10.44       c0.324-0.216-12.852-8.568-18.289-11.304C293.229,61.253,285.164,58.625,284.768,58.697z",
                "duration": 600
            }
        ],
        "dimensions": {
            "width": 513,
            "height": 382
        }
    }
};

Kemudian hanya tinggal membuat sebuah halaman web untuk menampilkan animasi tersebut dan meletakan scriptnya

Code:

$(document).ready(function(){
    $("#stylized_yoga_person_ger_03").lazylinepainter({
        'svgData' : pathObj,
        'strokeWidth':2,
        'strokeColor':'#825959',
        'delay':3000
    }).lazylinepainter('paint');
});

ini DEMO dari tulisan ini, semoga bermanfaat

Sumber : http://devilzc0de.org/forum/thread-19527.html