爲網站創建交互式對象動畫

Question

我有一個網站的想法，但我不知道從哪裏開始執行它。我想創建一個圓圈，當用戶在其上移動光標時，它將被分成兩部分。然後用戶可以點擊兩個分開的部分中的一個，第一個周圍的其他圓將出現。我需要一些特殊的庫或框架來做到這一點？我發現了這個：http://greensock.com/gsap它可以是有用的嗎？我想我想用一個簡單的庫或一組工具創建一個不可能重現的硬動畫。謝謝 。

編輯：這就是我想要的。屏幕中間的一個圓圈，當用戶在其上移動鼠標時，該圓圈將分成兩部分（頂部和底部）。在這兩個部分下，應該有兩個字符串，一個在頂部下面，一個在底部下面。當用戶點擊一個字符串時，其他人會在第一個字符串周圍出現。

Answer 1

不！你不需要使用任何框架。 要做到這一點，你可以使用HTML或canvas元素;

分裂（HTML）

關於拆分的一部分，你應該有兩個內嵌的div（每個人都應該有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轉換

你需要CSS轉換添加到兩個div（從圓的部分），它們是這些屬性：

（注：你不obligied到使用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 

你unfortanely必須添加這些-webkit-（等），使過渡支持對於許多瀏覽器來說更長，它取決於他們解釋屬性的形式。 CSS轉換屬性被稱爲transition;在此屬性中，您可以定義將轉換哪些CSS屬性。

E.G：

x=20;x=15

20, 18, 16, 15

我不會教這麼多的財產，但你可以有一個基本的瞭解。 定義要轉換的屬性後，必須定義SECONDS中的時間，它是轉換的速度。毫秒在.之後，但是可選。

0s 0.5s 0.2s 1s 2s

您可以通過使用逗號（,）定義了一個過渡的許多特性，如：

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

（我用extraspaces逗號的好例子後）

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) 

我還在支持提出更新答案以完成它。