gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:33:15 27 4
gpt4 key购买 nike

我正在尝试设计一个断路器/开关,它可以在某些事件中关闭和打开。我使用 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

最佳答案

这可能不是您寻求帮助的目的,但我发现使用 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>

关于javascript - SVG 断路器/开关合闸动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49123999/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com