用jQuery動畫時偏移元素

Question

我正在制作一個動畫頁面，其中包含3個元素，它們在svg線上移動，但我不知道為什么，它們相互抵消。 我認為這是jQuery中的問題，但如何解決。

有JSFiddle JQUERY

    $(document).ready(function() {
        // FIRST CIRCLE
        $(".circle-1").animate({left: '0%', top: '0%'}, 5000);
        $(".circle-1").animate({left: '100%', right: '0', top: '50%'}, 5000);
        $(".circle-1").animate({left: '0', right: '0', top: '100%'}, 5000);
        $(".circle-1").animate({left: '100%', right: '0', top: '0'}, 5000);
        $(".circle-1").animate({left: '50%', right: '0', top: '100%'}, 5000);
        // SECOND CIRCLE
        $(".circle-2").animate({left: '50%', right: '0', top: '0%'}, 5000);
        $(".circle-2").animate({left: '100%', right: '0', top: '100%'}, 5000);
        $(".circle-2").animate({left: '0%', right: '0', top: '50%'}, 5000);
        $(".circle-2").animate({left: '100%', right: '0', top: '0%'}, 5000);
        $(".circle-2").animate({left: '0%', right: '0', top: '100%'}, 5000);
        // THIRD CIRCLE
        $(".circle-3").animate({left: '0%', right: '0', top: '0%'}, 5000);
        $(".circle-3").animate({left: '100%', right: '0', top: '50%'}, 5000);
        $(".circle-3").animate({left: '0%', right: '0', top: '100%'}, 5000);
        $(".circle-3").animate({left: '50%', right: '0', top: '0%'}, 5000);
        $(".circle-3").animate({left: '100%', right: '0', top: '100%'}, 5000);
    });

Answer 1

當您說left它表示圓的邊界矩形的左側。 不是圓心的左側。 您需要考慮圓的寬度。 例如，圓心為left+width/2 。

我強烈建議您使用SVG <animateMotion> ，它可用於沿特定路徑對對象進行動畫處理。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

 <svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 744.09448819 1052.3622047"> <g id="layer1"> <path id="theMotionPath" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m471.58 15.998-208.95 112.12-72.99-65.317-17.35 113.79-22.59 12.12-132.16-168.08-0.79 0.612 132.06 167.95-146.61 78.67 119.18 242.64l-18.807 123.33-79.902 32.35 0.375 0.92774 79.352-32.127-35.748 234.45 0.90039 0.36719 136.85-190.29 156.91 319.46 224.67-253.79 120.3 153-12.31-275 53.88-60.86-58.97-52.77-4.92-110.01 45.38-18.38-49.34-69.9-12.42-277.5-92.59 128.74-103.41-146.5zm-0.3 1.299 103.1 146.06-106.66 148.29-204.29-182.82 207.85-111.53zm195.43 19.385 12.22 273.07-103.33-146.39 91.11-126.68zm-476.35 28.097 71.34 63.841-88.3 47.38 16.96-111.22zm72.133 64.551 204.65 183.13-105.16 146.22-194.06-246.8 5.2832-34.65 89.281-47.906zm312.5 34.889 104.03 147.38 3.9082 87.275-81.055 32.816l-133.41-119.38 106.51-148.1zm-402.88 13.609-5.0293 32.98-16.746-21.297 21.775-11.684zm-22.67 12.16 17.43 22.17-45.23 296.61-118.12-240.48 145.92-78.3zm18.279 23.248 193.66 246.29-70.545 98.09-121.11 49.033-47.305-96.309 45.303-297.1zm512.37 99.875 47.713 67.592-43.891 17.77-3.8223-85.361zm-212.2 0.0195 132.95 118.97-197.03 79.77-41.184-52.377 105.27-146.37zm215.08 86.799 4.8672 108.69-85.139-76.188 80.271-32.5zm-81.305 32.918 86.234 77.168 5.0508 112.8l-106.92 120.79-181.57-230.92 197.22-79.85zm-239.65 27.496 40.826 51.92-110.27 44.646 69.447-96.566zm326.93 50.605 57.494 51.449-52.533 59.344-4.9609-110.79zm-566.79 1.1211 46.639 94.951-65.139 26.373 18.5-121.32zm281.34 1.0117 181.86 231.29-223.8 252.81-156.49-318.59 86.414-120.16 112.01-45.35zm-113.75 46.055-85.176 118.44-34.396-70.027 119.57-48.408zm-120.5 48.785 34.664 70.57-135.95 189.03 35.525-232.98 65.758-26.623zm523.78 16.34 12.12 270.86-118.49-150.71 106.37-120.15z" fill-rule="evenodd"/> </g> <circle cx="" cy="" r="10" fill="red"> <!-- Define the motion path animation --> <animateMotion dur="30s" repeatCount="indefinite"> <mpath xlink:href="#theMotionPath"/> </animateMotion> </circle> </svg> 

Answer 2

您的元素沿元素的左上角動畫。 它似乎只是一個圓圈，因為您以這種方式設置了樣式。

要解決此問題，可以使用負邊距偏移元素，以使元素的中心位於您要設置動畫的路徑中。 您的外圓為32px，因此請使用-16px作為邊距。 然后，您可以通過將內部元素的邊距偏移16px的一半來對其進行校正。

我使第一個圓沒有邊界半徑和邊距，因此您可以看到元素的左上角在這條線之后的樣子。

 $(document).ready(function() { // FIRST CIRCLE $(".circle-1").animate({left: '0%', top: '0%'}, 5000); $(".circle-1").animate({left: '100%', right: '0', top: '50%'}, 5000); $(".circle-1").animate({left: '0', right: '0', top: '100%'}, 5000); $(".circle-1").animate({left: '100%', right: '0', top: '0'}, 5000); $(".circle-1").animate({left: '50%', right: '0', top: '100%'}, 5000); // SECOND CIRCLE $(".circle-2").animate({left: '50%', right: '0', top: '0%'}, 5000); $(".circle-2").animate({left: '100%', right: '0', top: '100%'}, 5000); $(".circle-2").animate({left: '0%', right: '0', top: '50%'}, 5000); $(".circle-2").animate({left: '100%', right: '0', top: '0%'}, 5000); $(".circle-2").animate({left: '0%', right: '0', top: '100%'}, 5000); // THIRD CIRCLE $(".circle-3").animate({left: '0%', right: '0', top: '0%'}, 5000); $(".circle-3").animate({left: '100%', right: '0', top: '50%'}, 5000); $(".circle-3").animate({left: '0%', right: '0', top: '100%'}, 5000); $(".circle-3").animate({left: '50%', right: '0', top: '0%'}, 5000); $(".circle-3").animate({left: '100%', right: '0', top: '100%'}, 5000); }); 

 html{ width:100%; height:100% } body{ width:100%; height:100%; overflow: hidden } .page{ width: 100%; height: 100%; position: relative; display: flex; align-items: center; /*background-image: url('../images/grid.svg');*/ background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #0099ff; /* Old browsers */ background-color: -moz-linear-gradient(top, #0099ff 0%, #085c8b 100%); /* FF3.6-15 */ background-color: -webkit-linear-gradient(top, #0099ff 0%,#085c8b 100%); /* Chrome10-25,Safari5.1-6 */ background-color: linear-gradient(to bottom, #0099ff 0%,#085c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099ff', endColorstr='#085c8b',GradientType=0 ); /* IE6-9 */ } .page .logo{ width: 257px; height: 54px; background-image: url(../images/logo.svg); background-repeat: no-repeat; background-size: 100%; position: absolute; top: 40px; left: 120px; } .content{ color: white; position: relative; width: 100%; text-align: center; } .content .title{ font-weight: 100; font-size: 72px; } .content .sub-title{ font-size: 28px; } .page .lines{ width: 100%; height: 100%; z-index: 1; } .page .anim-elem{ width: 100%; height: 100%; position: absolute; z-index: 10; } .page .anim-elem .circle{ display: flex; align-items: center; position: absolute; background: rgba(255, 255, 255, 0.25); width: 32px; height: 32px; border-radius: 100%; /* transform: translate(-32px);*/ margin: -16px -16px } .page .anim-elem .circle:after{ content: ''; background: white; content: ''; background: white; width: 14px; height: 14px; border-radius: 100%; position: absolute; margin: 8px 8px; left: 0; right: 0; } .page .anim-elem .circle.circle-1{ top: 100%; left: 50%; border-radius: 0% !important; margin:0 !important; } .page .anim-elem .circle.circle-2{ top: 100%; left: 0%; } .page .anim-elem .circle.circle-3{ top: 100%; left: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="page"> <div class="lines"> <svg height="100%" width="100%"> <!-- TOP LEFT --> <line x1="0" y1="0" x2="100%" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="0" y1="0" x2="25%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="0" y1="0" x2="100%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="0" y1="0" x2="50%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <!-- TOP RIGHT --> <line x1="100%" y1="0" x2="0" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="100%" y1="0" x2="0" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="50%" y1="100%" x2="100%" y2="0" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="75%" y1="100%" x2="100%" y2="0" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <!-- TOP FIRST --> <line x1="25%" y1="0" x2="0" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="25%" y1="0" x2="50%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <!-- TOP SECOND --> <line x1="50%" y1="0" x2="0" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="50%" y1="0" x2="25%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="50%" y1="0" x2="75%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="50%" y1="0" x2="100%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <!-- TOP THIRD --> <line x1="75%" y1="0" x2="50%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="75%" y1="0" x2="100%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <!-- BOTTOM LINES --> <line x1="0" y1="100%" x2="100%" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> <line x1="100%" y1="100%" x2="0" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" /> </svg> </div> <div class="anim-elem"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div> </div>