如何在移动时在空中平稳移动汽车斗篷

如何解决如何在移动时在空中平稳移动汽车斗篷

我有一辆汽车，上面挂着一件红色斗篷。我设法移动了轮胎，但我不知道在汽车移动时移动斗篷应该是什么。

我同样想要的是这样的

代码笔 Html

<svg class="loading">
  
  <defs>
    <clipPath id="flagMask">
      <polygon id="mask" points="100,31 33.032,31 49.467,49.826 32.684,69 100,69    "/>
    </clipPath>
  </defs>
 
<path id="bg" fill="#2E3E4F" d="M100,89.811C100,95.438,100,89.811,100H10.189C4.562,89.811V10.189
            C0,4.562,10.189,0h79.621C95.438,10.189V89.811z"/>

<g clip-path="url(#flagMask)">
  <path class="flag" fill="#E94741" d="M100,31c-8.118,0-8.364,4.504-16.471,4.504
        c-7.657,0-8.026-4.504-16.47-4.504c-8.675,0-8.675,4.504c-8.091,0-8.091-4.504-16.471-4.504
        c-8.492,0-8.739,4.504-16.47,4.504C9.027,35.504,9.37,31,1.178,31c-8.734,0-8.589,4.504S-24.251,31-31.763,31v34.438
        c0,7.849,3.66,16.47,3.66c7.914,8.653-3.66,16.471-3.66c7.822,7.357,3.66s9.12-3.66,16.47-3.66
        c8.01,8.133,16.471,3.66c7.276,7.549-3.66,16.471-3.66c8.689,8.936,3.66c8.497,8.333-3.66,16.471-3.66V31z
        "/>
</g>
  
</svg>

Codepen JS

document.addEventListener("DOMContentLoaded",function(){
  var flag=document.querySelector(".flag");
  TweenMax.set(flag,{x: 65})
  TweenMax.to(flag,2,{x: 0,repeat:-1,ease:Linear.easeNone});
});

给你，这是我带斗篷的车。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1080 1080" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">

<g id="CAR">
    <path style="fill:#3300FF;" d="M546.835,152.465c-3.164-0.011-5.731-2.585-5.727-5.67c0.011-3.164,2.585-5.731,5.749-5.72   s5.731,2.585,5.727,5.67C552.573,149.908,549.999,152.476,546.835,152.465z M552.529,118.18l7.481,9.526l-17.011,0.012   l-0.047-9.497L552.529,118.18z M501.181,152.526c-3.164-0.011-5.731-2.585-5.727-5.67c0.011-3.164,5.67-5.727   c3.164,0.011,5.731,5.67C506.841,149.963,504.345,152.536,501.181,152.526z M554.479,112.478l-11.391-0.023   l0.01-15.268L489.773,97.2c-4.192-0.012-7.627,3.437-7.639,7.629l0.036,41.934l7.598-0.037c-0.021,6.328,5.119,11.398,11.447,11.42   s11.398-5.119,11.42-11.447l22.866-0.027c-0.021,11.42c6.328,0.021,11.398-5.119,11.42-11.447   l7.598-0.037l-0.009-19.067L554.479,112.478z"/>
    <circle style="fill:#999999;" cx="501.213" cy="147.069" r="7.887"/>
    <circle style="fill:#999999;" cx="546.583" cy="146.591" r="7.887"/>
    <g id="Coat" transform="matrix(1 0 7.450581e-09 1 0 7.629395e-06)">
        <g>
            <path style="fill:#FE0000;" d="M421.477,125.075c35.482,12.364,51.872-45.554,88.342-27.886     c-22.368-0.427-20.228,25.722-25.599,44.988c-1.77,9.529-21.966,54.064-35.612,20.311     C444.232,149.592,443.319,133.321,421.477,125.075z"/>

                <animate repeatCount="indefinite" fill="#000000" attributeName="d" dur="12s" values="               ">
                </animate>
        </g>
    </g>
    <path style="fill:#FFFFFF;" d="M498.596,133.019l-0.187-0.648l-2.45-0.034l0.028,5.698l2.613-0.033l0.028-2.371   c-0.023-0.714,0.407-1.155,0.964-1.19c0.315,0.025,0.774,0.219,0.219l0.421-2.34c0,0-0.302-0.182-0.78-0.14   C499.057,132.185,498.596,133.019,133.019z"/>
    <path style="fill:#FFFFFF;" d="M504.836,135.169c-0.037,0.472-0.298,0.768-0.697,0.816c-0.399,0.048-0.689-0.291-0.731-0.769   c0.037-0.472,0.298-0.768,0.697-0.816S504.794,134.692,504.836,135.169z M500.879,135.176c0.028,1.664,1.345,3.033,3.244,3.023   c1.9-0.009,3.269-1.326,3.241-2.99c-0.028-1.664-1.345-3.033-3.244-3.023C502.221,132.195,500.852,133.512,500.879,135.176z"/>
    <path style="fill:#FFFFFF;" d="M510.829,136.43c-0.157-0.012-0.302-0.182-0.29-0.339c0.025-0.315,0.285-0.611,0.836-0.567   C511.398,136.238,511.065,136.449,510.829,136.43z M510.768,132.153c-1.422-0.032-2.282,0.85-2.282,0.85l0.917,1.417   c0,0.43-0.441,0.981-0.398c0.871-0.011,0.985,0.552,0.552l-0.871,0.011c-1.821,0.016-2.59,0.746-2.592,1.775   c-0.001,1.028,0.729,1.798,1.921,1.733c0.95-0.005,1.411-0.839,1.411-0.839l0.187,0.648l2.45,0.034   c-0.011-0.871-0.009-1.899-0.014-2.849C513.906,133.507,512.589,132.138,510.768,132.153z"/>
    <path style="fill:#FFFFFF;" d="M517.333,135.2c-0.035-0.557,0.618-0.822c0.321-0.054,0.611,0.285,0.567,0.836   c-0.043,0.55-0.298,0.768-0.618,0.822C517.58,136.089,517.375,135.678,517.333,135.2z M514.726,135.154   c0.009,1.9,1.109,3.014,2.216,3.022c1.107,0.008,1.489-0.833,1.489-0.833s0,0.187,0.648l2.371,0.028l-0.013-7.913l-2.613,0.033   l0.008,2.928c0,0-0.41-0.823-1.517-0.831C515.753,132.149,514.717,133.254,514.726,135.154z"/>
    <polygon style="fill:#06E9FF;" points="524.165,129.802 521.08,129.797 521.074,137.945 524.159,137.95 524.139,135.179    526.038,135.17 525.98,137.934 529.065,137.939 529.071,129.791 525.986,129.786 526.006,132.557 524.106,132.566  "/>
    <polygon style="fill:#06E9FF;" points="533.485,135.042 536.492,135.04 536.519,132.669 533.513,132.67 533.477,132.114    536.72,132.131 536.747,129.759 530.42,129.738 530.487,137.971 536.978,137.926 536.999,135.634 533.521,135.598  "/>
    <path style="fill:#06E9FF;" d="M541.068,133.183l0.02-1.264l0.315,0.025c0.393,0.031,0.689,0.291,0.743,0.612   c-0.025,0.315-0.285,0.611-0.685,0.658L541.068,133.183z M546.076,137.927l-1.967-3.161c0,1.072-0.549,1.05-2.291   c-0.022-1.742-1.2-2.863-3.734-2.824c-1.742,0.022-3.412,0.128-3.412,0.128l-0.006,8.148l3.007-0.002l-0.026-2.692l0.079,0.006   l1.369,2.718L546.076,137.927z"/>
    <path style="fill:#06E9FF;" d="M555.416,133.833c0.028-2.371-1.881-4.261-4.573-4.235c-2.692,0.026-4.576,1.857-4.525,4.234   c-0.028,2.371,1.881,4.261,4.573,4.235C553.583,138.041,555.467,136.211,555.416,133.833z M552.173,133.817   c0.017,0.792-0.583,1.378-1.297,1.402c-0.714,0.023-1.3-0.577-1.317-1.369c-0.017-0.792,0.583-1.378,1.297-1.402   C551.57,132.424,552.156,133.024,552.173,133.817z"/>
    <polygon id="Star" style="fill:#FFFFFF;" points="501.509,143.295 506.176,141.287 504.916,146.252 508.335,150.08    503.168,150.387 500.609,154.775 498.686,150.036 493.709,148.934 497.604,145.679 497.133,140.579  ">
    
        <animateTransform accumulate="none" additive="replace" attributeName="transform" attributeType="XML" calcMode="linear" dur="10s" fill="remove" from="0 501.213 147.069" id="3" repeatCount="indefinite" restart="always" to="360 501.213 147.069" type="rotate">
        </animateTransform>
    </polygon>
    <polygon id="Star2" style="fill:#FFFFFF;" points="545.911,143.057 549.739,139.639 550.131,144.733 554.513,147.37    549.774,149.293 548.671,154.27 545.417,150.376 540.316,150.846 543.033,146.471 540.946,141.798  ">
    
        <animateTransform accumulate="none" additive="replace" attributeName="transform" attributeType="XML" calcMode="linear" dur="10s" fill="remove" from="0 546.544 146.455" id="3" repeatCount="indefinite" restart="always" to="360 546.544 146.455" type="rotate">
        </animateTransform>
    </polygon>
</g>
</svg>

是否有人可以帮助我在我共享的 codepen 代码中使用我的披风使我的披风具有如此平滑的移动。

非常感谢您的帮助，我已经 3 天无法完成这项工作了。

谢谢