CODEWITHSUNDEEP
javascriptsvgjquery-animateline
Jesta1972
Jesta1972

Reputation: 15

draw box in javascript

I am trying to animate the drawing of a box that will then fill in when it is complete. I am taking a class in JS so the code has to be JS. The problem is that the right side of the box will not animate correctly. If I put in one set of coordinates for it it animates from the bottom to the top instead of from the corner where the top line started. When I reverse the coordinates it does animate from the proper corner but instead of drawing the line it starts with a solid line and takes away from it, like a disappearing line. Also both the left and right side lines seem to go off the area assigned. For example my area is 600 x 400 and the lines go off the bottom of the page. If I change the dimensions to 600 x 600 the lines still go off the page. The point of this whole project is that we have coded houses using the SVG library and I want to create an animation to make it look as though the house is being drawn before it fills in the colors. This is more for my own knowledge as it is no longer an assignment. There are 2 links to my jsfiddle, the first one is going to be the problem code of drawing the box. The second is what the house that I would like to animate is to look like.

drawing box

    "use strict"
    var draw = SVG('drawing').size(600, 400);

    function makeBox()

    {
    var line1 = draw.line(25,175,26,175);
    line1.stroke({width:1});
    line1.animate(4000).size(550);

    var line2 = draw.line(575,175,575,176);
    line2.stroke({width:1});
    line2.animate({duration:4000,delay:4000}).size(200).move(575,375);


    var line3 = draw.line(575,375,574,375);
    line3.stroke({width:1});
    line3.animate({duration:4000,delay:8000}).move(25,375).size(550);

    var line4 = draw.line(25,375,25,374);
    line4.stroke({width:1});
    line4.animate({duration:4000,delay:12000}).size(200).move(25,175);
    }
    makeBox();


    function makeBaseb1(bx,by,c,s)

    {
    var Baseb1 = draw.rect(550,200).opacity(0).fill(c).stroke();
    Baseb1.animate({delay:'16s'}).opacity(1).fill({color:c});
    Baseb1.stroke({width:s,color:'black'});
    Baseb1.move(bx,by);

    }
    makeBaseb1(25,175,'#FF9900',1);

house

Upvotes: 0

Views: 18591

Answers (1)

collapsar
collapsar

Reputation: 17238

There are 2 issues with the makeBox function:

  • The .size method taks 2 arguments instead of 1 (x and y dimension).
  • For the line drawing in the reverse direction wrt the coordinate system, both, starting coordinates and line length, need to be animated.

The updated function:

function makeBox() {
    var line1 = draw.line(25,175,26,175);
    line1.stroke({width:1});
    line1.animate(4000).size(550,0);

    var line2 = draw.line(575,175,575,176);
    line2.stroke({width:1});
    line2.animate({duration:4000,delay:4000}).size(0,200); 

    var line3 = draw.line(574,375,575,375);
    line3.stroke({width:1});
    line3
        .animate({duration:4000,delay:8000})
        .during(
            function (pos, morph, eased, situation) {
                line3.x(morph(574,25));
                line3.size(morph(1,550),morph(0,0));
            }
         )
    ;

    var line4 = draw.line(25,374,25,375);
    line4.stroke({width:1});
    line4
        .animate({duration:4000,delay:12000})
        .during(
            function (pos, morph, eased, situation) {
                line4.y(morph(374,175));
                line4.size(morph(0,0),morph(1,200));
            }
         )
    ;
}

The use of the .during method is documented here.

Upvotes: 1

Related Questions