همان‌طور که می‌دانید پشتیبانی ادوبی از فلش در گنو/لینوک […] ادامه مطلب ←

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

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]);
   }...

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

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

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

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

حتما همه با نرم افزار Adobe Acrobat Reader، در زمینه نمایش و مشاهده و خواندن داکیومنت و مستندات و فایلهای با قالب PDF در سیستم عامل مایکروسافت ویندوز آشنایی دارید. عزیزانی که با سیستم عامل لینوکس بویژه از توزیع اوبونتو استفاده می کنند شاید بخواهند تا برنامه ای همچون Adobe … ادامه مطلب ←

وقتی شرکت Adobe ادامه توسعه نسخه لینوکس فلش را متوقف کرد بسیاری از کاربران نرم افزارهای آزاد از اینکه برای دیدن ویدیو های فلش در سایت های مختلف (مانند Youtube) دست به دامن مرورگر غیر آزاد کروم گوگل شوند ابراز نگرانی کردند اما دقیقا بعد از اعلام این خبر Lightspark که در آن زمان توسعه کند و ضعیفی داشته تغییر روند داده و نسخه های جدید را با سرعت و … ادامه مطلب ←

در گذشته، W3C، کسی که مسئول استانداردسازی تکنولوژی‌های وب است، هزینه مالی خود را از طریق دریافت مبالغ از اعضا تامین می‌کرد. اما ظاهرا هم‌اکنون اولین اسپانسرهای خود را پیدا کرده است. گوگل ۱۰۰,۰۰۰ دلار برای وضعیت «اسپانسر طلایی» می‌پردازد و ادوبی ۵۰,۰۰۰ دلار بابت «اسپانسر نقره‌ای». با توجه به آخرین فهرست مبالغ، هر دو شرکت به W3C هزینه عضویتی معادل ۶۸,۵۰۰ دلار برای هر سال پرداخت می‌کنند. این سازمان … ادامه مطلب ←

Nitobi، سازنده فریم‌ورک موبایلِ PhoneGap برای برنامه‌های HTML5، توسط ادوبی خریداری می‌شود. خبر این معامله در کنفرانس MAX2011 اعلام شد و ابزار جدیدی را در اختیار شرکت ادوبی که سعی دارد به سمت استفاده‌ی پایه از HTML5 در برنامه‌های آینده‌اش برود، داده است. PhoneGap به توسعه‌دهندگان اجازه ساخت برنامه‌های موبایل با HTML5 ،CSS و JavaScript و گسترش آنها در اندروید، بلک‌بری، iOS، ویندوز فون، سیمبیان و WebOS را می‌دهد. اواخر … ادامه مطلب ←