问题描述:

I'm trying to have a single image go across the page over a few seconds in a smooth linear speed. For the most part it works but I do notice intermittent jerkiness and I'm unable to identify why.

It's only a single image so should not put much strain on a browser and I'm using velocity js for its performance. I've looked at the performance using chrome's dev tools but I cant identify the issue. It also does not correlate with the garbage collection events as I can see jerks in the image many times before and after the gc events.

The smoothness of this animation is critical for the purposes of this project.

Here is the html for the page, I've done everything in-line for now.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>prototype</title>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<style>

.test-image{

top:50%;

left:-150px;

position: absolute;

display: block;

width:100px;

}

img{

user-drag: none;

user-select: none;

-moz-user-select: none;

-webkit-user-drag: none;

-webkit-user-select: none;

-ms-user-select: none;

}

body{

overflow: hidden;

}

.fullscreenDiv {

background-color: grey;

width: 100%;

height: auto;

bottom: 0px;

top: 0px;

left: 0;

position: absolute;

}

.testArea {

background-color: white;

width: 1024px;

height: 100%;

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

margin: auto;

overflow: hidden;

}

</style>

</head>

<body>

<div class="fullscreenDiv">

<div id="testArea" class="testArea">

<img id="testItem" class="test-image" src="http://thumb9.shutterstock.com/display_pic_with_logo/1175219/125563562/stock-photo-orange-family-stack-up-in-size-order-isolated-on-white-125563562.jpg">

</div>

</div>

<script>

var testItem = $("#testItem");

testItem.velocity({translateZ:'0' })

.velocity({translateX:'1224px' },

{

duration: 15000,

easing: 'linear',

loop:true

});

</script>

</body>

</html>

I've also recorded the states as follows:

What is the issue causing the lose in frames, is there a solution to it, and if there is not, what can I do as an alternative?

相关阅读:
Top