使用jQuery动画时偏移元素

时间：2017-07-11 06:46:03

标签： javascript jquery html css svg

我制作了一个动画页面，有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);
    });

2 个答案:

答案 0 :(得分：3)

当你说left时，它意味着圆圈的边界矩形的左边。不是圆圈中心点的左边。你需要考虑圆的宽度。例如。圆心是left+width/2。

我强烈建议您使用SVG <animateMotion>，它可用于沿特定路径为对象设置动画。

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

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您的元素将沿元素的左上角进行动画处理。它似乎只是一个圆圈，因为你以这种方式设计它。

要纠正此问题，您可以使用负边距来偏移元素，使其中心位于您希望设置动画的路径中。你的外圆是32px所以使用-16px的边距。然后，通过将其边距偏移16px的一半来校正内部元素。

我创建了一个没有边框半径且没有边距的圆圈，所以你可以看到元素的左上角是如何跟在线之后的。

＆＃13;
＆＃13; 
$(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);
            });
＆＃13; 
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%;
  
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题