如何设置动画使元素绕圆运动? [英] How to set an animation to have elements moving around a circle?
本文介绍了如何设置动画使元素绕圆运动?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在努力实现您在图片中看到的内容:
I am trying to achieve what you see in the picture:
图片在这里，以防您被遮挡: http://imgur.com/a/wVtgm
The picture is here in case it is block for you: http://imgur.com/a/wVtgm
您可能只看到一个图标，但实际上是4个图标，图片代表图标应采用的路径.
There you may see only one icon but actually are 4 icons, the picture represent the path that the icons should take.
我已经创建了一个代码段，或者这是一个 Codepen
I have create an snippet or here is a 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>
这是我应该实现的目标的描述:
This is the description of what I should achieve:
1-页面加载时，所有图标都必须位于同一位置，这是您可能会看到带有数字4的图标的地方.
1 - All the icons must be in the same place when the page loads, which is the place where you may see the icon with the number 4.
2-然后，每个图标都应绕圆开始其路径，并保持其常规状态/位置.我的意思是:编号为3的图标开始其跟踪，然后一旦到达其位置，则应粘贴在那里，并与其他图标相同.
2 - Then, every icon should start its path around the circle, getting stick to its regular state/position. I mean: Icon with number 3 starts its track and then once it reach its position it should stick there and the same with the other icons.
就目前而言，如果您看到我所做的代码片段，则图标正在通过页面加载后到达其原始位置来进行动画处理，但是我无法实现我需要的东西，这触发了图标返回到绕圈转回原来的位置.
For now, if you see the code snippet I did, the icons are doing some animation by getting to its original position after the page loads, but I am unable to achieve what I need which is triggering the icons to get back to its original position by going around the circle.
TL; DR:图标从页面加载时图标编号为4的位置开始，然后应通过从左到右绕圆圈移动来恢复到其原始位置.
TL;DR: The icons starts from the position with the icon number 4 on page load, and then the icons should get back to its original position by moving around the circle, from left to right.
例如: 图标4应该留在原处. 图标3应该在圆周围向下移动一些像素. 依此类推.
For example: Icon 4 should stay where it is. Icon 3 should move downwards some pixels around the circle. And so on.
因此，它们都应该从左向右移动(就像跟随领导者一样)，并以它们在图片或codepen/codespnippet中的位置结束.
So they should all come in from the left moving towards the right (like follow the leader) and end in the position they are in in the picture or codepen/codespnippet.
有什么建议吗?
推荐答案
您可以使用动画和transform:rotate()从这两支笔中启发自己.
You may inspire yourself from these 2 pens using animation and transform:rotate().
- 此 一个 与input元素进行交互:单击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>
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>
这篇关于如何设置动画使元素绕圆运动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
