مارتین لوتر کینگ در بخش سوم اتوبیوگرافی خود، دربارهی ابرانسان نیچه این گونه میگوید: "در نظر نیچه ابرانسان کسی است که میخواهد انسان را چنان شگفت زده کند که انسان بوزینه را شگفت زده کرد."
اسنپ.اسویجی را دمیتری بارانوفسکی طراحی کرده است، طراح رافائلجیاس. دمیتری از بچههای خط ادوبیست.
قبل از شروع چند دموی جالب ببینید.
خب، برای شروع میتونیم مخزن اسنپ رو از گیتهاب دریافت کنیم و فایل dist/snap.svg-min.js رو توی یه فایل اچتیامال فراخوانی کنیم.
یا میتونیم فقط خود فایل رو دریافت کنیم.
برای استفاده راحتتر از اسنپ میتونیم یه متغییر واسه سلکتور تعریف کنیم.
var s = Snap("#svg");نکته:کد خودمون رو باید توی تابع window.onload قرار میدیم. به این صورت:
window.onload = function(){
var s = Snap("#svg");
};نیاز هست که توی body صفحمون یه تگ svg قرار بدیم و id اون رو برای مثال بذاریم svg که بتونیم با سکلتورمون باهاش کار کنیم.
رسم اولین شکل
اولین شکلی که میخوایم بکشیم یه دایرس. اینجوری میکشیمش:
window.onload = function(){
var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
};
نتیجه رو میتونید دریافت کنید و ببینید.
خب، یکم رنگ کنیم دایرمون رو؟ این چند خط که صفات معمولی svg هستن رو به کدمون اضافه میکنیم. این صفات به ترتیب رنگ شکل، رنگ دیواره و سایز دیواره هستن. همونطور که مشخصه از element.attr برای دادن صفت به شکلمون استفاده میکنیم.
bigCircle.attr({
fill: "#bada55",
stroke: "#000",
strokeWidth: 5
});
انیمیت کردن
با استفاده از تابع animate میتونیم. به این شکل:
bigCircle.animate({r: 50}, 1000);
آرگومان دوم هم زمان هست که بر حسب میلیثانیه سنجیده میشه.
انیمیت به این صورت اتفاق میفته که شعاع دایره در عرض یه ثانیه از 150 به 50 تغییر میکنه.
نتیجهی کار تا به اینجا رو میتونید دریافت کنید و ببینید.
تابع animate آرگومانهای دیگهای هم داره. برای مثال دوتا از اونا توابع easing و callback هستن.
توابع easing توابعی هستن که برای انیمیت کردن استفاده میشن. در اسنپ تابعی وجود داره به اسم mina که شامل انیمیتهای از-پیش-آمادهیی هست که برای سهولت کار در اختیار ما قرار گذاشته شدن. مثلن تابع elastic یکی از تابعهای موجود در minaست و برای ما انیمیت کشسانی ایجاد میکنه. استفاده از mina به این صورته:
bigCircle.animate({r: 50}, 1000,mina.elastic);
bigCircle.animate({cy: 200}, 1000,mina.bounce);
وارد کردن فایل svg
ما میتونیم فایل svg مورد نیاز خودمون رو وارد کنیم و باهاش کار کنیم. مثلن یه ابر. به این شکل عمل میکنیم:
Snap.load('img/cloud.svg', function (f){
s.append(f);
});
var cloudsvg = s.select("#cloudsvg");
cloudsvg.animate({transform: "t" + (1500)}, 50000);
توی خط اول ما یه id سلکت کردیم، cloudsvg که اون رو توی فایل svgمون از قبل تعریف کردیم و در واقع idی ابرمونه.
توی خط بعد از تابع animate استفاده کردیم و میخوایم با خواصیت transform کار کنیم. اسنپ از تابع matrix برای اعمال انیمیت استفاده می کنه. پیشنهاد میدم این مقاله رو بخونید.
این که چرا t رو اینجا نوشتیم علتش اینه که توی اسنپ نمایندهی translate هست. البته هنوز توی داکیومنت اسنپ چیزی از این مخففها گفته نشده ولی با رجوع به فایل این قسمت رو دیدم:
if (command == "t" && tlen == 2){
m.translate(t[1], 0);
} else if (command == "t" && tlen == 3) {
if (absolute) {
x1 = inver.x(0, 0);
y1 = inver.y(0, 0);
x2 = inver.x(t[1], t[2]);
y2 = inver.y(t[1], t[2]);
m.translate(x2 - x1, y2 - y1);
} else {
m.translate(t[1], t[2]);
}...
توی گیتهاب میتونید بهتر متوجه این موضوع بشید.
با خوندن داکیومنت اسنپ و تسلط روی میتونید کارای خیلی جالبی انجام بدید.
در اینجا هم آموزشهای ابتداییی سایت اسنپ رو میتونید ببینید.
این رو هم میتونید آزمایش کنید.
من با چیزایی که کار کردیم اینو درست کردم:
فایلها رو میتونید از اینجا دریافت کنید و ببینید.
