Commit e9b3884f authored by S Anand's avatar S Anand

BUG: fix easing implementation. Earlier implementation was plain wrong

parent 5510bcfd
......@@ -16,12 +16,21 @@ $.fn.doodle = function(options) {
// Variables
self = this,
paths = [],
total_width = 0,
default_duration = 0,
paths = [], // List of path information, captured when .doodle() is first called
total_width = 0, // Total width of all paths in pixels
default_duration = 0, // Counter for duration specified by data-duration="..."
easing = options.easing || function(t) { return t },
start_pos = 0,
pos, end_pos, start_time, duration, index, length, path, request_id, timeout_id
start_pos = 0, // starting position, in time domain
start_time, // timestamp at which start_pos was set
pos, // current position, in time domain
path_pos, // current position, in path domain
end_path_pos, // position at which current path ends, in path domain
duration, // duration of this doodle in seconds
index, // generic index variable
length, // generic length variable
path, // current path that's being animated
request_id, // requestAnimationFrame id. False-y if none is pending
timeout_id // setTimeout id. False-y if none is pending
self
// Turn off any other doodling on these paths
......@@ -50,18 +59,19 @@ $.fn.doodle = function(options) {
if (typeof position != 'undefined') {
// When a specific position is set
start_pos = position
path_pos = easing(position)
// Set or reset stroke-dashoffset. All paths after pos are set to the end, those before are set to 0
for (index=0; index < length; index++)
paths[index][PATH].attr('stroke-dashoffset', position < paths[index][END_POS] ? paths[index][PATH_LENGTH] : 0)
paths[index][PATH].attr('stroke-dashoffset', path_pos < paths[index][END_POS] ? paths[index][PATH_LENGTH] : 0)
// If options.fill, set or reset fill. All paths after pos are cleared, those before are filled
if (options.fill)
for (index=0; index < length; index++)
paths[index][PATH].css('fill', position < paths[index][END_POS] ? 'none' : paths[index][FILL])
paths[index][PATH].css('fill', path_pos < paths[index][END_POS] ? 'none' : paths[index][FILL])
}
// Reset the index and position. The first tick() will correct things
index = 0
path = paths[index]
end_pos = path[WIDTH]
end_path_pos = path[WIDTH]
start_time = Date.now()
tick()
})
......@@ -93,10 +103,11 @@ $.fn.doodle = function(options) {
duration = (options.duration || default_duration || 2) * 1000
function draw() {
pos = start_pos + easing((Date.now() - start_time) / duration)
pos = start_pos + (Date.now() - start_time) / duration
path_pos = easing(pos)
// Find the current path that is being animated
if (index >= length || pos > paths[index][END_POS]) {
while ((index < length) && (pos > paths[index][END_POS])) {
if (index >= length || path_pos >= paths[index][END_POS]) {
while ((index < length) && (path_pos >= paths[index][END_POS])) {
paths[index][PATH].attr('stroke-dashoffset', 0)
if (options.fill)
paths[index][PATH].css('fill', paths[index][FILL])
......@@ -111,11 +122,11 @@ $.fn.doodle = function(options) {
return false
}
path = paths[index]
end_pos = path[WIDTH] + paths[index - 1][END_POS]
end_path_pos = path[WIDTH] + paths[index - 1][END_POS]
}
// Set its stroke offset
path[PATH].attr('stroke-dashoffset', path[PATH_LENGTH] * (end_pos - pos) / path[WIDTH])
path[PATH].attr('stroke-dashoffset', path[PATH_LENGTH] * (end_path_pos - path_pos) / path[WIDTH])
return true
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment