javascript - SVG 断路器/开关合闸动画

Question

我正在尝试设计一个断路器/开关，它可以在某些事件中关闭和打开。我使用 SVG 设计了断路器，并使用 css 动画和转换属性来为它的关闭设置动画。

使用 transform-origin: bottom 但它没有按预期工作。请帮助我以下是我的 css 代码:

.closeme {
    -webkit-animation-name: closeanimaton;
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: -1.5s;
    -webkit-animation-direction: alternate;
    -webkit-transform-origin: bottom;
    animation-name: closeanimaton;
    animation-duration: 3s; 
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-delay: -1.5s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    transform-origin: bottom;
    -moz-animation: none;
}

@-webkit-keyframes closeanimaton { 
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(35deg); }
}

@keyframes closeanimaton { 
    0% { transform: rotate(0deg); }
    100% { transform: rotate(35deg); }
}

这是codepen链接，我有完整的代码，请随时编辑:

https://codepen.io/anon/pen/OQexEP

Answer 1

这可能不是您寻求帮助的目的，但我发现使用 D3 来创建形状并向其添加动画要容易得多。看看我下面的片段。它可能会给您灵感，让您了解如何制作 SVG 动画。

var svg = d3.select('body').append("svg").attr("width",200).attr("height",150);
svg.style("background-color","black");



var part1 = svg.append("path").attr("d","M100,0 L100,30").attr("fill","none").attr("stroke","white");

var part2 = svg.append("path").attr("d","M100,80 L100,150").attr("fill","none").attr("stroke","white");

var moving_part = svg.append("g").attr("transform","translate(100,80) rotate(45)");

moving_part.append("path").attr("d","M0,0 L0,-50").attr("fill","none").attr("stroke","gold").attr("stroke-width",2);
moving_part.append("circle").attr("cy",-50).attr("r",5).attr("fill","gold");

moving_part.transition().delay(1000).duration(3000).attr("transform","translate(100,80) rotate(0)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>