Question

我有一个基本的动画，我想用SVG做。但是我并不是100％肯定如何让它从中心动画。作为SVG动画的新手，我知道如何制作简单的动画，但是我无法找到对我所遇到的问题的可靠答案。

/*MAIN ANIMATION*/

.line1,
.line2 {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
            transform: rotate(90deg);
}

.line1 {
    top: 0px;
    animation: line1 5s linear forwards; /*ANIMATION NAME AND TIMING*/
}

.line2 {
    bottom: 0px;
    animation: line2 5s linear forwards; /*ANIMATION NAME AND TIMING*/
}

.animationText {
    width: 100%;
    font-size: 30px;
    font-weight: normal;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
}

这是一个关于线条现在看起来像什么的小提琴： https://jsfiddle.net/7mastya4/6/

所以简而言之，我希望这些线从中心向外动画。我知道如何做标准动画，但对SVG不熟悉并更改动画原点对我来说有点新鲜。

感谢您的帮助。

Answer 1

这样的东西？

.animline {
  fill: none;
  stroke: black;
  stroke-width: 2;
  -webkit-animation: expand-from-centre 5s linear forwards;
  animation: expand-from-centre 5s linear forwards;
}

@-webkit-keyframes expand-from-centre
{
  from {
    stroke-dasharray: 0 300;
    stroke-dashoffset: -150;
  }
  
  to {
    stroke-dasharray: 300 300;
    stroke-dashoffset: 0;
  }
}


@keyframes expand-from-centre
{
  from {
    stroke-dasharray: 0 300;
    stroke-dashoffset: -150;
  }
  
  to {
    stroke-dasharray: 300 300;
    stroke-dashoffset: 0;
  }
}

<svg>
  <line class="animline" x1="0" y1="75" x2="300" y2="75"/>
</svg>

SVG动画：从中心画一条线

1 个答案: