当ViewPager移至下一张幻灯片时，上一张幻灯片应为每一步降低不透明度值
Arpit
我的要求是，当ViewPager单击并拖动下一个图像时，上一个图像应为每次拖动降低不透明度。这是我的codesandbox代码。
此图像是我要求的一个小示例。
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代码，并在将卡拖到其他卡上时减少不透明度的并行性。如果任何人在其他库中有其他解决方案，例如framer-motion。这也是有帮助的。
彼得·安布鲁斯
您应该将x值插值到不透明度。x值介于0到负的innerWitdh / 2之间。您应该将其传输以获得1到0之间的值。
这是工作公式。
opacity: x.to(x => 1 + x / (window.innerWidth / 2)),
这是示例：https : //codesandbox.io/s/card-slider-jwf3f
边注：
如果在屏幕上显示该公式，则可以轻松地对其进行检查。您所要做的只是将其作为animation.div的文本。例如：
<animated.div>{x.to(x => 1 - Math.abs(x / (window.innerWidth / 2)))}</animated.div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Flickity到达下一张或上一张幻灯片时的事件
- 2
Flexslider上一张和下一张幻灯片的位置
- 3
光滑-带有上一张/下一张幻灯片的名称的箭头
- 4
BxSlider：最后一张幻灯片上的“下一张”->跳回到第一张幻灯片？
- 5
移至下一张幻灯片时，如何防止其变得模糊？
- 6
删除上一张幻灯片上的课程
- 7
Bootstrap Carousel 下一张幻灯片添加到上一张幻灯片的下方
- 8
是否可以从当前幻灯片转到下一张幻灯片？
- 9
隐藏/禁用最后一张幻灯片上的“下一张”按钮和第一张幻灯片上的“上一张”按钮
- 10
使用循环插件在下一张幻灯片上暂停youtube视频
- 11
全高滑块跳过一张幻灯片
- 12
我想做一张幻灯片div
- 13
bxSlider最后一张幻灯片为空
- 14
bxslider移动第一张幻灯片
- 15
UI引导轮播第一张幻灯片不显示，然后在最后一张幻灯片时崩溃
- 16
Flexslider：单击自定义按钮后移至下一张幻灯片（有延迟）
- 17
离子5幻灯片ionSlideDidChange不要求最后一张幻灯片
- 18
如何使用OpenXML将幻灯片插入另一张PowerPoint幻灯片？
- 19
猫头鹰轮播幻灯片全部显示为一张幻灯片
- 20
为什么幻灯片会跳过最后一张幻灯片？
- 21
滑动滑块将所有幻灯片放到一张幻灯片中
- 22
滑动滑块YouTube在最后一张和第一张幻灯片上出现故障
- 23
Bootstrap3轮播-随机挑选下一张幻灯片
- 24
Flexslider-通过点击进入下一张幻灯片
- 25
在Powerpoint编辑模式下禁用滚动到下一张幻灯片
- 26
jQuery滑块不适用于下一张幻灯片（.next（）错误）
- 27
如何在笔记中指出应该显示下一张幻灯片/动画？
- 28
假点击到光滑轮播中的下一张幻灯片
- 29
在第一张幻灯片上禁用上一个控件，在最后一张幻灯片上禁用下一个控件
我来说两句