javascript - texto - Cambio de la transformación CSS en desplazamiento: movimiento brusco contra movimiento suave

transiciones css ejemplos

Question

No estoy satisfecho con las bibliotecas de paralaje existentes, así que estoy tratando de escribir las mías. Mi actual consiste en tres clases principales:

• ScrollDetector rastrea la posición de desplazamiento de un elemento en relación con la pantalla; Tiene funciones para devolver un flotante que representa su posición actual:
  • 0 representa el borde superior del elemento en el borde inferior de la ventana gráfica
  • 1 representa el borde inferior del elemento en el borde superior de la ventana gráfica
  • Todas las demás posiciones se interpolan / extrapolan linealmente.
• ScrollAnimation utiliza una instancia ScrollDetector para interpolar valores CSS arbitrarios en otro elemento, en ScrollDetector elemento ScrollDetector .
• ParallaxativeAnimation extiende ScrollAnimation para el caso especial de una imagen de fondo que debe desplazarse en un factor preciso de la velocidad de desplazamiento de la ventana.

Mi situación actual es esta:

• ScrollAnimation s utilizando transform: translateY(x) funciona sin problemas.
• La animación paraláxica está usando el trabajo translateY(x) , pero se anima de manera irregular.
• ParallaxativeAnimation utilizan translate3d(0, x, 0) son espasmódicas, pero no tan malas.
• Las animaciones de la biblioteca Rellax , que utilizan translate3d(0, x, 0) , funcionan perfectamente sin problemas.

Puedes ver la comparación en este bolígrafo . (Las sacudidas aparecen mejor en Firefox.) Mi biblioteca está en Bitbucket .

No sé dónde está el problema en mi biblioteca y no sé cómo resolverlo. Aquí hay una copia abreviada de dónde se realiza el trabajo pesado mientras se desplaza en la clase ScrollAnimation que funciona sin problemas:

getCSSValue(set, scrollPosition) {
    return set.valueFormat.replace(set.substitutionString, ((set.endValue - set.startValue) * scrollPosition + set.startValue).toString() + set.unit)
}

updateCSS() {
    var cssValues = [];

    var scrollPosition = this.scrollDetector.clampedRelativeScrollPosition();

    var length = this.valueSets.length;
    for(var i = 0; i < length; i++) {
        cssValues.push(getCSSValue(valueSets[i], scrollPosition) );
    }

    this.setCSS(cssValues);
    this.ticking = false;
}

requestUpdate() {
    if(!this.ticking) {
        requestAnimationFrame(() => { this.updateCSS(); });
    }

    this.ticking = true;
}

Y aquí está el equivalente en la clase ParallaxativeAnimation que es desigual:

updateCSS() {
    var scrollPosition = this.scrollDetector.clampedRelativeScrollPosition();
    var cssValues = [];

    var length = this.valueSets.length;
    for(var i = 0; i < length; i++) {
        var scrollTranslate = -((this.scrollTargetSize - this.valueSets[i].parallaxSize) * scrollPosition);

        cssValues.push(
            this.valueSets[i].valueFormat.replace(this.valueSets[i].substitutionString, scrollTranslate.toString() + ''px'')
        );
    }

    this.setCSS(cssValues);
    this.ticking = false;
}

requestUpdate() {
    if(!this.ticking) {
        requestAnimationFrame(() => { this.updateCSS(); });
    }

    this.ticking = true;
}

La matemática no parece ser más complicada, así que no puedo entender cómo está afectando el rendimiento de la animación. Pensé que la diferencia podría haber sido mi estilo en la imagen de paralaje, pero en el lápiz anterior, la versión Rellax tiene exactamente el mismo CSS, pero se anima perfectamente sin problemas. Rellax parece estar haciendo matemática más complicada en cada cuadro:

var updatePosition = function(percentage, speed) {
  var value = (speed * (100 * (1 - percentage)));
  return self.options.round ? Math.round(value) : Math.round(value * 100) / 100;
};


//
var update = function() {
  if (setPosition() && pause === false) {
    animate();
  }

  // loop again
  loop(update);
};

// Transform3d on parallax element
var animate = function() {
  for (var i = 0; i < self.elems.length; i++){
    var percentage = ((posY - blocks[i].top + screenY) / (blocks[i].height + screenY));

    // Subtracting initialize value, so element stays in same spot as HTML
    var position = updatePosition(percentage, blocks[i].speed) - blocks[i].base;

    var zindex = blocks[i].zindex;

    // Move that element
    // (Set the new translation and append initial inline transforms.)
    var translate = ''translate3d(0,'' + position + ''px,'' + zindex + ''px) '' + blocks[i].transform;
    self.elems[i].style[transformProp] = translate;
  }
  self.options.callback(position);
};

Lo único que puedo decir de Chrome Developer Tools es que la velocidad de fotogramas no está muy por debajo de 60 fps, así que tal vez no sea que estoy trabajando demasiado en cada fotograma, sino que estoy haciendo algo matemáticamente incorrecto cuando Calculo la posición?

Entonces no sé Estoy claramente por encima de mi cabeza aquí. Lamento arrojar toda una biblioteca en StackOverflow y decir "FIX IT", pero si alguien puede decir lo que estoy haciendo mal, o decirme cómo usar Developer Tools para quizás averiguar qué estoy haciendo mal, Lo apreciaría mucho.

EDITAR

De acuerdo, me he dado cuenta de que el factor más importante en el nerviosismo del desplazamiento es la altura del elemento que se está traduciendo. Tuve un error de cálculo en mi biblioteca que causaba que las imágenes de fondo fueran mucho más altas de lo que debían ser cuando mi propiedad scrollPixelsPerParallaxPixel era alta. Estoy en el proceso de tratar de corregir eso ahora.

Answer 1

Además de los cálculos, podrías intentar ejecutarlos de manera asincrona utilizando Promise:

await Promise.all([
  loop(update);
]);

solo para ver si tiene un impacto positivo en el rendimiento.

Yo comentaría, pero aún no tengo suficiente reputación.

Answer 2

Cualquier cosa que toque el DOM será lenta. Las animaciones CSS están bien, pero si actualiza el CSS, está tocando el DOM y será lento. Considera usar un elemento canvas en su lugar!