JQuery - Wie kann ich ein Bild problemlos skalieren, um einen pulsierenden Effekt zu erzeugen?
Hey, ich arbeite mit einem Freund an einer Website und von Anfang an war unser Kunde mit der Qualität einer unserer Animationen nicht zufrieden. Diese Animation nimmt ein Bild auf und macht es größer, verkleinert es und wiederholt es, um einen pulsierenden Effekt zu erhalten. Die Opazität ändert sich auch während der Animation.
Die aktuelle Animation befindet sich auf der Startseite der Website Ссылка . Die fragliche Animation ist das 75% -Bild, das Sie sofort nach der Ankunft auf der Website sehen können.
Ich habe in Safari, Firefox und Internet Explorer getestet. Die Animation macht nur den Schnitt in Firefox, aber Safari und Internet Explorer produzieren nicht glatt genug Größen für unseren Kunden.
Kennt jemand eine bessere Animationsmethode als die, die ich benutzt habe? (Siehe Code unten und schauen Sie sich die Seite für ein Beispiel an).
%Vor%Vielen Dank im Voraus, wir könnten wirklich eine Hand benutzen,
Bearbeiten: Das Problem ist nicht mit der Positionierung, (oder zumindest ich glaube nicht, dass es ist), es hat mehr mit der Art und Weise zu tun, wie das Bild in der Größe verändert wird, Sie können die nervösen Kanten bemerken, wenn sie größer werden. Es scheint besser zu sein, wenn die Opazität erhöht wird, aber ich brauche die gleiche Qualität, wenn es undurchsichtig ist.
Jai
6 Antworten
Ihre Animation ist nicht glatt, da Ihr marginLeft abgerundet wird (das Bild wird um ein Pixel nach links verschoben) und dann wird Ihre Breite aufgerundet (Bildpixel werden nur ein wenig nach rechts verschoben, da sie auf eine größere Breite neu abgetastet werden) .) Auch wenn sich das Bild nicht richtig bewegte, sagten dir deine Augen, dass dies der Fall war, weil sie die Mitte des Bildes als etwas nach rechts wahrnehmen. Dies, zusammen mit der gleichen Sache vertikal macht die Animation scheinbar herumspringen.
Hier ist ein Beispiel dafür, warum ich glaube, dass die Ränder zu flimmern oder zu schütteln scheinen. Unten sind zwei Bilder, jeweils 3 mal 1 Pixel. Sie werden beide auf 5 zu 1 geändert und um 4 Pixel nach links verschoben. Der blaue ist, was Sie sehen, wo sich die Größe und der Standort unabhängig ändern. Der rote Wert lässt nur zu, dass sich die Größe ändert, wenn sich der Ort ändert, und sollte als glatte Animation erscheinen.
Sie können versuchen, + = eine bestimmte Menge zu verwenden, anstatt jedes Mal auf einen bestimmten Wert zu animieren. Ich habe es vorher benutzt und nie irgendwelche Probleme bemerkt.
Hier ein Beispiel für die folgenden →
Das Problem ist, dass Sie sowohl die Position als auch die Größe gleichzeitig animieren und nicht miteinander synchronisiert sind. Ich verstehe, dass Sie dies tun, um zu versuchen, es vertikal und horizontal zentriert zu halten. Stattdessen würde ich eine ( gefürchtete ) Tabelle verwenden, um das Bild in der richtigen Position zu halten und einfach die Größe und Deckkraft mit Javascript zu pulsen, so:
%Vor%Sie können diese Tabelle positionieren und in der Größe anpassen, jedoch müssen Sie sie an die richtige Stelle bringen (bei Bedarf mit absoluter Positionierung).
Ich würde Flash verwenden, um den "75%" PNG SUPER glatt mit Beschleunigungsfunktion zu animieren. Das wird sehr gut funktionieren.