برنامه نویسی

حرکت فریم | مقدمه – قسمت 1

Summarize this content to 400 words in Persian Lang
معرفی

Framer Motion کتابخانه ای است که به شما امکان می دهد به راحتی انیمیشن ها را به برنامه های React خود اضافه کنید. برای افزودن جلوه های انیمیشن مانند انتقال و تعاملات کشیدن استفاده می شود.

ایجاد کننده

این توسط شرکت Framer ایجاد شده است. Framer شرکتی است که ابزارهایی را به طور خاص برای طراحی رابط کاربری (UI) و نمونه سازی توسعه می دهد.

نصب و راه اندازی

Framer از React 18 و نسخه های بالاتر پشتیبانی می کند. برای نصب آن از طریق npm دستور زیر را اجرا کنید:

npm install framer-motion

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کتابخانه Framer Motion هیچ وابستگی ندارد و می توانید با یک بسته واحد شروع به استفاده از آن کنید.

از 10 جولای 2024، Framer Motion تقریباً 3.4 میلیون بارگیری هفتگی در npm و 22700 ستاره در GitHub داشته است که نشان دهنده قدردانی قابل توجه کاربران آن است.

استفاده

در کامپوننت مورد نظر خود می توانید وارد کنید حرکت – جنبش شی از فریمر حرکت کتابخانه و یک جزء حرکتی برای هر عنصر HTML یا SVG اضافه کنید.

import { motion } from “framer-motion”;

export default function App() {
return motion.div />;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

معرفی

Framer Motion کتابخانه ای است که به شما امکان می دهد به راحتی انیمیشن ها را به برنامه های React خود اضافه کنید. برای افزودن جلوه های انیمیشن مانند انتقال و تعاملات کشیدن استفاده می شود.

ایجاد کننده

این توسط شرکت Framer ایجاد شده است. Framer شرکتی است که ابزارهایی را به طور خاص برای طراحی رابط کاربری (UI) و نمونه سازی توسعه می دهد.

نصب و راه اندازی

Framer از React 18 و نسخه های بالاتر پشتیبانی می کند. برای نصب آن از طریق npm دستور زیر را اجرا کنید:

npm install framer-motion
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کتابخانه Framer Motion هیچ وابستگی ندارد و می توانید با یک بسته واحد شروع به استفاده از آن کنید.


توضیحات تصویر

از 10 جولای 2024، Framer Motion تقریباً 3.4 میلیون بارگیری هفتگی در npm و 22700 ستاره در GitHub داشته است که نشان دهنده قدردانی قابل توجه کاربران آن است.

استفاده

در کامپوننت مورد نظر خود می توانید وارد کنید حرکت – جنبش شی از فریمر حرکت کتابخانه و یک جزء حرکتی برای هر عنصر HTML یا SVG اضافه کنید.

import { motion } from "framer-motion";

export default function App() {
  return motion.div />;
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا