StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>. . As @Beetroot-Beetroot said seconds before I finished typing my comment, the time between each call for the <code>progress function</code> is not necessarily constant and adding a constant value to the <code>angle</code> variable will make your animation looks wrong.</p> <p>. . The <code>step</code> event, as per <a href="http://api.jquery.com/animate/" rel="nofollow">jQuery documentation</a>, is called possibly more than once per tick per property and uses a set of parameters that are not really useful in this case. We were commenting about the <code>progress</code> callback all the time, but using the wrong name. I'm not sure if jQuery changed it's implementation (it seems like the <code>progress</code> function was added on v1.8), but I had this "step" name in my mind for some reason. I think the incredible <a href="https://www.greensock.com/" rel="nofollow">GreenSock's tweening library</a> uses the "step" name as well. Anyway, in jQuery, the signatures for <code>step</code> and <code>progress</code> are as follow:</p> <p><strong>step: function (Number now, Tween tween):</strong> the first parameter is <em>the value</em> of one property being animated and the second is <em>the jQuery's tween object</em> (that includes the <code>prop</code> property so you know which property the <code>now</code> value refers to).</p> <p><strong>progress: function (Promise animation, Number progress, Number remainingMs):</strong> the first parameter is <a href="http://api.jquery.com/Types/#Promise" rel="nofollow">a jQuery promise object</a> representing the animation, the second parameter is a number from 0 to 1 representing the percentage of the animation's progress and the third parameter is the number of miliseconds until the animation ends.</p> <p>. . For your purpose the <code>progress</code> event is clearly what you need. Remember to change the <code>step</code> property to <code>progress</code> in the object you pass to <code>jQuery.animate</code> in your <code>Animator</code> function..</p> <p>. . You need to use the <code>progress</code> value (as it's a value between 0 and 1 indicating the percentage of the animation progress) as a factor to calculate the current angle inside the <code>progress function</code> at each call:</p> <pre><code>progressFunction = function(animation, progress, lastingms) { var startAngle = 0, endAngle = 180; var angleRange = endAngle -startAngle; var curAngle = startAngle +(angleRange *progress); $(this).css({"-ms-transform":"rotate("+ curAngle +"deg)"}); }; </code></pre> <p>. . Whenever you need more values to animate, use the same logic:</p> <pre><code>progressFunction = function(animation, progress, lastingms) { var startA = 0, endA = 180, rangeA = (endA -startA); var startX = 254, endX = 894, rangeX = (endX -startX); var curA = startA + rangeA *progress; var curX = startX + rangeX *progress; $(this).css({ "-ms-transform":"rotate("+ curAngle +"deg)", 'left': curX +'px' }); }; </code></pre> <p>. . It makes sense to try to make it somehow more automatic if you plan to use it as a lib in many parts of your code so that you don't need to keep writing this same logic all around.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload