gpt4 book ai didi

javascript - 如何设置动画让元素绕着圆圈移动?

转载 作者:可可西里 更新时间:2023-11-01 13:45:23 25 4
gpt4 key购买 nike

我正在努力实现您在图片中看到的效果:

enter image description here

图片在这里,以防它对您不利:http://imgur.com/a/wVtgm

你可能只看到一个图标,但实际上是 4 个图标,图片代表图标应该走的路径。

我已经创建了一个片段或者这里是一个 Codepen

var outerBox = $('.eight-box'),
boxHeight = $(outerBox).height(),
boxWidth = $(outerBox).width();
function changeNumbers() {
var pos1 = $('.pos-1'),
pos2 = $('.pos-2'),
pos3 = $('.pos-3'),
pos4 = $('.pos-4');

$('.col-1').addClass('pos-1');
$('.col-1').removeClass('pos-4')
$('.col-2').addClass('pos-2');
$('.col-2').removeClass('pos-4')
$('.col-3').addClass('pos-3');
$('.col-3').removeClass('pos-4')

};
// var refreshId = setInterval(changeNumbers, 1500);
changeNumbers();
.eight-box {
position: relative;
display: block;
margin: 1em auto;
width: 16em;
height: 16em;
font-family: sans-serif;
font-size: 20px;
border: 1px solid;
border-radius: 50%;
}
.fig-8 {
display: block;
position: absolute;
color: #fff;
width: 2em;
height: 2em;
line-height: 2;
text-align: center;
font-weight: bold;
font-smoothing: antialiased;
transition: all .5s linear;
overflow: hidden;
z-index: 5;
}

.col-1 {
background: #1abc9c;
}
.col-2 {
background: #9b59b6;
}
.col-3 {
background: #27ae60;
}
.col-4 {
background: #2c3e50;
}

.pos-1 {
top: 30%;
left: 93.75%;
}
.pos-2 {
top: 66.25%;
left: 88.75%;
}
.pos-3 {
top: 72.92%;
right: 83.125%;
}
.pos-4 {
top: 19.58%;
right: 88.75%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eight-box">
<div class="fig-8 col-1 pos-4">1</div>
<div class="fig-8 col-2 pos-4">2</div>
<div class="fig-8 col-3 pos-4">3</div>
<div class="fig-8 col-4 pos-4">4</div>
</div>

这是我应该达到的目标的描述:

1 - 所有图标在页面加载时必须位于同一位置,也就是您可能会看到带有数字 4 的图标的位置。

2 - 然后,每个图标都应该围绕圆圈开始其路径,并坚持其常规状态/位置。我的意思是:数字 3 的图标开始它的轨道,然后一旦它到达它的位置,它应该停留在那里,与其他图标一样。

现在,如果你看到我做的代码片段,图标会在页面加载后通过到达其原始位置来做一些动画,但我无法实现我需要的触发图标返回到绕一圈回到原来的位置。

TL;DR:图标从页面加载时图标编号 4 的位置开始,然后图标应通过从左到右绕圆圈移动回到其原始位置。

例如:图标 4 应该留在原处。图标 3 应围绕圆圈向下移动一些像素。等等。

所以他们都应该从左边进入并向右移动(就像跟随领导者一样)并在他们在图片或 codepen/codespnippet 中的位置结束。

有什么建议吗?

最佳答案

您可以使用动画和 transform:rotate() 从这两支笔中获得灵感。

  • one与 inputs 元素进行交互:单击 1 以显示 2, 3, 4, 5 。然后单击 2,然后单击 3,... 以查看它们绕着圆圈转。第一次单击后,您还可以使用箭头键控制它们。 (在代码方面,代码片段比笔优化了一点。)

input[name="group"] {position:absolute; right:100vw}

.circle {
position: relative;
width: 50vh;
height: 50vh;
margin: 25vh auto;
border: solid 1px;
border-radius: 100%;
}

.rotate, .rotate label {transition:1s;}

.rotate {
display: flex;
align-items: flex-end;
position: absolute;
top: 50%;
left: 50%;
width: 10vh;
height: 60%;
margin-left: -5vh;
transform-origin: 5vh 0;
}
.rotate:first-child {z-index:1;}

.rotate label {
display: flex;
align-items: center;
justify-content: center;
width: 10vh;
height: 10vh;
border: solid 1px;
border-radius: 100%;
background: #0095FF;
cursor:pointer
}

/* one */
#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a label {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b label {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c label {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d label {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e label {transform:rotate(-0deg);}

/* two */
#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b label {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c label {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d label {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e label {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a label {transform:rotate(-0deg);}

/* three */
#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c label {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d label {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e label {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a label {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b label {transform:rotate(-0deg);}

/* four */
#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d label {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e label {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a label {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b label {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c label {transform:rotate(-0deg);}

/* five */
#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e label {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a label {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b label {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c label {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d label {transform:rotate(-0deg);}
<input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
<div id="a" class="rotate"><label for="one">1</label></div>
<div id="b" class="rotate"><label for="two">2</label></div>
<div id="c" class="rotate"><label for="three">3</label></div>
<div id="d" class="rotate"><label for="four">4</label></div>
<div id="e" class="rotate"><label for="five">5</label></div>
</div>

.circle {
height: 50vh;
width: 50vh;
border-radius: 100%;
border: solid;
margin: 25vh auto;
position: relative;
}

.rotate {
height: 60%;
position: absolute;
top: 50%;
left: 50%;
width: 10vh;
margin-left: -5vh;
display: flex;
align-items: flex-end;
}

.rotate div {
border-radius: 100%;
border: solid;
height: 10vh;
width: 10vh;
display: flex;
align-items: center;
justify-content: center;
background: white
}

#a {
transform-origin: 5vh 0;
transform: rotate(120deg);
animation: roundcircle 5s infinite;
}

#a div {
animation: roundcirclediv 5s infinite;
}

#b {
transform-origin: 5vh 0;
transform: rotate(90deg);
animation: roundcircle 5s -1s infinite;
}

#b div {
transform: rotate(-90deg);
animation: roundcirclediv 5s -1s infinite;
}

#c {
transform-origin: 5vh 0;
transform: rotate(60deg);
animation: roundcircle 5s -2s infinite;
}

#c div {
transform: rotate(-60deg);
animation: roundcirclediv 5s -2s infinite;
}

#d {
transform-origin: 5vh 0;
transform: rotate(30deg);
animation: roundcircle 5s -3s infinite;
}

#d div {
transform: rotate(-30deg);
animation: roundcirclediv 5s -3s infinite;
}

#e {
transform-origin: 5vh 0;
transform: rotate(0deg);
animation: roundcircle 5s -4s infinite;
}

#e div {
transform: rotate(-0deg);
animation: roundcirclediv 5s -4s infinite;
}

@keyframes roundcircle {
0% {
transform: rotate(120deg);
}
20% {
transform: rotate(360deg)
}
40% {
transform: rotate(390deg)
}
60% {
transform: rotate(420deg)
}
80% {
transform: rotate(450deg)
}
100% {
transform: rotate(480deg);
}
}

@keyframes roundcirclediv {
0% {
transform: rotate(-120deg);
}
20% {
transform: rotate(-360deg)
}
40% {
transform: rotate(-390deg)
}
60% {
transform: rotate(-420deg)
}
80% {
transform: rotate(-450deg)
}
100% {
transform: rotate(-480deg);
}
}
<div class="circle">
<div id="a" class="rotate">
<div>1</div>
</div>
<div id="b" class="rotate">
<div>2</div>
</div>
<div id="c" class="rotate">
<div>3</div>
</div>
<div id="d" class="rotate">
<div>4</div>
</div>
<div id="e" class="rotate">
<div>5</div>
</div>
</div>


  • 如果您很难理解其工作原理,请查看 this one , 看到魔法幕后:

input[name="group"] {position:absolute; right:100vw}

.circle {
height: 50vh;
width: 50vh;
border-radius: 100%;
border: solid 1px;
margin: 25vh auto;
position: relative;
}

.rotate {
height: 60%;
position: absolute;
top: 50%;
left: 50%;
width: 10vh;
margin-left: -5vh;
display: flex;
align-items: flex-end;
}

.rotate div {
border-radius: 100%;
border: solid 1px;
height: 10vh;
width: 10vh;
display: flex;
align-items: center;
justify-content: center;
background: #0095FF;
}

#a, #a div, #b , #b div, #c, #c div, #d, #d div, #e, #e div {transition:1s; box-shadow:0 0 5px}
#a, #b, #c, #d, #e {transform-origin:5vh 0;}
#a {z-index:1;}
label {cursor:pointer}

/* one */

#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a div {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b div {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c div {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d div {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e div {transform:rotate(-0deg);}

/* two */

#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b div {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c div {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d div {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e div {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a div {transform:rotate(-0deg);}

/* three */

#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c div {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d div {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e div {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a div {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b div {transform:rotate(-0deg);}

/* four */

#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d div {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e div {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a div {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b div {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c div {transform:rotate(-0deg);}

/* five */

#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e div {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a div {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b div {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c div {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d div {transform:rotate(-0deg);}
<input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
<div id="a" class="rotate">
<div><label for="one">1</label></div>
</div>
<div id="b" class="rotate">
<div><label for="two">2</label></div>
</div>
<div id="c" class="rotate">
<div><label for="three">3</div>
</div>
<div id="d" class="rotate">
<div><label for="four">4</label></div>
</div>
<div id="e" class="rotate">
<div><label for="five">5</label></div>
</div>
</div>

关于javascript - 如何设置动画让元素绕着圆圈移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44958320/

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