如何将一个数字增加到另一个具有最大值和最小值的数字

Question

我有一个非常小的问题，但不幸的是我不能解决它，所以我希望有人能帮助我，所以我试图做一个滚动动画和移动一些元素使用css矩阵属性和矩阵有这个参数scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()所以我使用缩放和translateX和translateY来动画和移动元素，我使用滚动位置值来知道何时开始动画，并使用y位置值来移动元素，像这样

matrix(1, 0, 0, 1, ${yPositionValue}, -35)

当用户滚动y值增量或减量,现在我的第一个解决这个问题的方法是硬编码的值如果yScroll值是1000,那么我希望动画开始所以我让一个事件监听器滚动,如果值为1000减去1000滚动y位置然后我将从0开始然后我将元素直到我想让他们停止,你可以看到这是一个愚蠢的方式有很多,如果所以我认为是一个很好的方法是使用滚动y位置值，并根据从最小和最大值开始的y值生成一个新的数字，所以我尝试下一个

所以我的第一个问题是当我开始动画时我使用观察者API并使用阈值所以如果50%的元素是可见的然后我开始动画，知道滚动位置我使用最小和最大值在两个值之间给我一个数字就像这样

const PositionValue = (Math.min(250, Math.max(0, yOffset)));

所以yOffset是y轴滚动的位置这段代码工作得很好但是问题是它在小数值的情况下工作得不太好比如如果我想要一个介于0.55和1.0之间的数字它不能给出我想要的结果所以用

const PositionValue = (Math.min(1, Math.max(0.55, yOffset)));

i did this

const PositionValue = (Math.min(100, Math.max(55, yOffset))) / 100;

所以我可以数之间的0.55,1.0,我想让这个数字而不是从0.55到1.0我想从1.0到0.55,我试图使一个变量并分配一个1如果PositionValue是大然后将递减0.55 0.01,所有我想要的是一种方法来生成一个数量根据y值,我知道有一个图书馆像GSAP但我喜欢让它通过我自己用反应这是我完整代码

// observer testing
const [isIntersectionRatioComplete, setisIntersectionRatioComplete] = useState(false);
const observerElement = useRef(null);
const leftSwitchRef = useRef(null);
const centerSwitchRef = useRef(null);
const rightSwitchRef = useRef(null);
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: []
}
let cenetrSwitchScalingValue = 1;
const HandelScrollTriggerAnimation = () => {
const yOffset =  window.pageYOffset - 1230;
if (yOffset > 0) {
const SwitchPositionValue = (Math.min(250, Math.max(0, yOffset)));
// const cenetrSwitchScalingValue = (Math.min(100, Math.max(56, yOffset))) / 100; // 0.56, 1
if (cenetrSwitchScalingValue >= 0.56) {
cenetrSwitchScalingValue = cenetrSwitchScalingValue - 0.01;
}
if (leftSwitchRef.current && centerSwitchRef.current && rightSwitchRef.current) {
leftSwitchRef.current.style.transform = `matrix(1, 0, 0, 1, ${-SwitchPositionValue}, -35)`;
centerSwitchRef.current.style.transform = `matrix(${cenetrSwitchScalingValue}, 0, 0, ${cenetrSwitchScalingValue}, 70, ${-SwitchPositionValue})`;
rightSwitchRef.current.style.transform = `matrix(1, 0, 0, 1, ${SwitchPositionValue}, -35)`;
} return
} return
}
const observerCallbackFunction = (entries) => {
const [ entry ] = entries;
if (entry.intersectionRatio >= 0.1) { //0.5
// alert("done")
setisIntersectionRatioComplete(true)
} else {
setisIntersectionRatioComplete(false)
}
}
useEffect(() => {
for(let i = 0; i <= 1.0; i += 0.1) {
observerOptions.threshold.push(i);
}
const observer = new IntersectionObserver(observerCallbackFunction, observerOptions);
if (observerElement.current) observer.observe(observerElement.current);
if (isIntersectionRatioComplete) {
window.addEventListener('scroll', HandelScrollTriggerAnimation, { passive: true });
}
return () => {
if (observerElement.current) {
observer.unobserve(observerElement.current);
window.removeEventListener('scroll', HandelScrollTriggerAnimation);
}
}
}, [isIntersectionRatioComplete])

查看更多说明如果你看一下苹果的网站，你可以看到那里的动画有多流畅，制作这个动画的正确方法是什么谢谢你。

Answer 1

const PositionValue = (Math.max(55, Math.min(100, 100-yOffset))) / 100;呢?