为网站创建交互式对象动画

Question

我有一个网站的想法，但我不知道从哪里开始执行它。我想创建一个圆圈，当用户在其上移动光标时，该圆圈将分成两部分。然后用户可以单击两个拆分部分中的一个，然后会出现第一个部分周围的其他圆圈。我需要一些特殊的库或框架来做吗？我发现了这个：http://greensock.com/gsap 它有用吗？我想我想创建一个无法用简单的库或一组工具复制的硬动画。谢谢。

编辑：这就是我想要的。屏幕中间的一个圆圈，当用户在其上移动鼠标时，该圆圈将分成两部分（顶部和底部）。在这两部分下面应该有两根弦，一根在上面，一根在下面。当用户点击一个字符串时，其他圆圈应该出现在第一个字符串周围。

Answer 1

没有！您不需要使用任何框架。为此，您可以使用 HTML 或 canvas 元素；

拆分 (HTML)

关于拆分部分，你应该有两个内联 divs（每个应该有 CSS display 属性作为 inline）其宽度的 50% 和您想要的 100% 高度， CSS overflow 属性作为 hidden （从圆形部分隐藏一个部分），然后进入它们必须添加一个圆角 div (border-radius:100%) 以及您想要的圆的完整尺寸，该圆将被分成两部分。

注意：圆的第二个div（第二部分）必须与部分的宽度有负边距，例如：margin-left:-50px，所以它会出现正确。

然后这2个div围成一个圆圈，可以分成两部分。

使每个部分 X 和 Y 可移动

为了使圆中的每个部分都具有动画效果，基本上您必须将每个 div 设置为 position:relative 以使它们的 x (CSS left 属性) 和 y (CSS top 属性) 可移动。

CSS 转换

您需要向两个 div（圆圈的部分）添加 CSS 转换，它们是这些属性：

（注意：您没有义务使用 CSS 过渡，但它更简单；您可以使用自己的计时器为它们制作动画 JavaScript）

-webkit-transition:left 0.2s
-o-transition:left 0.2s
-ms-transition:left 0.2s
-moz-transition:left 0.2s
-ms-transition:left 0.2s
transition:left 0.2s

不幸的是，您必须添加这些 -webkit-（等等...）以使许多浏览器的转换支持时间更长，这取决于它们解释属性的形式。 CSS 转换属性被称为 transition；在此属性中，您可以定义将转换哪些 CSS 属性。

例如：

x=20;x=15

20, 18, 16, 15

我就不教那么多了属性，不过大家可以有个基本的了解。在定义要转换的属性之后，您必须以秒为单位定义时间，它是转换的速度。毫秒在 . 之后，但可选。

0s 0.5s 0.2s 1s 2s

您可以使用逗号 (,) 在一次转换中定义多个属性，例如：

top 0.5s, left 2.5s, background-color 10s, etc...

（我在逗号后使用了额外的空格作为很好的例子）

修改JavaScript

现在您可以从 JavaScript 设置 CSS 属性，如下所示：

YourElement.style.top="20px"//would set the CSS top property, it's coord. Y

您可以在脚本中使用的事件如下：

onmouseover, ontouchstart, onclick, onmousedown

可以在 DOM 元素或 window:

中这样定义

YourElement.onmouseover=function(){
    alert("The mouse cursor passed over me!")
};
//adding event using onmouseover property
YourElement.addEventListener("mouseover",function(){
    alert("The mouse cursor passed over me!")
})
//adding event using addEventListener(name, function)

我仍然应该更新答案以完成它。

为网站创建交互式对象动画

Creating an interactive object animation for a website

html

javascript

css

animation

libraries