Когда ViewPager переходит к следующему слайду, предыдущий слайд должен уменьшать значение непрозрачности для каждого движения. - PullRequest
Новая
       67

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

1 голос
/ 19 июня 2020

Мое требование: когда ViewPager щелкните и перетащите изображение для следующего изображения, тогда предыдущее изображение должно уменьшать непрозрачность при каждом перетаскивании. Это мой код codeandbox .

Это изображение - небольшой пример моего требования.

ViewPager

import React, { useRef } from 'react'
import clamp from 'lodash-es/clamp'
import { useSprings, animated } from 'react-spring'
import { useDrag } from 'react-use-gesture'
import './styles.css'

function Viewpager() {
  const index = useRef(0)

  const [props, set] = useSprings(alphabets.length, i => ({
    x: i * window.innerWidth,
    scale: 1,
    opacity: 1,
    display: 'block'
  }))
  const bind = useDrag(({ active, down, movement: [mx], direction: [xDir], distance, cancel }) => {
    set(i => {
      if (i < index.current - 1 || i > index.current + 1) return { display: 'none' }
      const x = (i - index.current) * window.innerWidth + (down ? mx : 0)
      const scale = down ? 1 - distance / window.innerWidth / 2 : 1
      const opacity = active ? distance * 0.01 : 1
      return { x, scale, opacity, display: 'block' }
    })
  })

  return props.map(({ x, display, scale, opacity }, i) => (
    <animated.div
      {...bind()}
      key={i}
      style={{
        opacity,
        display,
        x
      }}
    />
  ))
}

Мне нужна такая же функциональность, как codeandbox code, и уменьшать непрозрачность параллельно при перетаскивании карты на другую карту. Если у кого-то есть другое решение в другой библиотеке, например framer-motion. Это тоже полезно.

1 Ответ

2 голосов
/ 20 июня 2020

Вы должны интерполировать значение x на непрозрачность. Значение x находится между 0 и отрицательным innerWitdh / 2. Вы должны передать его, чтобы получить значение от 1 до 0.

Вот рабочая формула. 

opacity: x.to(x => 1 + x / (window.innerWidth / 2)),

Вот пример : https://codesandbox.io/s/card-slider-jwf3f

Примечание сбоку:

Вы можете легко проверить формулу, если отобразите ее на экране. Все, что вам нужно сделать, это поместить его как текст анимированного.div. Например: 

 <animated.div>{x.to(x => 1 - Math.abs(x / (window.innerWidth / 2)))}</animated.div>
...