Герой анимации в реакции с реактивным макетом

Привет Devs.

Несколько дней назад я опубликовал свой первый пакет React Package, и я хочу показать вам, как его использовать.

Реакция – макет

Эта библиотека помогает вам анимировать компоненты из двух различных реагированных деревьев. Другими словами, создавать герой анимации. Он совместим с современными браузерами и использует элемент. Элемент. Электрический () веб-API.

Давайте построим один из моих любимых примеров, фотогалерея.

Это окончательный результат: нажмите на любую фотографию, чтобы увидеть его в действии.

Пример галереи

Выглядит красиво, верно? Давайте посмотрим на то, как просто воссоздать этот пример.

1 – Создать фотографии заполнителя

Благодаря Unsplash для этих удивительных фотографий.

// PhotosDB.js
export default [
  {
    photo:
      "https://images.unsplash.com/photo-1474313438662-85ce389c174a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=50"
  },
  {
    photo:
      "https://images.unsplash.com/photo-1521170665346-3f21e2291d8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=50"
  },
  {
    photo:
      "https://images.unsplash.com/photo-1520512202623-51c5c53957df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=50"
  },
];

2 – Давайте обернуть ваше приложение с провайдером MotionLayout

Поставщик макета движения несет ответственность за предоставление государственного управления.

// App.js
...
export default function App() {
  return (
    
      
        
          
            
          
          
            
          
        
      
    
  );
}

3 – Создание компонента фотографий

Поскольку это отдельный экран, мы уничтожим его с помощью MotionsCreen для очистки зарегистрированных элементов при отказании этого экрана.

import { MotionScreen } from 'react-motion-layout';
export default function Photos() {
  return (
    
      
         {PhotosDB.map((item, id) => (
           
         ))}
      
    
  );
}

4 – единое фото предмета

Каждый предмет будет обернутым с помощью движения. Motionscene – это компонент, содержащий распределения.

Распределения являются компонентами, которые мы будем оживлять. У них должен быть уникальный ключ под названием Animationkey, мы используем этот ключ, чтобы найти соответствующий деформатиент при изменении представлений.

Motionscene принимает свойство OnClick, в этом случае мы используем HONTRATION CLONESTION, который запускает анимацию, а затем изменит маршрут с использованием крюка истории, предоставляемый React-Marce-DOM.

...
import { useMotion, MotionScene, SharedElement } from 'react-motion-layout';

// PhotoItem.js
export default function ItemComponent({ item, id }) {
  const history = useHistory();
  const withTransition = useMotion(`photo-${id}`);
  const callback = useCallback(() => history.push(`/photo/${id}`), [
    history,
    id
  ]);

  return (
    
      
        
      
    
  );
}

5 – Индивидуальная фотография

Вид сюжета обернут движущими экранами, поскольку он представляет собой один экран. И, конечно же, он может содержать более одной сцены.

Поскольку это всего лишь одна сцена, мы также обертываем его с помощью Motionscene, когда навигация, эти сцены будут совпадать и пакет с поиском объявленных ChareedComponents и соответствует их использованию его клавиш. Затем он выполнит анимацию.

...
import { useParams } from "react-router-dom";
import PhotosDB from "./PhotosDB";

import { MotionScene, MotionScreen, SharedElement } from "react-motion-layout";

export default function Photo() {
  const { photoId } = useParams();
  const item = PhotosDB[photoId || 0];

  return (
    
      
        
          
        
      
    
  );
}

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

Пример с использованием текста и изображений

Пример чата

Документы макета движения

Вы можете начать здесь:

Гадость

Спасибо.