I am trying to animate the drawing of a box that will then fill in when it is plete. 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

I am trying to animate the drawing of a box that will then fill in when it is plete. 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

• javascript
• svg
• jquery-animate
• line

Share Improve this question Follow asked Feb 6, 2018 at 13:51 Jesta1972Jesta1972 1511 gold badge11 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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.