Skip to content

Instantly share code, notes, and snippets.

@i5ar
Last active November 2, 2015 03:11
Show Gist options
  • Select an option

  • Save i5ar/e72145fd2fc24db1ab14 to your computer and use it in GitHub Desktop.

Select an option

Save i5ar/e72145fd2fc24db1ab14 to your computer and use it in GitHub Desktop.
Lazy Line Painter page in jQuery Mobile
(function( $ ){
$(document).ready(function(){
var $demo = $('#demo');
var svgData = {
"demo": {
"strokepath": [
{
"path": "m 23.083,12.562 0,-2.822 0.935,0.11 0,-2.115 L 12.729,6.007 0,8.43 l 0,2.473 1.18,-0.164 0,6.872 3.423,0 0,6.414 16.25,1.969 2.875,-0.348 0,-8.232 5.107,0.016 0,7.596 2.373,-0.287 0,-10.038 0.792,0.039 0,-1.504 -8.917,-0.674 z",
"duration": 3200,
'strokeWidth': 0.2,
},
{
"path": "m 21.934,10.717 0,2.475 -3.401,0.063 0,-2.884 3.401,0.346 zz",
"duration": 1200,
'delay': 600,
// 'strokeOpacity': 0.9,
},
{
"path": "m 2.948,11.121 7.719,-0.979 0,5.51 -7.719,0.256 0,-4.787 z",
"duration": 1200,
'delay': 1200,
// 'strokeOpacity': 0.8,
},
{
"path": "m 6.119,22.565 0,-4.955 3.182,0 0,5.244 -3.182,-0.289 z",
"duration": 1200,
'delay': 1800,
// 'strokeOpacity': 0.7,
},
{
"path": "m 10.11,22.909 0,-5.301 2.618,0 0,-0.01 1.063,0 0,5.645 -3.681,-0.334 z",
"duration": 2400,
'delay': 600,
// 'strokeOpacity': 0.6,
'reverse': true,
},
{
"path": "m 14.567,23.346 0,-5.746 4.287,10e-4 0,6.137 -4.287,-0.392 z",
"duration": 1200,
'delay': 2400,
// 'strokeOpacity': 0.5
}],
"dimensions": {
"width": 32,
"height": 28
}
}
}
$demo.lazylinepainter({
'svgData': svgData,
'strokeWidth': 0.1,
'strokeJoin': 'miter',
'strokeColor': '#333',
'drawSequential': false,
'ease': 'easeInOutQuad'
});
$(".js-paint").click( function(){
$('#demo').lazylinepainter('paint');
});
$(".js-erase").click( function(){
$('#demo').lazylinepainter('erase');
});
$(".js-pause").click( function(){
$('#demo').lazylinepainter('pause');
});
$(".js-resume").click( function(){
$('#demo').lazylinepainter('resume');
});
$(".js-destroy").click( function(){
$('#demo').lazylinepainter('destroy');
});
setTimeout(function(){
$demo.lazylinepainter('paint');
}, 10)
})
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment