این جلسه به خاطر مشکل اتصال لپتاپ به پروژکتور کمی با تاخیر آغاز شد. در ابتدا محمد صائب ارائه ای در رابطه با کار تیمی آمده کرده بود. او ابتدا درباره ی اینکه کارتیمی چیست و چه تفاوتی مابین کار تیمی و گروهی وجود دارد صحبت کرد، سپس شروع به مقایسه رهبر و رئیس کرد […] ادامه مطلب ←

مارتین لوتر کینگ در بخش سوم اتوبیوگرافی خود، درباره‌ی ابرانسان نیچه این گونه می‌گوید: “در نظر نیچه ابرانسان کسی است که می‌خواهد انسان را چنان شگفت زده کند که انسان بوزینه را شگفت زده کرد.“

Snap.svg یک فریم‌ورک جاوااسکریپت است که می‌تواند برای طراحی و انیمیت یا پویانمایی گرافیک‌هایی بر پایه‌ی svg مورد استفاده قرار گیرد.

اسنپ.اس‌وی‌جی را دمیتری بارانوفسکی طراحی کرده است، طراح رافائل‌جی‌اس. دمیتری از بچه‌های خط ادوبی‌ست.

قبل از شروع چند دموی جالب ببینید.

در ابتدا

خب، برای شروع می‌تونیم مخزن اسنپ رو از گیت‌هاب دریافت کنیم و فایل 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);
};

در تابع circle که برای رسم دایره استفاده میشه، عدد اول x، عدد دوم y و عدد سوم شعاع دایرمونه. رنگ دایرمون به صورت پیش‌فرض سیاهه.
نتیجه رو می‌تونید دریافت کنید و ببینید.

خب، یکم رنگ کنیم دایرمون رو؟ این چند خط که صفات معمولی svg هستن رو به کدمون اضافه می‌کنیم. این صفات به ترتیب رنگ شکل، رنگ دیواره و سایز دیواره هستن. همونطور که مشخصه از element.attr برای دادن صفت به شکلمون استفاده می‌کنیم.

bigCircle.attr({
	fill: "#bada55",
	stroke: "#000",
	strokeWidth: 5
});

دایرمون اینجوری میشه:

انیمیت کردن
با استفاده از تابع animate می‌تونیم. به این شکل:

bigCircle.animate({r: 50}, 1000);

برای آرگومان اول صفت یا صفاتی رو قرار میدیم که قراره انیمیت بشن. که در بند بالا ما r یا همون شعاع رو برای این کار انتخاب کردیم.
آرگومان دوم هم زمان هست که بر حسب میلی‌ثانیه سنجیده می‌شه.
انیمیت به این صورت اتفاق میفته که شعاع دایره در عرض یه ثانیه از 150 به 50 تغییر می‌کنه.
نتیجه‌ی کار تا به اینجا رو می‌تونید دریافت کنید و ببینید.

تابع animate آرگومان‌های دیگه‌ای هم داره. برای مثال دوتا از اونا توابع easing و callback هستن.
توابع easing توابعی هستن که برای انیمیت کردن استفاده میشن. در اسنپ تابعی وجود داره به اسم mina که شامل انیمیت‌های از-پیش-آماده‌یی هست که برای سهولت کار در اختیار ما قرار گذاشته شدن. مثلن تابع elastic یکی از تابع‌های موجود در minaست و برای ما انیمیت کشسانی ایجاد میکنه. استفاده از mina به این صورته:

bigCircle.animate({r: 50}, 1000,mina.elastic);

میتونیم یه خط دیگه هم اضافه کنیم و توی اون روی y کار کنیم. صفت cy صفتیه که توی svg برای کار روی y استفاده میشه. پس به این صورت عمل می کنیم:

bigCircle.animate({cy: 200}, 1000,mina.bounce);

از تابع 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]);
   }...

توی گیت‌هاب میتونید بهتر متوجه این موضوع بشید.

با خوندن داکیومنت اسنپ و تسلط روی می‌تونید کارای خیلی جالبی انجام بدید.
در اینجا هم آموزش‌های ابتدایی‌ی سایت اسنپ رو می‌تونید ببینید.
این رو هم می‌تونید آزمایش کنید.

من با چیزایی که کار کردیم اینو درست کردم:

فایل‌ها رو می‌تونید از اینجا دریافت کنید و ببینید.
ادامه مطلب ←

چند روز پیش یه سمینار در باره svg داشتم. البته اونقدر که برای اسلاید وقت گزاشتم،  برای نظم مطالب وقتی نزاشتم و سمینار که تموم شد به این نتیجه رسیدم که کلی از مطالب را نگفتم:D  ولی این مدل اسلاید … Continue reading → ادامه مطلب ←