javascript - FabricJS weird line animation with pageSnap -


i using fabricjs create js line animation , use pagesnapjs create snapping sections. however, line animation behavior quite random. if slowly scroll color pages, you'll see red line animation. page 1 2 fine, page 2 3 fails. calculation incorrect? how correct it?

here code (jsfiddle @ end of question):

var canvas; var current_page = 1; var is_animating = false; var line_options = {     stroke: 'red',     strokewidth: 3 }; $(document).ready(function() {     canvas = new fabric.canvas('line_effect');     canvas.setheight($('.indicator').height());     canvas.setwidth(50);     canvas.renderall();     var section_h = $('.section').height();      var startpts = [         {x: 48, y: 0},         {x: 48, y: $('.section').height()}     ];     var endpts = [         {x: 48, y: $('.section').height() * 2},         {x: 48, y: $('.section').height()}     ];      var line = new fabric.polyline(startpts, line_options);     canvas.add(line);      function animateline(i, prop, endpts) {         fabric.util.animate({             startvalue: line.points[i][prop],             endvalue: endpts[i][prop],             duration: 1000,             easing: fabric.util.ease.easeinoutcubic,             onchange: function(value) {                 line.points[i][prop] = value;                 if(i === startpts.length - 1 && prop == 'y') {                     canvas.renderall();                 }             },             oncomplete: function() {                 line.setcoords();                 if(i === startpts.length - 1 && prop == 'y') {                     = !even;                     animateline(i, prop, endpts);                 }             }         });     }     function animate(startpage, endpage) {         if(is_animating) {             return;         } else if(startpage == endpage) {             return;         } else if(math.abs(startpage - endpage) > 1) {             // jump section immediately.             console.log('jump page ' + endpage);             canvas.remove(line);             if(endpage == 1) {                 line = new fabric.line([48, section_h * 0, 48, section_h * 1], line_options);             } else if(endpage == 2) {                 line = new fabric.line([48, section_h * 1, 48, section_h * 2], line_options);             } else if(endpage == 3) {                 line = new fabric.line([48, section_h * 2, 48, section_h * 3], line_options);             } else if(endpage == 4) {                 line = new fabric.line([48, section_h * 3, 48, section_h * 4], line_options);             }              canvas.add(line);         } else {             is_animating = true;             if(startpage == 1 && endpage == 2) {                 console.log('page 1 > 2');                 startpts = [                     {x: 48, y: section_h * 0},                     {x: 48, y: section_h * 1}                 ];                 endpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 1}                 ];             } else if(startpage == 2 && endpage == 3) {                 console.log('page 2 > 3');                 startpts = [                     {x: 48, y: section_h * 1},                     {x: 48, y: section_h * 2}                 ];                 endpts = [                     {x: 48, y: section_h * 3},                     {x: 48, y: section_h * 2}                 ];             } else if(startpage == 3 && endpage == 4) {                 console.log('page 3 > 4');                 startpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 3}                 ];                 endpts = [                     {x: 48, y: section_h * 4},                     {x: 48, y: section_h * 3}                 ];             } else if(startpage == 4 && endpage == 3) {                 console.log('page 4 > 3');                 startpts = [                     {x: 48, y: section_h * 4},                     {x: 48, y: section_h * 3}                 ];                 endpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 3}                 ];             } else if(startpage == 3 && endpage == 2) {                 console.log('page 3 > 2');                 startpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 3}                 ];                 endpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 1}                 ];             } else if(startpage == 2 && endpage == 1) {                 console.log('page 2 > 1');                 startpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 1}                 ];                 endpts = [                     {x: 48, y: section_h * 0},                     {x: 48, y: section_h * 1}                 ];             } else {                 console.log('others: ' + startpage + ' > ' + endpage);             }             canvas.remove(line);             line = new fabric.polyline(startpts, line_options);             canvas.add(line);             for(var = 0, len = startpts.length; < len; i++) {                 animateline(i, 'y', ? endpts : startpts);              }             is_animating = false;         }     }      var = true;     $('.contents').panelsnap({         $menu: false, // menu dom object         onsnapstart: function($target) {             if($target.data('panel') == 'page2') {                 animate(current_page, 2);             } else if($target.data('panel') == 'page3') {                 animate(current_page, 3);             } else if($target.data('panel') == 'page4') {                 animate(current_page, 4);             } else if($target.data('panel') == 'page1') {                 animate(current_page, 1);             }          },         onsnapfinish: function($target) {             current_page = parseint($target.data('panel').replace('page', ''));             console.log('current page: ' + current_page);         }      }); });

here jsfiddle

i've seen animation in other frameworks fail relative sizing, succeed absolute sizing values. started playing fiddle using additional js start setting values height , width px values instead of % values , looking promising.

this adapted jsfiddle containers.

$('html, body').css({'height':$('.contents').height()+'px','width':$('.contents').width()+'px'});   $('.indicator .section').css({'height':$('.contents').height/4+'px'});

you might try heading in direction if need responsive design. suspect you're doing there several such tweaks things pinned down.


-

Comments

Post a Comment

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri
Read more

matplotlib support failed in PyCharm on OSX -

any idea how fix ? how can debug might problem ? not seem : https://youtrack.jetbrains.com/issue/py-15520 i in console: python 2.6.9 (unknown, jul 14 2015, 19:46:31) [gcc 4.2.1 compatible apple llvm 6.0 (clang-600.0.39)] on darwin >>> import matplotlib.pyplot plt matplotlib support failed the backend : >>> import matplotlib >>> print(matplotlib.rcparams['backend']) macosx
Read more

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -

i new programming please pardon me if rookie mistake. i writing python script have defined functions create subplots of distributions. i have slider widget end user change value of variables(mu , sigma) , see effect on distribution. here's code import numpy np print np.__version__ import scipy print scipy.__version__ scipy.stats import norm, lognorm, uniform import matplotlib print matplotlib.__version__ import matplotlib.pyplot plt matplotlib.widgets import slider, button, radiobuttons, checkbuttons #####calculating mean , standard deviation##### global mu_a1 mu_a1 = 1 global mu_b1 mu_b1 = 10 global mu_c1 mu_c1 = -13 global sigma_a1 sigma_a1 = 0.14 global sigma_b1 sigma_b1 = 1.16 global sigma_c1 sigma_c1 = 2.87 mu_x01 = -11 sigma_x01 = 1.9 #####_____##### #####generating random data##### a1 = 0.75*mu_a1 + (1.25 - 0.75)*sigma_a1*np.random.sample(10000) b1 = 8*mu_b1 + (12 - 8)*sigma_b1*np.random.sample(10000) c1 = -12*mu_c1 + 2*sigma_c1*np.random.sample(10000)
Read more