html5 - How to animate a diagonal line with TweenMax/EaselJS -


i have constellation want connect lines. these lines need animated start point end point. i've provided image illustrate need end result:

enter image description here

all of these stars , lines drawn html5 canvas using easeljs. provided bellow code far, "this.paths" variable contains x , y positions.

var graphics = this.shape.graphics;  graphics.beginstroke('#ffffff'); graphics.setstrokestyle(1);  for(var = 0; < this.path.length; i++) {     var path = this.path[i];      graphics.moveto(path[0].x / 2, path[0].y / 2);     graphics.lineto(path[0].x / 2, path[0].y / 2);     graphics.lineto(path[1].x / 2, path[1].y / 2); }  this.shape.alpha = 0.6;

thanks in advance.

all need in demo
http://www.createjs.com/demos/tweenjs/tween_sparktable
you've got set of coordinates (x1,y1) , (x2,y2). need use equation of straight line , draw lines dot dot smooth animation, play delays satisfactory results. seriously, demo covers of , more, can edit right there! i've played code bit , here diagonal line, paste code there , run enter image description here

var stage; var prevpoint, dataprovider, rect = new createjs.rectangle(20,20,700,360); var bar, container, currentclip; var selectedfunction, selecteditem, selectedindex = 0; var resetruninng = false, starttimeout; var clips = []; var activetween;  function init() {     stage = new createjs.stage("testcanvas");      var ease = createjs.ease; // shortcut.     dataprovider = [         {type: "divider", label: "ease equations"},      ];      var eases = document.getelementbyid("eases");     var cloneelement = document.createelement("a");     cloneelement.href = "#";      (var = 0, l = dataprovider.length; < l; i++) {         var item = dataprovider[i];          if (item.type == "divider") {             element = document.createelement("span");             element.innerhtml = item.label;             eases.appendchild(element);             continue;         }          var element = cloneelement.clonenode(true);         element.id = i;         element.onclick = selectitem;         element.innerhtml = item.label;         eases.appendchild(element);          if (item.label == "linear") {             selecteditem = element;             element.classname = "selected";         }     }      createjs.ticker.setfps(60);     createjs.ticker.addeventlistener("tick", tick);      prevpoint = new createjs.point(rect.x, rect.y);      container = stage.addchild(new createjs.container());     bar = container.addchild(new createjs.shape()                                      .set({alpha:0.7, x:rect.x, y:rect.y}));     bar.graphics.f("#000").setstrokestyle(1)      stage.update();      starttimeout = settimeout(run, 1000); }  function stop() {     ticker.off("tick", tick); }  function selectitem() {     cleartimeout(starttimeout);     if (clips.length > 0) { fade(); }      if (selecteditem != null && selecteditem != this) {         selecteditem.classname = "";     }      selecteditem = this;     selectedindex = this.id;     selecteditem.classname = "selected";     selectedfunction = dataprovider[selectedindex].type;      resetruninng = true;     //createjs.tween.get(bar, {override: true}).to({x: rect.x}, 500).call(resetcomplete);     return false; }  function run(easetype) {     currentclip = stage.addchild(new createjs.shape());     clips.push(currentclip);     prevpoint.setvalues(rect.x, rect.y);     activetween = createjs.tween.get(bar, {override: true}).to({x: rect.x+rect.width}, 1500, easetype); }  function resetcomplete() {     bar.x = rect.x;     resetruninng = false;     currentclip = null;     prevpoint.setvalues(rect.x, rect.y);      run(selectedfunction); }  function tick(event) {     if (!resetruninng && currentclip != null) {         var hue = (selectedindex / dataprovider.length) * 360;         var g = currentclip.graphics                 .setstrokestyle(1, "round", "round")                 .beginstroke(createjs.graphics.gethsl(hue, 50, 50))                 .moveto(prevpoint.x, prevpoint.y);          prevpoint.x = bar.x;         prevpoint.y = rect.x+ activetween.position/1500 * rect.height;          g.lineto(prevpoint.x, prevpoint.y);          stage.update(event);     } else if (resetruninng) {         stage.update(event);     } }  function fade() {     (var = 0; < clips.length; i++) {         var clip = clips[i];         createjs.tween.get(clip, {override: true})                 .to({alpha: clip.alpha - 0.4}, 1000)                 .call(fadetweencomplete);     } }  function fadetweencomplete(tween) {     var clip = tween._target;     if (clip.alpha <= 0) {         stage.removechild(clip);         var index = clips.indexof(clip);         clips.splice(index, 1);     } }

update:

here approach based on simple tick method

http://jsfiddle.net/t21v9bo4/


Comments

Post a Comment

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

i have web app developed using google app script htmlservice , html form, populating excel sheet in google drive using spreadsheetapp . , 1 section calling contentservice download data excel file. function doget(e) { // read excel sheet //getappfile(); // render application html template return htmlservice.createtemplatefromfile('index').evaluate() .settitle('go smart') .setsandboxmode(htmlservice.sandboxmode.iframe); } function downloaddoublequatecsvfile() { var sheetid = propertiesservice.getscriptproperties().getproperty('sheetid'); var ss = spreadsheetapp.openbyid(sheetid).getactivesheet(); //var ss = spreadsheetapp.getactivespreadsheet().getactivesheet(); var maxcolumn = ss.getlastcolumn(); var maxrow = ss.getlastrow(); var data = ss.getrange(1, 1, maxrow, maxcolumn).getvalues(); if (data.length > 1) { var csv = ""; (var row = 0; row < data.length; row++) { (var c...
Read more

javascript - Function overwritting -

is there way overwrite function or event handling in function? using addeventlistener, can have many event handlers on element want var test=document.getelementbyid("div"); test.addeventlistener("click",function(){alert("im first");},false); test.addeventlistener("click",function(){alert("im second");},false); // alerts "im first" , after "im second" but if want overwrite function/event example based on client width example this function one() { alert("first"); } function two() { alert("second"); } window.onresize = function() { var test = document.getelementbyid("div"); if (window.innerwidth > 500) { test.onclick = 1 } else { test.onclick = two; } } is possible in javascript? in case use effective little known approach. addeventlistener can accept object property handleevent event handler. in case it's easy overwr...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more