JQuery - Wie kann ich problemlos ändern der Größe eines Bildes zu erstellen, die einen pulsierenden Effekt?

Hey, Im arbeiten an einer website mit einem Freund von mir, und von Anfang an, unseren Kunden unzufrieden mit der Qualität einer unserer Animationen. Diese animation nimmt ein Bild und macht es größer, dann macht es kleiner, und das wiederholt sich um einen pulsierenden Effekt. Die Deckkraft ändert sich auch während der animation.

Die aktuelle animation auf der Startseite der Website http://laveryrowe.com. Die animation in der Frage ist das 75% - Bild, das Sie sehen sofort nach der Ankunft auf der Website.

Habe ich getestet in safari, firefox und internet explorer. Die animation eben nur über die macht der Schnitt in firefox, aber in safari und internet explorer produzieren nicht glatt genug Größe für unsere Kunden.

Kennt jemand eine bessere Methode zu animieren, als die, die ich verwendet habe? (siehe code unten und schauen Sie sich die Website für ein Beispiel).

function pulse() {
    $('#seventyfive').animate({
        marginTop: 175, 
        marginLeft: 25, 
        width: 261, height: 98, 
        opacity: 0.5
    }, 700, function() {
        $('#seventyfive').animate({
            marginTop: 161.95, 
            marginLeft: 15.2, 
            width: 287.1, height: 107.8, 
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};

Vielen Dank im Voraus, Wir könnten wirklich eine hand,

Edit: ist nicht Das Problem mit der Positionierung, (oder zumindest ich glaube nicht, dass es ist) stattdessen, mehr zu tun mit der Art, wie das Bild skaliert wird, können Sie feststellen, die nervös Kanten, wie es größer wird. Es scheint besser Aussehen als die Deckkraft ist erhöht, aber ich brauche die gleiche Qualität, wenn es undurchsichtig ist.

Jai

Vielleicht verwenden Sie ein animiertes GIF?
Ich denke, Sie sollten mithilfe von css-übergang für Browser, die es unterstützen (IE9, Firefox, Safari, Opera) und fallback auf animierte gif-Datei, wenn es nicht
Nicht, um einen Krieg beginnen, aber ich sehe auch die andere Seite, die. Warum entwickeln (test, Bereitstellung, Wartung) zwei Lösungen, mit denen man zu tun?
2 Lösungen scheint ein wenig verschwenderisch, aber trotzdem danke! mein einziges Problem bei GIFs ist, dass Sie eine merkwürdige pixelige Effekt manchmal, oder ist das einfach meine Art, Sie zu erstellen?
Ich bin mit IE8 und ich denke, es sieht ziemlich glatt. In welcher Weise wird es schlecht Aussehen? Ist es ein framerate-Sache oder sind die Kanten gezackt suchen?

InformationsquelleAutor Jai | 2011-04-28

4

Ihre animation nicht glatt, weil Ihre marginLeft wird abgerundet (Bild bewegt sich nach Links ein pixel), und dann Ihre Breite wird aufgerundet (Bild Pixel nach rechts bewegt, nur ein wenig, weil Sie re-gesampelt, um eine größere Breite.) Auch wenn das Bild nicht nach rechts bewegen Ihre Augen verraten, dass Sie es Tat, weil Sie wahrnehmen, die in der Mitte des Bildes als etwas auf der rechten Seite. Dies zusammen mit tun die gleiche Sache, vertikal macht die animation erscheinen zu springen.

Hier ist ein Beispiel, warum ich denke, dass die Kanten scheinen zu flackern oder zittern. Unten Sind zwei Bilder, die beide 3 von 1 Pixel. Sie sind beide Größe 5 von 1 und zog 4 Pixel nach Links. Das Blaue ist das, was Sie sehen, ist, wo die Größe und Position unabhängig voneinander geändert werden können. Die rot erlaubt nur die Größe zu ändern, wenn sich der Ort ändert sich und sollte angezeigt werden, um eine flüssige animation.
- danke für die info, aber es ist nicht so sehr die Positionierung des Bildes (oder zumindest das ist nicht das größte Problem im moment) das ist das problem, mehr das Bild selbst hat scrappy Kanten, wenn seine Größe geändert wird. als es größer wird, scheint es, wie die Kanten beginnen, um jitter.
- Ich denke, wir reden über die gleiche Sache. Ich betrachte es als schütteln, aber ich denke, das ist die gleiche Idee wie edge jitter.
- ich habe ein Gefühl, das Ihr etwas mehr zu tun mit dem Bild selbst, vielleicht, weil seine nicht gut genug Auflösung, aber wenn es die Marge und die Breite, wäre es besser, wenn ich Runde die integer-Werte habe ich?
- Integer-zahlen, wie die Start-und Endwerte nicht helfen, da jQuery.animieren Sie trennen von Zeitscheiben. Sie hätte so animieren Sie die position und dann manuell die Größe festlegen, da es zu animieren.
- meinst du wie in, laufen animieren, wie eine Art loop-Funktion? wo die Größen sind alle manuell eingestellt im gesamten Schleife, so im wesentlichen, wenn bin etwas der Festlegung der Zeitscheiben mich?
- Ich fügte hinzu, ein Bild, das zeigt, das problem und die Lösung.
- ahh, jetzt verstehe ich. Dank gradbot!
InformationsquelleAutor gradbot
3

Haben Sie sah in der Verwendung von jQuery UI effects?

http://jqueryui.com/demos/effect/#default

Andere alternative ist, sprechen Sie aus der pulsierenden 75% und in einigen gelb blinkende Banner und die geschmackvolle Verwendung von frames.
- danke für die Antwort, ich habe in der Tat sah in Ihnen, leider ist der scale-Effekt zu haben scheint das gleiche problem wie mit animieren. Ich wünschte sehr, ich könnte sich ändern, die clients Geist, aber er ist einfach nicht diese Art von Kerl haha
InformationsquelleAutor Jason

Und was die Animation der Schriftgröße? I. e. => http://jsfiddle.net/steweb/D3X7R/

js/jQuery

(function pulse(back) {
    $('#seventyfive').animate(
        {
            'font-size': (back) ? '100px' : '140px',
            opacity: (back) ? 1 : 0.5
        }, 700, function(){pulse(!back)});
})(false);

Markup:

<div id="seventyfive">75%</div>

Css:

#seventyfive{
    position:absolute;
    font-size:100px;
    font-weight:bold;
}

danke, ich mag die Idee dahinter, aber das format des 75% - entscheidend ist die (nach unserer client) und so muss es ein Bild sein, anstatt eine bestimmte schriftart, die nicht ganz so spezifisch.

InformationsquelleAutor stecb

1

Könnten Sie versuchen, mit Hilfe += einige Quantität statt zu animieren, auf einen bestimmten Wert, jedes mal. Ich habe es vor und nie bemerkt keine Probleme.
- danke, aber ich bin nicht sicher, ob das wirklich viel Unterschied, und ich arbeite lieber präzise Messungen, dass ich Vorhersagen kann, ohne zu denken zu hart haha
- Sehr wahr, haha.
InformationsquelleAutor Thomas Shields
1

Hier ist ein Beispiel, die folgenden →

Das problem ist, dass Sie zu animieren, sowohl die position und die Größe, in der gleichen Zeit, und Sie sind out of sync mit einander. Ich verstehe, dass Sie tun dies, um zu versuchen zu halten es vertikal zentriert und horizontal. Stattdessen würde ich einen (gefürchtete Tabelle), um das Bild in die richtige position, und nur Impuls an die Größe und Deckkraft mit Javascript, in etwa so:
```
<table id="table75">
    <tr>
        <td><img id="seventyfive" src="http://laveryrowe.com/assets/images/heading_index_75.png" /></td>
    </tr>
</table>

#table75 { width:XXXpx; height:YYYpx; }
#table75 tr { vertical-align:middle; }
#table75 tr td { text-align:center; }

function pulse() {
    $('#seventyfive').animate({
        width: 261, height: 98, 
        opacity: 0.5
    }, 700, function() {
        $('#seventyfive').animate({
            width: 287.1, height: 107.8, 
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};
```
Können Sie die position und die Größe dieser Tabelle, aber Sie brauchen, um es an die richtige Stelle (mit absoluter Positionierung, wenn nötig).

Siehe Beispiel →
- Dies scheint schütteln bei mir in chrome 12.
- seine Produktion so ziemlich das gleiche wie das, was ich bereits in Bezug auf die Bildqualität, aber ich gebe zu, die Bewegung ist viel glatter, also danke
InformationsquelleAutor mVChr
-1

Ich würde mit Flash zu animieren, die "75%" PNG-SUPER smooth mit easing-Funktion. Das wird sehr gut funktionieren.
- OP ausdrücklich gesagt, er braucht einen jQuery Antwort. Dies hilft nicht.
InformationsquelleAutor Christian Luneborg

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.