Question

我正在尝试为一个框的绘制设置动画，然后在完成时填充该框。我正在JS中学习一个类，所以代码必须是JS。问题是盒子的右侧不能正确动画。如果我为它设置了一组坐标，它会从底部到顶部而不是从顶线开始的角落进行动画制作。当我反转坐标时，它会从正确的角落进行动画处理，但不是绘制线条，而是以实线开始并从中移开，就像消失的线条一样。此外，左侧和右侧线似乎都偏离指定的区域。例如，我的区域是600 x 400，线条偏离页面底部。如果我将尺寸更改为600 x 600，则线条仍会离开页面。整个项目的重点是我们使用SVG库对房屋进行编码，我想创建一个动画，使其看起来好像房子在填充颜色之前被绘制。这更多是为了我自己的知识，因为它不再是一项任务。我的jsfiddle有2个链接，第一个是绘制框的问题代码。第二个是我希望动画的房子看起来像。

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

Answer 1

makeBox功能有两个问题：

.size方法使用2个参数而不是1个（x和y维度。）
对于坐标系反向绘制的线条，开始坐标和线长都需要设置动画。

更新的功能：

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));
            }
         )
    ;
}

.during方法的使用记录在案here。

在javascript中绘制框

1 个答案: