0

我必须为我的学校制作一个带有变形的步行 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 result;
        }

        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>
4

0 回答 0