wie glatt jquery-Animationen

Möchte ich glatt die Verkettung einiger jquery.animieren Funktionen.

Hier ein jsfiddle, wo ich beschreibe das problem :
http://jsfiddle.net/xavier_seignard/KTxbb/4/

Wie Sie sehen können, gibt es einen Stopp zwischen den einzelnen Animationen, sogar mit dem linearen Attribut.

Haben Sie eine Idee, wie um ihn zu glätten? Oder irgendetwas anderes, das würde den trick tun?

Hinsichtlich

Auf fx-15/Mac kann ich nicht sehen, jede Haltestelle zwischen animation... Sie konnten beobachten, diese Einstellung für eine Dauer von Millisekunden 2/3000
hat jemand anderes sehen rendering-Probleme mit fiddle? Mit Chrome 21.0.1180.89 auf MacOS X sehe ich die Schlieren hinter sich gelassen. Ich habe gesehen, ähnlich wie in meinem eigenen code, der aber noch nicht in der Lage, es zu isolieren, um eine Meldepflichtige test Stimmen.
das ist von dir Grafikkarte
auf meiner app nur gestartet, passiert in Chrome 18, aber ich war nicht in der Lage, es zu isolieren. Passiert es auf anderen Karten auch auf anderen Macs.
Ich habe das gleiche Problem (chome 21/MacOs X)

InformationsquelleAutor xavier.seignard | 2012-09-17

  1. 3

    Können Sie ändern Sie die Geschwindigkeit für eine "fein" - animation, werden Sie sehen, dass stoppen, weil die Geschwindigkeit es wird zu schnell und unterschiedlicher Größe decken:

    function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        1000, 'linear');
    });
}​
    das ist ein bisschen besser, aber ich landete schließlich mit dem jquery.crSpline plugin (ijin.net/crSpline/demo.html), die automatisch glättet die animation entlang einer Liste von Punkten. Hier ist eine einfache demo : xseignard.github.com/test-crspline und den zugehörigen code : github.com/xseignard/test-crspline/blob/master/js/site.js
    Für was es Wert ist, der Grund, diese sieht eher aus wie das, was Ihr nach ist es ein bug in der original-Geige: Sie können nicht angeben, wird die animation geben (linear) im zweiten parameter in der Art und Weise haben Sie es in Ihrer fiddle. Der obige code eigentlich richtig gibt die lineare Attribut, so dass es scheinen, wie Sie wollen. Das sagte jquery.crSpline ist viel mehr, was Sie waren, wahrscheinlich nachdem in den ersten Platz jedoch.

    InformationsquelleAutor Mihai Iorga

  2. 1

    Ich denke, man sollte nur versuchen das jQuery-Easing-plugin - http://gsgd.co.uk/sandbox/jquery/easing/

    Schließen Sie die Datei und statt "liner" fügen Sie einige weitere Lockerung.

    InformationsquelleAutor Lazar Vuckovic

  3. 1

    Ist es die Veränderung in der Geschwindigkeit, die Sie beschreiben?

    Ist, weil die Animationen haben die gleichen timings, aber die Distanz, die das Quadrat abdecken unterscheidet. Sie müssen möglicherweise ändern Sie die Zeit für jede animation abhängig der Distanz.

    InformationsquelleAutor Tom

  4. 1

    Das ist das problem bei jsfiddle..
    Getestet habe ich Ihre jsfiddle link und es war nicht auf der Suche großen, wie Sie in Ihrer Frage erwähnt.

    Aber dann erstellte ich neue Seite auf meinem pc und kopiert alles von Ihrem fiddle und überprüft. Es sieht in Ordnung.

    Kopieren und einfügen und als html speichern und testen Sie es :

    <html>
<head>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
    <style type="text/css">
    #point {
    position: absolute;
    background-color: black;
    width: 15px;
    height: 15px
}
    </style>
</head>
<body onload="initPage()">
    <div class="start" id="point"></div>
<script type="text/javascript">
    var json = [
                {'x' : '300' , 'y' : '200'},
                {'x' : '250' , 'y' : '150'},
                {'x' : '209' , 'y' : '387'},
                {'x' : '217' , 'y' : '323'},
                {'x' : '261' , 'y' : '278'},
                {'x' : '329' , 'y' : '269'},
                {'x' : '406' , 'y' : '295'}
            ];


function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        "linear");
    });
}
</script>
    </body>

</html>
    Getestet auf Windows 7 / Chrome-21 - funktioniert das auch in Ordnung. Das Problem, das vorhanden war, in der Geige ist jetzt Weg.

    InformationsquelleAutor Kuldeep Daftary

Schreibe einen Kommentar