animata

Ручная анимация вручную анимации и визуальные эффекты, полученные по всему Интернету?

Построен с

Оглавление

1. Введение
   • Что такое анимата?
   • Что не анимата?
2. Начиная
   • Требования
   • Инструкции по настройке
     • Структура папок (рекомендуется)
     • Установить зависимости
     • Создать функции утилиты
3. Внося
4. Авторы
5. Лицензия

Введение

Что такое анимата?

Добро пожаловать в Animata, бесплатную коллекцию анимаций, эффектов и взаимодействий с открытым исходным кодом, которые вы можете легко интегрировать в свой проект с простой копией и вставкой. Анимации создаются с использованием Tailwindcss и React.js, поэтому их можно легко настроить в соответствии с дизайном вашего проекта.

Что не анимата?

Animata-это не полноценная библиотека пользовательского интерфейса, такая как материал-UI или чакра-UI. Это коллекция анимации и эффектов, которые вы можете использовать для улучшения дизайна вашего проекта. Вы также можете использовать Animata вместе с другими библиотеками пользовательского интерфейса или системами дизайна (вам нужно будет настроить Tailwindcss для этого).

Начиная

Вместо этого вам не нужно устанавливать его как зависимость, вы можете просто скопировать и вставить код, как Shadcn/UI, в ваш проект. Тем не менее, вам все еще нужно установить другую зависимость, которая нуждается в коде.

Требования

• Tailwindcss: для стиля.
• Framer Motion (необязательно): для сложных анимаций.
• Значки Lucide или значки Radix (необязательно): используйте для значков или замените любую другую библиотеку значков или SVG.

Инструкции по настройке

Структура папок (рекомендуется)

/
  /components
  /ui

Где / является корнем вашего проекта, /components - это то, где вы сохраняете свои компоненты, и проект был настроен с использованием путей в файле tsconfig.json .

{
  "compilerOptions" : {
    "baseUrl" : " . " ,
    "paths" : {
      "@/*" : [ " ./* " ]
    }
  }
}

Установить зависимости

Установите требуемые зависимости, если вы еще этого не сделали:

npm install tailwind-merge clsx lucide-react tailwindcss-animate

Добавить tailwindcss-animate в плагины в файле tailwind.config.js :

 module . exports = {
  plugins : [ require ( "tailwindcss-animate" ) ] ,
} ;

Создать функции утилиты

Создайте файл utils.ts в папке Libs и вставьте следующий код:

 import { type ClassValue , clsx } from "clsx" ;
import { twMerge } from "tailwind-merge" ;
 
export function cn ( ... inputs : ClassValue [ ] ) {
  return twMerge ( clsx ( inputs ) ) ;
} 

ПРИМЕЧАНИЕ

1. Если вы видите что -то, что было импортировано, но не упомянуто в документации, то это зависимость, которую вам необходимо установить. Если он начинается с @/, то это компонент Animata, иначе это внешняя зависимость. В таком случае вы можете отправить пиар для обновления документации.
2. Если что -то не работает, документы, вероятно, пропускают обновления tailwind.config.js. Вы можете найти записи, которые были добавлены в Tailwind.config.js в исходном коде Animata. Вы можете создать проблему или отправить PR для обновления документации.

Внося

Вклад в Animata всегда приветствуются!

• ? Получить запросы и? Звезды всегда приветствуются.
• Прочитайте наше руководство по внесению вклад, чтобы начать работу или найти нас в Discord, мы потратим время, чтобы направить вас.

Авторы

Сердечная благодарность распространяется на каждого из вас за ваш удивительный вклад в этот проект. Ваша тяжелая работа, творчество и преданность делу были не чем иным, как невероятным. Будь то кодирование, отладка, тестирование или обмен идеями, все усилия имели существенное значение.

Лицензия

Этот проект лицензирован по лицензии MIT. Смотрите файл лицензии для получения подробной информации.