我将如何制作这个动画？答案

【问题标题】：How Would I Make This Animation?我将如何制作这个动画？
【发布时间】：2015-02-22 21:12:31
【问题描述】：

所以我有了这个想法。基本上，我想在中心有一个圆形 div。我想要从 div 中出来的一堆小线条，有点像太阳发出的光线（这应该是它所代表的）。我该怎么做？我会使用 JavaScript 还是 CSS3 动画？

我现在可能可以这样做，但几分钟后它会变得非常滞后，因为这些行在离开页面后不会自行删除。我真的不知道该怎么做。另外，它看起来不太好，因为我觉得我的方法会很原始。

棘手的一点是，大多数线条将以某种形式的角度行进（因为光线在太阳的所有 360 度处都会发出），这意味着我必须设置 margin-top 和margin-left 或 margin-right 同时以某种方式使它们朝着我想要的方向前进...这可能是一个非常复杂的动画，不是吗...

任何人都知道一些教程来指出我会对此有所帮助吗？我希望这是有道理的......

【问题讨论】：

这是一个很好的 SVG 动画指南：css-tricks.com/guide-svg-animations-smil

标签： javascript html css animation

【解决方案1】：

下面是带有embedded styling and JQuery 的基本HTML 文档的代码。确保最大化浏览器窗口以查看动画。

<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
#sun
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    width: 400px;
    height: 400px;
    background: yellow;
    border-radius: 200px;
    background-image: -moz-radial-gradient(45px 45px 60deg, circle cover, yellow 0%, orange 100%, red 95%);
    background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
    background-image: radial-gradient(45px 45px 60deg, circle cover, yellow 0%, orange 100%, red 95%);
}
.ray
{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: orange;
    display: block;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    margin: -15px;
}
#one { transform: rotate(-45deg) translate(215px); }
#two { transform: rotate(-90deg)  translate(215px); }
#three { transform: rotate(-135deg) translate(215px); }
#four { transform: rotate(-180deg) translate(215px); }
#five { transform: rotate(-225deg) translate(215px); }
#six { transform: rotate(-270deg) translate(215px); }
#seven { transform: rotate(-315deg) translate(215px); }
#eight { transform: rotate(-360deg) translate(215px); }
</style>
</head>
<body>
<div id="sun"></div>
    <div id="one" class="ray"></div>
    <div id="two" class="ray"></div>
    <div id="three" class="ray"></div>
    <div id="four" class="ray"></div>
    <div id="five" class="ray"></div>
    <div id="six" class="ray"></div>
    <div id="seven" class="ray"></div>
    <div id="eight" class="ray"></div>
</div>
<script type="text/javascript">
function movement() {
$("#two").animate({top: '-=50'}, 300);
$("#three").animate({top: '-=35.35', left: '-=35.35'}, 300);
$("#four").animate({left: '-=50'}, 300);
$("#five").animate({top: '+=35.35', left: '-=35.35'}, 300);
$("#six").animate({top: '+=50'}, 300);
$("#seven").animate({top: '+=35.35', left: '+=35.35'}, 300);
$("#eight").animate({left: '+=50'}, 300);
$("#one").animate({top: '-=35.35', left: '+=35.35'}, 300);
//Reverse Animation
$("#two").animate({top: '+=50'}, 450);
$("#three").animate({top: '+=35.35', left: '+=35.35'}, 450);
$("#four").animate({left: '+=50'}, 450);
$("#five").animate({top: '-=35.35', left: '+=35.35'}, 450);
$("#six").animate({top: '-=50'}, 450);
$("#seven").animate({top: '-=35.35', left: '-=35.35'}, 450);
$("#eight").animate({left: '-=50'}, 450);
$("#one").animate({top: '+=35.35', left: '-=35.35'}, 450);
setTimeout(movement, 750);
}
$(document).ready(function() {
    movement();
});
</script>
</body>
</html>

【讨论】：

哇...做得很好。感谢您实际回答了这个问题（尽管我也必须感谢 Joseph。该链接也很有帮助）。这不是很复杂，我可能自己也可以做到。但是您忘记了我希望 div 在所有 360 个方向上远离太阳。不是在直线上，而是就像你期望的光线从圆形太阳移动一样。我该怎么做？
Tommay - 你能说得更具体一点吗？在所有 360 方向（度*）上远离太阳是什么意思？你的意思是你想让 div 穿过圆圈移动——比如穿过太阳的 360 度？我很乐意提供帮助。谢谢。
Erm... 像这样：ak2.picdn.net/shutterstock/videos/20958/preview/… 看看光线是如何以应有的角度移动的？它们不仅向北、向南、向东和向西移动，还向东北、向东南等方向移动。