Как увеличить число на другое число с максимальным и минимальным значением

У меня есть очень маленькая проблема, но, к сожалению, я не смог ее решить, поэтому я надеюсь, что кто-то может мне помочь, поэтому я пытаюсь сделать анимацию прокрутки и переместить какой-то элемент, используя атрибут матрицы css, и матрица имеет эти параметры scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() поэтому я использую масштаб и translateX и translateY для анимации и перемещения элемента, я использую значение позиции scrollY, чтобы знать, когда начинать анимацию, и использую значение позиции y, чтобы перемещать элемент следующим образом.

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

поэтому, когда пользователь прокручивает увеличение или уменьшение значения y, теперь мой первый способ решить проблему - жестко закодировать значения, например, если значение yScroll равно 1000, тогда я хочу, чтобы анимация запускалась, поэтому я создаю прослушиватель событий для прокрутки, если значение равно 1000, затем вычтите 1000 из позиции прокрутки Y, затем я начну с 0, затем я буду перемещать свой элемент, пока не захочу, чтобы они остановились, как вы можете видеть, это глупо, так как есть много, так что я думаю, что это хороший способ - использовать значение позиции прокрутки y и создать новое число в соответствии со значением y, которое начинается с минимального и максимального значения, поэтому я пробую следующий

поэтому моя первая проблема заключается в том, когда я запускаю анимацию, и я использую Observer 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)));

я сделал это

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])

для более подробного объяснения, если вы видите веб-сайт Apple здесь вы можете увидеть там анимацию, насколько она плавная, каков правильный подход к созданию такой анимации Спасибо.

Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
1
0
105
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

А как насчет const PositionValue = (Math.max(55, Math.min(100, 100-yOffset))) / 100;?

Спасибо за ваш ответ, это действительно мне очень помогло. Как вы думаете, есть ли способ лучше, чем этот?

holy 24.11.2022 06:15

Я думаю, что это вполне оптимальный способ сделать математику.

pasthec 24.11.2022 10:50

Другие вопросы по теме