Как сгладить JQuery анимации

Я хотел бы сгладить цепочку некоторых функций jquery.animate.

Вот jsfiddle, где я описываю проблему:http://jsfiddle.net/xavier_seignard/KTxbb/4/

Как видите, между каждой анимацией есть остановка, даже с линейным атрибутом.

У вас есть идеи о том, как это сгладить? Или что-нибудь еще, что бы сработало?

С уважением

 Mihai Iorga17 сент. 2012 г., 13:31
@Alnitak это 'S от вас видеокарта
 Lazar Vuckovic17 сент. 2012 г., 13:36
@Alnitak Та же проблема и в последней версии Chrome для Windows 7.
 Armel Larcier17 сент. 2012 г., 13:56
Привет! Я хотел бы, чтобы вы использовали "реальный» библиотека анимации типа GreenSock 's TweenLite:greensock.com/get-started-js
 Alnitak17 сент. 2012 г., 13:31
кто-нибудь еще видит проблемы рендеринга с этой скрипкой? С Chrome 21.0.1180.89 на MacOS X я вижу оставленные полосы. Я'видел подобное в моем собственном коде, но неЯ был в состоянии изолировать его от отчетного теста.
 Alnitak17 сент. 2012 г., 13:32
@MihaiIorga в моем приложении это только начало происходить вокруг Chrome 18, но я нене в состоянии его изолировать. Это происходит и на других картах на других компьютерах Mac.
 fcalderan17 сент. 2012 г., 13:30
На fx 15 / Mac я не вижу остановки между анимациями ... вы могли наблюдать эту настройку длительностью 2/3000 миллисекунд
 fcalderan17 сент. 2012 г., 13:32
@Alnitak, я 'Ве та же проблема (выбор 21 / MacOs X)
 xavier.seignard17 сент. 2012 г., 15:15
@ArmelL. кажется интересным, особенно понятие Timeline. Спасибо за чаевые

Ответы на вопрос(4)

http://gsgd.co.uk/sandbox/jquery/easing/

Включите файл и вместо "лайнер» добавить другое смягчение.

Решение Вопроса

отлично» анимация, вы видите эту остановку, потому что скоростьСлишком быстро и другого размера, чтобы покрыть:

function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        1000, 'linear');
    });
}​
 George03 мая 2013 г., 12:10
Для чего этопричина, по которой это больше похоже на то, что есть у вас послеошибка в оригинальной скрипке: вы можетеуказать тип анимации (linear) во втором параметре так, как он у вас в скрипке. Приведенный выше код на самом деле правильно определяет линейный атрибут, таким образом, он выглядит более, чем вы хотите. Тем не менее, jquery.crSpline гораздо больше того, что вы, вероятно, после, во-первых, однако.
 xavier.seignard17 сент. 2012 г., 14:23
это немного лучше, но я, наконец, в конечном итоге с помощью плагина jquery.crSpline (ijin.net/crSpline/demo.html), который автоматически сглаживает анимацию по списку точек. Вот простая демонстрация:xseignard.github.com/test-crspline и связанный код:github.com/xseignard/test-crspline/blob/master/js/site.js

и она выглядела не очень хорошо, как вы упомянули в своем вопросе.

Но затем я создал новую страницу на моем компьютере, скопировал все с вашей скрипки и проверил ее. Это выглядит хорошо.

Скопируйте и вставьте это, сохраните как HTML и протестируйте:



  <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>


    <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>
    


 Lazar Vuckovic17 сент. 2012 г., 13:53
Проверено на Windows 7 / Chrome 21 - работает нормально. Проблема, которая была в скрипке, теперь исчезла.

Это связано с тем, что анимации имеют одинаковое время, но расстояние, которое покрывает квадрат, отличается. Возможно, вам придется изменить время для каждой анимации в зависимости от пройденного расстояния.

Ваш ответ на вопрос