Блог

Главная - Вопросы по программированию - Как сделать анимацию ходьбы с помощью svg-морфинга?

Как сделать анимацию ходьбы с помощью svg-морфинга?

#javascript #animation #svg #svg-morphing

Вопрос:

Мне нужно сделать ходячую анимацию svg с морфингом для моей школы. Это мой первый опыт работы с JavaScript, поэтому я не могу достаточно извиниться за свой ужасный код. Мне приходилось выполнять различные, гораздо более простые задачи, но я просто не могу понять эту. Голова и туловище двигаются, но у меня много ошибок с конечностями, и сейчас я в полном отчаянии. Вот код svg, если это необходимо

 <html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
    <script src="https://unpkg.com/flubber@0.3.0"></script>
    <script src="https://unpkg.com/d3-interpolate-path/build/d3-interpolate-path.min.js"></script>
</head>
<body>
    <object width="500" height="500" id="figure0" data="walk.svg" type="image/svg xml"></object>
    <button onclick="load0();">Load Data</button>
    <button onclick="animate0();">Animate</button>
    <div class="slidecontainer" width="100%">
        <input type="range" min="1" max="100" value="0" class="slider" id="myRange" style="width:100%" oninput="update0();">
    </div>
    <p id="data0">Data: </p>
</body>
<script>
    var data0 = document.getElementById("data0");
    class BodyInter {
        constructor() {
            this.head = new Array();
            this.torso = new Array();
            this.lhand = new Array();
            this.rhand = new Array();
            this.lfoot = new Array();
            this.rfoot = new Array();
        }

        load(svg) {
            for (var q = 1; q <= 6; q  ) {
                this.head.push(svg.getElementById("head"   q));
                this.torso.push(svg.getElementById("torso"   q));
                this.lhand.push(svg.getElementById("lhand"   q));
                this.rhand.push(svg.getElementById("rhand"   q));
                this.lfoot.push(svg.getElementById("lfoot"   q));
                this.rfoot.push(svg.getElementById("rfoot"   q));
            }

            this.headinterp = BodyInter.createInterpolator(this.head);
            this.torsointerp = BodyInter.createInterpolator(this.torso);
            this.lhandinterp = BodyInter.createInterpolator(this.lhand);
            this.rhandinterp = BodyInter.createInterpolator(this.rhand);
            this.lfootinterp = BodyInter.createInterpolator(this.lfoot);
            this.rfootinterp = BodyInter.createInterpolator(this.rfoot);
        }

        static createInterpolator(paths) {
            var result = new Array();
            for (var q = 0; q < paths.length - 1; q  ) {
                console.log("paths[q].getAttribute("d") = "   paths[q].getAttribute("d"));
                result.push(new flubber.interpolate(paths[q].getAttribute("d"), paths[q   1].getAttribute("d"), {
                    string: "true",
                    maxSegmentLength: 1
                }));
            }
            result.push(new flubber.interpolate(paths[paths.length - 1].getAttribute("d"), paths[0].getAttribute("d"), {
                string: "true",
                maxSegmentLength: 1
            }));
            return resu<
        }

        static doInterpolate(interpolators, x) {
            console.assert(interpolators.length > 0);
            if (x <= 0) {
                return interpolators[0](0);
            }
            if (x > interpolators.length) {
                return interpolators[interpolators.length - 1](1.);
            }
            var decimal = x - Math.trunc(x);
            console.log("x = "   x);
            console.log("d = "   decimal);
            console.log("interpolators.length = "   interpolators.length);
            return interpolators[Math.trunc(x)](decimal);
        }

        headset(x) {
            console.assert(this.head.length > 0);
            this.head[0].setAttribute("d", BodyInter.doInterpolate(this.headinterp, x));
        }

        torsoset(x) {
            console.assert(this.torso.length > 0);
            this.torso[0].setAttribute("d", BodyInter.doInterpolate(this.torsointerp, x));
        }

        lhandset(x) {
            console.assert(this.lhand.length > 0);
            this.lhand[0].setAttribute("d", BodyInter.doInterpolate(this.lhandinterp, x));
        }

        rhandset(x) {
            console.assert(this.rhand.length > 0);
            this.rhand[0].setAttribute("d", BodyInter.doInterpolate(this.rhandinterp, x));
        }

        lfootset(x) {
            console.assert(this.lfoot.length > 0);
            this.lfoot[0].setAttribute("d", BodyInter.doInterpolate(this.lfootinterp, x));
        }

        rfootset(x) {
            console.assert(this.rfoot.length > 0);
            this.rfoot[0].setAttribute("d", BodyInter.doInterpolate(this.rfootinterp, x));
        }

        setshape(x) {
            this.headset(x);
            this.torsoset(x);
            this.lhandset(x);
            this.rhandset(x);
            this.lfootset(x);
            this.rfootset(x);
            data0.innerHTML = "data: "   x;
        }
    }

    var interpolator = new BodyInter();

    function load0() {
        var figure0 = document.getElementById("figure0");
        var svgdoc = figure0.getSVGDocument();
        console.log(svgdoc);
        interpolator.load(svgdoc);
    }

    function update0() {
        var slider = document.getElementById("myRange");
        value = 6. * slider.value / 100;
        interpolator.setshape(value);
    }

    function update1() {
        var slider1 = document.getElementById("myRange2");
        console.log("ch: "   slider1.value);
        var intp = interpolator2(slider1.value / 100.);
        figbody1.setAttribute("d", intp);
    }

    function animate0() {
        var obj = {
            t: 0
        };
        gsap.to(obj, {
            duration: 1,
            t: 6,
            ease: "none",
            repeat: -1,
            onUpdate: function() {
                interpolator.setshape(obj.t);
            }
        });
    }
</script>
Метки: