Javascript 如何使用svg变形制作行走动画？
我必须为我的学校制作一个带变形的行走svg动画。这是我第一次使用JavaScript，所以我无法为我糟糕的代码道歉。我不得不做各种简单得多的任务，但我就是搞不懂这个。头部和躯干都在移动，但我的四肢有很多错误，我现在非常绝望。Javascript 如何使用svg变形制作行走动画？,javascript,animation,svg,svg-morphing,Javascript,Animation,Svg,Svg Morphing,我必须为我的学校制作一个带变形的行走svg动画。这是我第一次使用JavaScript，所以我无法为我糟糕的代码道歉。我不得不做各种简单得多的任务，但我就是搞不懂这个。头部和躯干都在移动，但我的四肢有很多错误，我现在非常绝望。 加载数据 使有生气 数据： var data0=document.getElementById（“data0”）； 班长{ 构造函数（）{ this.head=新数组（）； this.torso=新数组（）； this.lhand=新数组（）； this.rhand=新
加载数据
使有生气
数据：
var data0=document.getElementById（“data0”）；
班长{
构造函数（）{
this.head=新数组（）；
this.torso=新数组（）；
this.lhand=新数组（）；
this.rhand=新数组（）；
this.lfoot=新数组（）；
this.rfoot=新数组（）；
}
加载（svg）{
对于（var q=1；q=0）；
if（x插值器长度）{
返回插值器[interpolators.length-1]（1.）；
}
var decimal=x-数学真值（x）；
console.log（“x=”+x）；
console.log（“d=“+decimal”）；
console.log（“interpolators.length=“+interpolators.length”）；
返回插值器[Math.trunc（x）]（十进制）；
}
耳机（x）{
console.assert（this.head.length>0）；
this.head[0].setAttribute（“d”，BodyInter.doInterpolate（this.headinterp，x））；
}
扭转组（x）{
console.assert（this.dorsty.length>0）；
this.torso[0].setAttribute（“d”，BodyInter.doInterpolate（this.torsointerp，x））；
}
朗德集（x）{
断言（this.lhand.length>0）；
this.lhand[0].setAttribute（“d”，BodyInter.doInterpolate（this.lhanInterp，x））；
}
rhandset（x）{
断言（this.rhand.length>0）；
this.rhand[0].setAttribute（“d”，BodyInter.doInterpolate（this.rhandinterp，x））；
}
lfootset（x）{
断言（this.lfoot.length>0）；
this.lfoot[0].setAttribute（“d”，BodyInter.doInterpolate（this.lfootinterp，x））；
}
rfootset（x）{
断言（this.rfoot.length>0）；
this.rfoot[0].setAttribute（“d”，BodyInter.doInterpolate（this.rfootinterp，x））；
}
固定形状（x）{
这个。耳机（x）；
这是torsoset（x）；
这个.lhandset（x）；
这个.rhandset（x）；
这是lfootset（x）；
这是rfootset（x）；
data0.innerHTML=“数据：”+x；
}
}
var插值器=新的BodyInter（）；
函数load0（）{
var figure0=document.getElementById（“figure0”）；
var svgdoc=figure0.getSVGDocument（）；
console.log（svgdoc）；
内插器负载（svgdoc）；
}
函数update0（）{
var slider=document.getElementById（“myRange”）；
值=6。*slider.value/100；
插值器。设置形状（值）；
}
函数update1（）{
var slider1=document.getElementById（“myRange2”）；
console.log（“ch:+slider1.value”）；
var intp=插值器2（滑块1.value/100）；
figbody1.setAttribute（“d”，intp）；
}
函数animate0（）{
var obj={
t:0
};
gsap.to（obj{
持续时间：1，
t:6，
轻松：“没有”，
重复：-1，
onUpdate:function（）{
插值器设置形状（对象t）；
}
});
}
<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>