سون لرن • آموزش

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون 3 ترفند نرم افزار Adobe Illustrator بهتون آموزش داده میشه که ساخت انیمیشن ها با استفاده از SVG رو بهبود میبخشه.xa0برای شروع وارد سایتxa0Stroke Animationxa0بشین. توضیحات مربوط به کتابخانه Stroke Animation همونطور که میدونین با استفاده از نرم افزار Adobe Illustrator میتونیم فایلهای SVG رو به وجود بیاریم و از اونا خروجی یا Export بگیریم. در این آموزش تعدادی ترفند قرار داده شده که با استفاده از اونا میتونین انیمیشن های بهتری رو با استفاده از SVG ...

در این قسمت میخوام یک کد (xa0Ocean ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Ocean همونطور که دیدید تعدادی سه ضلعی وجود دارد که در کنار یکدیگر یک دلفین رو به وجود آوردند و بعد از اون به زیبایی تبدیل به یک متن Ocean میشن. این سه ضلعی ها با استفاده از SVG به وجود اومدن و با استفاده از ابزار Anime.js اونا رو بصورت انیمیشنی در میاریم. برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید. برای اینکار بصورت تصادفی یکی از المنتهای SVG رو انتخاب میکنیم و ...

در این قسمت میخوام یک کد (xa0Spinning circles animation ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Spinning circles animation همونطور که دیدید تعدادی دایره وجود دارند و به زیبایی در حال چرخش هستند و حالت جالبی رو به وجود آوردن. این کار با استفاده از CSS Gridxa0 و CSS Animation به وجود آمده است و میتونین از اون ایده بگیرید. برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که م...

در این قسمت میخوام یک کد (xa0CSS Neon Wave ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد CSS Neon Wave همونطور که دیدید یک افکت موجی زیبا با استفاده از کدهای CSS و HTML ساخته شده و میتونین با مشاهده کدهای اون از این نمونه کد ایده بگیرید. المنت ها با استفاده از Flexbox در کنار یکدیگر قرار گرفته اند و با استفاده از CSS Animation بصورت موجی در میان. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. ام...

در این قسمت میخوام یک کد (xa0animating svg polygons ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد animating svg polygons در بالا و سمت چپ صفحه 4 لینک وجود داره که با کلیک بر روی اونا، تصاویر انیمیشنی در سمت راست نمای...

در این مطلب میخوام کتابخانه ای رو بهتون معرفی کنم که با استفاده از اون میتونین انیمیشن های ساخته شده در After Effects رو به راحتی و با کیفیت بالا در هرxa0 اپلیکیشن موبایلی که بخواید قرار بدین. برای شروع وارد سایتxa0Lottiexa0بشی...

در این قسمت میخوام یک کد ( Elastic Burger Animationxa0) جالب رو در اختیارتون بزارم. توضیحات مربوط به کد Elastic Burger Animation همونطور که دیدید یک آیکون همبرگری قرار گرفته و زمانی که بر روی اون هاور میکنید به زیبایی عکس العمل نشون میده و یک انیمیشن ف...

در این قسمت میخوام یکxa0کدxa0( Lonely Planetxa0) جالب رو در اختیارتون بزارم. توضیحات مربوط Lonely Planet همونطور که دیدید یک سیاره بزرگ ثابت قرار داده شده و یک سیاره کوچک به دور اون میچرخه. زمانی که سیاره کوچک در پشت سیاره بزرگ قرار میگیره، سیاره بزرگ نارا...

{ const config = { in: { base: { duration: 1, delay: 100, easing: 'linear', opacity: 1, translateY: { value: [-40,0], duration: 800, easing: 'easeOutElastic' } }, path: { duration: 600, easing: 'easeInOutSine', strokeDashoffset: [anime.setDashoffset, 0], fill: { value: '#141514', duration: 400, delay: 500, easing: 'linear' } }, ...

{ const config = { in: { base: { duration: 1, delay: 100, easing: 'linear', opacity: 1 }, path: { duration: 1000, easing: 'easeOutExpo', delay: function(t,i) { retu i*150; }, scale: [0,1], translateY: function(t,i,c) { retu i === c-1 ? ['50%','0%'] : 0; }, rotate: function(t,i,c) { retu i === c-1 ? [90,0] : 0; } }, content: { ...

{ const config = { in: { base: { duration: 1, delay: 50, easing: 'linear', opacity: 1 }, path: { duration: 800, delay: 100, easing: 'easeOutElastic', delay: function(t,i) { retu i*20; }, scale: [0,1], }, content: { duration: 300, delay: 250, easing: 'easeOutExpo', scale: [0.7,1], opacity: { value: 1, easing: 'linear', durat...

{ const config = { in: { base: { duration: 500, easing: 'easeOutQuint', translateY: [100,0], opacity: { value: 1, duration: 50, easing: 'linear' } }, shape: { duration: 350, easing: 'easeOutBack', scaleY:xa0xa0{ value: [1.3,1], duration: 1300, easing: 'easeOutElastic', elasticity: 500 }, scaleX: { value: [0.3,1], duration: 1300, ...

//jQuery is required to run this code$( document ).ready(function() {xa0xa0xa0xa0scaleAnimationContainer();xa0xa0xa0xa0initBannerAnimationSize('.animation-container .animation img');xa0xa0xa0xa0initBannerAnimationSize('.animation-container .mask');xa0xa0xa0xa0initBannerAnimationSize('.animation-container video');xa0xa0xa0xa0$(window).on('resize', function() {xa0xa0xa0xa0xa0xa0xa0xa0scaleAnimationContainer();xa0xa0xa0xa0xa0xa0xa0xa0scaleBannerAnimationSize('.animation-...

{ const config = { in: { base: { duration: 1, easing: 'linear', opacity: 1 }, path: { duration: 800, easing: 'easeOutQuint', rotate: [0,90], opacity: { value: 1, duration: 200, easing: 'linear' } }, content: { duration: 600, easing: 'easeOutQuint', translateX: [50,0], opacity: { value: 1, duration: 100, easing: 'linear' } ...

{ const config = { in: { base: { duration: 100, easing: 'linear', opacity: 1 }, deco: { duration: 500, easing: 'easeOutExpo', scaleY: [0,1] }, content: { duration: 125, easing: 'easeOutExpo', delay: function(t,i) { retu i*15; }, easing: 'linear', translateY: ['50%','0%'], opacity: [0,1] }, trigger: { translateX: [ {value: '30%', du...

{ const config = { in: { base: { duration: 400, easing: 'easeOutQuint', scaleX: [1.2,1], opacity: { value: 1, easing: 'linear', duration: 50 } }, path: { duration: 600, easing: 'easeOutQuint', d: 'M 92.4,79 C 136,79 156,79.1 200,79.4 244,79.7 262,79 308,79 354,79 381,111 381,150 381,189 346,220 308,221 270,222 236,221 200,221 164,221 130,222 92.4,221 54.4...

{ const config = { in: { base: { duration: 800, easing: 'easeOutElastic', translateY: [60,0], scale: [0.5,1], opacity: { value: 1, easing: 'linear', duration: 100 } }, path: { duration: 1200, delay: 50, easing: 'easeOutElastic', elasticity: 700, d: 'M 22,74.2 22,202 C 22,202 82,202 103,202 124,202 184,202 184,202 L 200,219 216,202 C 216,202 274,2...

{ const config = { in: { base: { duration: 400, easing: 'easeOutExpo', scale: [0.5,1], opacity: { value: 1, easing: 'linear', duration: 100 } }, path: { duration: 900, easing: 'easeOutElastic', d: 'M 33.5,31 C 33.5,31 145,31 200,31 256,31 367,31 367,31 367,31 367,110 367,150 367,190 367,269 367,269 367,269 256,269 200,269 145,269 33.5,269 33.5,269 33.5,26...

{ const config = { in: { base: { duration: 600, easing: 'easeOutQuint', scale: [0,1], rotate: [-180,0], opacity: { value: 1, easing: 'linear', duration: 100 } }, content: { duration: 300, delay: 250, easing: 'easeOutQuint', translateY: [20,0], opacity: { value: 1, easing: 'linear', duration: 100 } }, trigger: { duration: 300...

{ const config = { in: { base: { duration: 200, easing: 'easeOutQuad', rotate: [35,0], opacity: { value: 1, easing: 'linear', duration: 100 } }, content: { duration: 1000, delay: 50, easing: 'easeOutElastic', translateX: [50,0], rotate: [10, 0], opacity: { value: 1, easing: 'linear', duration: 100 } }, trigger: { translateX:...