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

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

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

در این قسمت میخوام یک کد (Spiing circles animation ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Spiing circles animation همونطور که دیدید تعدادی دایره وجود دارند و به زیبایی در حال چرخش هستند و حالت جالبی رو به وجود آوردن. این کار با استفاده از CSS Grid و CSS Animation به وجود آمده است و میتونین از اون ایده بگیرید. برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source attractive beauty code CSSu200f idea inspire Spiing circles animation ...

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

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

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

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

در این قسمت میخوام یککد( Lonely Planet) جالب رو در اختیارتون بزارم. توضیحات مربوط 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:{ 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() {scaleAnimationContainer();initBaerAnimationSize('.animation-container .animation img');initBaerAnimationSize('.animation-container .mask');initBaerAnimationSize('.animation-container video');$(window).on('resize', function() {scaleAnimationContainer();scaleBaerAnimationSize('.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' } ...