如何平滑jquery動畫

Question

我想平滑一些jquery.animate函數的鏈接。

這是一個jsfiddle我描述的問題： http ： //jsfiddle.net/xavier_seignard/KTxbb/4/

如您所見，每個動畫之間都有一個停止，即使是線性屬性也是如此。

你對如何平滑它有任何想法嗎？ 還是其他任何可以解決問題的方法？

問候

Answer 1

你可以改變一個更“精細”動畫的速度，你會看到停止，因為速度太快，不同的大小覆蓋：

function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        1000, 'linear');
    });
}

Answer 2

我想你應該試試jQuery Easing插件 - http://gsgd.co.uk/sandbox/jquery/easing/

包括文件而不是“襯墊”添加一些其他緩和。

Answer 3

是你描述的速度變化嗎？

這是因為動畫具有相同的時序，但方框所覆蓋的距離不同。 您可能需要根據行進的距離更改每個動畫的時間。

Answer 4

這就是jsfiddle的問題..我測試了你的jsfiddle鏈接，它在你的問題中提到它看起來不太好看。

但后來我在我的電腦上創建了新頁面並復制了你的小提琴中的所有內容並進行了檢查。 它看起來還不錯。

復制並粘貼此內容並將其另存為html並進行測試：

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

如何平滑jquery動畫

問題描述

4 個解決方案

解決方案1
3 已采納 2012-09-17 11:31:13

解決方案2
2 2012-09-17 11:30:48

解決方案3
1 2012-09-17 11:31:59

解決方案4
1 2012-09-17 11:46:04

如何平滑jquery動畫

問題描述

4 個解決方案

解決方案1 3 已采納 2012-09-17 11:31:13

解決方案2 2 2012-09-17 11:30:48

解決方案3 1 2012-09-17 11:31:59

解決方案4 1 2012-09-17 11:46:04

解決方案1
3 已采納 2012-09-17 11:31:13

解決方案2
2 2012-09-17 11:30:48

解決方案3
1 2012-09-17 11:31:59

解決方案4
1 2012-09-17 11:46:04