Question

当我滚动时，我想将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}。但是当我滚动时，元素沿着x和y轴平移。但是我希望两种css样式都能以这种方式移动它们同时到达目标（this.keyframe）。否则它首先到达y轴，然后到达x轴。

我试着用线性方程式来实现，你可以在这里看到： // var formula =（this.initialPos.top - this.keyframe [＆＃39; top＆＃39;] * percentHeight）/（this.initialPos.left - this.keyframe [＆＃39; left＆＃39;] * percentWidth）*（滚动* 5）;

但是我无法将其放入代码中更改顶部位置和左侧位置，因为它会再次移动。

你对我有什么想法吗？

Answer 1

效果不一样 - 运动不是线性的 - 但是当我必须将物体移动到目标位置时，我使用连续线性插值，如：

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;
    }
}

它将在两个轴上同时到达目的地。

如果你仍想要线性移动，你的方法还可以，但你必须计算每个变量（每个轴）的速度。

Answer 2

我现在用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');

算法/公式移动元素，使它们同时到达特定的x和y坐标

2 个答案: