Я хочу переместить 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);
Однако я не могу поместить это в код, изменяя верхнюю позицию и левую позицию, потому что тогда он будет двигаться одинаково.
У тебя есть идея для меня?
Я сделал это с 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');
Это не тот же эффект - движение не линейно, но когда мне нужно переместить объект в целевое положение, я использую непрерывную линейную интерполяцию, например:
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;
}
}
Одновременно он достигнет места назначения на обеих осях.
Если вы все еще хотите линейного перемещения, ваш подход в порядке, но вам нужно рассчитать скорость для каждой переменной (по каждой оси).