Важная информация
Показано с 1 по 2 из 2

Тема: Как сделать анимацию переключения картинки

  1. #1 Как сделать анимацию переключения картинки 
    Новичок
    Регистрация
    19.12.2020
    Сообщений
    6
    Сказал(а) спасибо
    0
    Поблагодарили 1 раз в 1 сообщении
    Доброго времени суток!

    Я только учусь и поэтому прошу сильно не ругать за возможные глупости!

    Делаю учебный проект интернет магазина на React.js + Redux, так вот сделал я компонент по типу слайдера и выглядит он примерно вот так:


    работает он следующим образом - при нажати на круглую кнопку меняется картинка.

    Реализовал я это так - круглые кнопки рендерятся автоматически и их количество зависит от количества картинок, а картинки в свою очередь загружаются с json-server(a) в виде ссылок на wampi и сохраняются в Redux, так же в Redax хранится активный индекс картинки которая должна быть показана, а этот индекс меняется при нажатии на одну из круглых кнопок из-за чего в свою очередь меняется картинка.

    А моя проблема заключается в том, что я хочу, чтобы при переключении изображения она анимировалась.

    Прошу помочь с данной проблемой, дать направления для поиска решения или похожие готовые решения.

    Готовые библиотеки желательно не предлагать (но можно), хочу решить проблему именно в таком виде как сейчас.


    Пытался по разному анимировать, но максимум, что у меня получалось - это анимация первого изображения при обновлении страницы.

    ниже приведу код компонента:

    в пропсах компонента приходят следующие данные:
    • promoItems - приходит массив с объектами такого типа
      Код :
      [      
             {
                  "id": 0,
                  "promoURL": "https://ic.wampi.ru/2021/07/24/promo_1.png"
              },
              {
                  "id": 1,
                  "promoURL": "https://ic.wampi.ru/2021/07/24/promo_2.jpg"
              },
              {
                  "id": 2,
                  "promoURL": "https://ic.wampi.ru/2021/07/24/promo_3.jpg"
              }
      ]
    • onClickActivePromo - приходит функция меняющая активный индекс картинки
    • activeIndex - активный индекс который хранится в Redux и меняется после нажатия круглой кнопки и вызова функции выше



    JavaScript Code:
    1.  
    2. import React from 'react';
    3. import PropTypes from 'prop-types';
    4.  
    5. function DiscountsBanners({promoItems, onClickActivePromo, activeIndex}) {
    6.   const promoImgArr = promoItems.map((obj) => obj.promoURL);
    7.   const promoImg = promoImgArr[activeIndex];
    8.  
    9.   const onSelectActivePromo = (index) => {
    10.     onClickActivePromo(index);
    11.   };
    12.   return (
    13.     <section className='discounts-bunners'>
    14.       <h2 className='visually-hidden'>Баннеры проходящих акций и скидок</h2>
    15.  
    16.       <ul>
    17.         <li className='discounts-bunners__bunner-item'>
    18.           <img
    19.             className='discounts-bunners__bunner-mob'
    20.             src={promoImg} alt=''/>
    21.         </li>
    22.         <li className='discounts-bunners__bunner-item'>
    23.           <img
    24.             className='discounts-bunners__bunner-desktop'
    25.             src={promoImg} alt=''/>
    26.         </li>
    27.       </ul>
    28.  
    29.       <div className='discounts-bunners__toggles-wrapper'>
    30.         <ul className='discounts-bunners__toggles'>
    31.           {
    32.             Array(promoItems.length)
    33.                 .fill(0)
    34.                 .map((_, index) =>
    35.                   <li
    36.                     key={index}
    37.                     className={
    38.                       activeIndex === index ?
    39.                       `discounts-bunners__toggle
    40.                       discounts-bunners__toggle_current` :
    41.                       'discounts-bunners__toggle'
    42.                     }
    43.                     onClick={() => onSelectActivePromo(index)} >
    44.                   </li>,
    45.                 )
    46.           }
    47.         </ul>
    48.       </div>
    49.     </section>
    50.   );
    51. }
    52.  
    53. export default DiscountsBanners;
    54.  
    55. DiscountsBanners.propTypes = {
    56.   promoItems: PropTypes.array.isRequired,
    57.   onClickActivePromo: PropTypes.func.isRequired,
    58.   activeIndex: PropTypes.number.isRequired,
    59. };
    Ответить с цитированием  
     

  2. #2  
    Новичок
    Регистрация
    19.12.2020
    Сообщений
    6
    Сказал(а) спасибо
    0
    Поблагодарили 1 раз в 1 сообщении
    На данный момент данную проблему я решил все-таки с помощью библиотеки, хоть и не хотел таким образом ее решать, но результат меня в принципе удовлетворил полностью, так как работает слайдер именно так как я планировал.

    Применил я библиотеку "Swiper", единственное пришлось вручную менять стили переключателей и анимаций под свой проект, путем подключения к библиотеке своих кастомных файлов стилей, что кстати сделать довольно легко, работа с библиотекой довольно простая, относительно хорошая документация и понятные Демо-примеры готовых слайдеров с кодом для различных фреймворков, мне понравилась. Пытался еще одну библиотеку применить, правда забыл название, даже пример в документации полностью соответствовал моим потребностям, но почему то он у меня не работал, даже дефолтный пример из документации никак не хотел работать, хотя вроде делал все согласно инструкций из этой документации.

    P.S. Без применения библиотек, как я и хотел, я подумаю сделать, ради собственного интереса и нестандартной на данный момент для меня задачи, но скорее всего не в ближайшее время, так как в данный момент у меня другие цели и их достижение занимает все мое доступное время и силы.

    Всем спасибо!
    Ответить с цитированием  
     

Информация о теме
Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Похожие темы

  1. Прикольные картинки
    от Konstantin Shcherba в разделе Юмор
    Ответов: 101
    Последнее сообщение: 13.11.2018, 14:50
  2. Поворот картинки в яваскрипт
    от Tana в разделе JavaScript
    Ответов: 1
    Последнее сообщение: 17.10.2016, 10:27
  3. Ответов: 5
    Последнее сообщение: 17.06.2014, 23:40
  4. Ответов: 9
    Последнее сообщение: 18.10.2012, 11:31
  5. Ответов: 1
    Последнее сообщение: 06.10.2012, 20:00
Ваши права
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •