алгоритм / формула для перемещения элементов, чтобы они достигли определенной координаты x и y одновременно

Question

алгоритм / формула для перемещения элементов, чтобы они достигли определенной координаты x и y одновременно

0

Я хочу переместить div на 70% слева и на 10% вверху моего окна просмотра, когда я прокручиваю. Мой код для этого здесь:

Flower.prototype.animateToKeyframe = function() {
    var scroll = window.pageYOffset / window.innerHeight * 100;

    // check if next keyframe needs to be loaded
    if (!this.animationDone) { 
        // var formula = (this.initialPos.top - this.keyframe['top'] * percentHeight) / (this.initialPos.left - this.keyframe['left'] * percentWidth) * (scroll * 5);

        /*
        *  Animating top position
        */
        if (this.pos.top > percentHeight * this.keyframe['top']) { 
            this.domEl.css('top', (this.initialPos.top - (scroll * this.speed)) + 'px');
        } else if (this.pos.top < percentHeight * this.keyframe['top']) {
            this.domEl.css('top', (this.initialPos.top + (scroll * this.speed)) + 'px');
        }

        /*
        *  Animating left position
        */
        if (this.pos.left < percentWidth * this.keyframe['left']) { 
            this.domEl.css('left', (this.initialPos.left + (scroll * this.speed)) + 'px');
        } else if (this.pos.left > percentWidth * this.keyframe['left']) {
            this.domEl.css('left', (this.initialPos.left - (scroll * this.speed)) + 'px');
        }

        /*
        *  Animating rotation
        */
        this.domEl.css('transform', 'rotateZ(' + (this.rotation + (scroll * this.speed)) + 'deg)');
        this.domEl.css('-webkit-transform', 'rotateZ(' + (this.rotation + (scroll * this.speed)) + 'deg)');
        /*
        * updating and checking position
        */
        this.pos = this.domEl.position();
        var leftDone = this.pos.left > (percentWidth * this.keyframe['left'] - 5) && this.pos.left < (percentWidth * this.keyframe['left'] + 5);
        var topDone = this.pos.top > (percentHeight * this.keyframe['top'] - 5) && this.pos.top < (percentHeight * this.keyframe['top'] + 5);

        if (topDone && leftDone) {
            alert('fertig!' + this.num);
            this.animationDone = true;
        }
    } else {
        this.getKeyframe();
    }

this.keyframe - это объект: {left: 70, top: 10, rotation: 100}. Но когда я прокручиваю, элемент движется вдоль оси х и у равномерно. Однако я хочу, чтобы оба css-стиля перемещались таким образом, что оба они одновременно достигают цели (this.keyframe). В противном случае он поступает сначала по оси y, а затем по оси x.

Я попытался понять это с помощью линейного уравнения, как вы можете видеть здесь://var formula = (this.initialPos.top - this.keyframe ['top'] * percentHeight)/(this.initialPos.left - this.keyframe [' left '] * percentWidth) * (прокрутка * 5);

Однако я не могу поместить это в код, изменяя верхнюю позицию и левую позицию, потому что тогда он будет двигаться одинаково.

У тебя есть идея для меня?

vellip 28 апр. 2014, в 17:45

Источник

Теги:

javascript

jquery

algorithm

scroll

position

2 ответа

0

Это не тот же эффект - движение не линейно, но когда мне нужно переместить объект в целевое положение, я использую непрерывную линейную интерполяцию, например:

for( ;; /* every frame */ ) {
    if( Math.abs( current.x - target.x ) < 0.1 ) {
        done();
    } else {
        current.x = current.x * 0.9 + target.x * 0.1;
        current.y = current.y * 0.9 + target.y * 0.1;
        current.a = current.a * 0.9 + target.a * 0.1;
    }
}

Одновременно он достигнет места назначения на обеих осях.

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

Zsolt Gyöngyösi 28 апр. 2014, в 14:13

Ещё вопросы

vellip · Accepted Answer · 2014-04-30T05-47-00.000Z

Я сделал это с lerp-ing сейчас. Спасибо, однако!

    var stopPosition = (1 / this.keyframe['stop'] * scroll) - (this.keyframeIndex - 1);

    // lerp-ing through position animation
    var formulaX = this.initialPos.left + stopPosition * (xTarget - this.initialPos.left);
    var formulaY = this.initialPos.top + stopPosition * (yTarget - this.initialPos.top);


    /*
    *  Animating positions
    */
    this.domEl.css('top', (formulaY) + 'px');
    this.domEl.css('left', (formulaX) + 'px');