何實現前端CSS-3D交互,跟隨鼠標3D旋轉。
這期視頻分享一個三D卡片的交互效果。圖片會在鼠標滑入后跟隨鼠標進行三D旋轉。
要讓卡片進行3D旋轉,需要使用騰騰、rotate以及透視視劇perspective卡片。3D旋轉效果只需要rotatex和rotatey的旋轉就可以了。
通常情況下透視數據p2x的取值為五百px左右,這里設置為五百px。然后修改旋轉xy的詞,發現靜態效果可以呈現出來。如何跟隨鼠標?就需要監聽鼠標滑入、滑動、滑出事件。
首先需要給滑動設置一個確定旋轉范圍,然后在鼠標移動監聽的時候進行計算。計算公式非常常見,就不再贅述。
最后把值復制給旋轉的xy,通過css變量的方式進行復制。然后在鼠標滑出的時候再把旋轉的xy復制為零,就實現了這個功能。
插入滑出的時候沒有過渡效果,比較生硬。可以加上過渡效果,但是因為旋轉的xy值修改的頻率太高了,過渡效果會有延遲。而且d bug看日志的時候還會卡的不行。也可以僅在鼠標滑出的時候增加過渡效果,這樣在鼠標離開的時候就有過渡效果了。
但是鼠標滑入的時候還是會比較生硬,因為會接著跟鼠標旋轉,所以體驗還好。如果有小伙伴知道在反復去掉過渡效果的情況下滑入,如何處理過渡效果,歡迎在評論區進行討論。那么這期視頻就到這里結束了,喜歡的小伙伴可以幫忙點點贊,感謝大家的觀看,拜拜。
總算是寫完了基礎類型篇的內容。這次咱們來聊一聊動畫。
閑話就不多扯了,直接開始正文。
一、基礎概念
JavaScript中,我們可以依賴內部提供的動畫函數,去移動DOM元素(<img />,<div>或任何其他HTML元素)。
JavaScript提供了以下兩個在動畫中經常使用的函數。
JavaScript還可以設置DOM對象的許多屬性,包括它在屏幕上的位置。我們也可以設置對象的頂部和左側屬性,以將其放置在屏幕上的任何位置:
二、Manual Animation
接下來,讓我們使用DOM對象屬性和JavaScript函數實現一個簡單的動畫,上代碼:
代碼很簡單,這里簡單解釋一下,當然能看懂的朋友,可以跳過啦:
PS:供復制的代碼,但是請注意,圖片資源需要調整一下
<html> <head> <title>JavaScript Animation</title> <script type = "text/javascript"> var imgObj = null; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; } window.onload = init; </script> </head> <body> <form> <img id = "myImage" src = "/images/html.gif" /> <p>Click button below to move the image to right</p> <input type = "button" value = "Click Me" onclick = "moveRight();" /> </form> </body> </html>
三、Automated Animation
在上面的demo中,我們看到了每次單擊時圖像如何向右移動(PS:運行起來的效果)。
接下來我們使用JavaScript的setTimeout()來自動執行此過程,看代碼:
同樣,簡單的解釋一番(大佬略過~):
PS:供復制的代碼,但是請注意,圖片資源需要調整一下
<html> <head> <title>JavaScript Animation</title> <script type = "text/javascript"> var imgObj = null; var animate ; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; animate = setTimeout(moveRight,20); // call moveRight in 20msec } function stop() { clearTimeout(animate); imgObj.style.left = '0px'; } window.onload = init; </script> </head> <body> <form> <img id = "myImage" src = "/images/html.gif" /> <p>Click the buttons below to handle animation</p> <input type = "button" value = "Start" onclick = "moveRight();" /> <input type = "button" value = "Stop" onclick = "stop();" /> </form> </body> </html>
三、鼠標滑過
這是一個很常見的效果,就是鼠標滑入某個元素,然后做動畫。上代碼:
再解釋一波(同樣大佬略過):
PS:供復制的代碼,但是請注意,圖片資源需要調整一下
<html> <head> <title>Rollover with a Mouse Events</title> <script type = "text/javascript"> if(document.images) { var image1 = new Image(); // Preload an image image1.src = "/images/html.gif"; var image2 = new Image(); // Preload second image image2.src = "/images/http.gif"; } </script> </head> <body> <p>Move your mouse over the image to see the result</p> <a href = "#" onMouseOver = "document.myImage.src = image2.src;" onMouseOut = "document.myImage.src = image1.src;"> <img name = "myImage" src = "/images/html.gif" /> </a> </body> </html>
關于動畫篇的內容,到此就結束了。邊翻譯邊總結還真有點強行雜糅到一起的感覺??赡苓€是自己功力不足吧。
希望以后的文章可以,更絲滑一些,哈哈~
文要介紹的是一種鼠標從一個元素移入移出時,獲取鼠標移動方向的思路。這個方法可以幫助你判斷鼠標在移入移出時,是從上下左右的哪個方向發生的。這個思路,是我自己琢磨出來,利用了一點曾經高中學過的數學知識,但是非常簡單好理解,希望能對你有所幫助。
在線demo:
相關代碼:
另外demo1.html里面還有部分邏輯代碼。
效果演示:
1. 把元素框分成如下四部分:
只要能判斷出鼠標移入移出時屬于哪個部分的范圍內,問題即可解決。而這個判斷可通過斜率,結合鼠標的位置與元素框中心點的位置比較得出。這個判斷原理,采用下面的坐標系圖解來說明。
2. 解決這個問題,建立如下圖坐標系:
1)上圖以瀏覽器可視區域左上角為原點建立坐標系,坐標系與數學坐標系方向一致,往右表示x軸正方向,往下表示y軸負方向;
2)圖中點(x1,y1)代表元素框左上角,(x4,y4)代表元素框右下角,(x0,y0)代表元素框的中心點,(x,y)表示鼠標移入移出時與元素框的邊的交點;
3)根據下面的公式:
可得(x1,y1)與(x4,y4)這條對角線的斜率為 k = (y1-y4)/(x1-x4)。由于對稱性,元素框另外一條對角線的斜率一定是 -k。
同時由于(x1,y1)與(x4,y4)這條對角線在坐標系中一定經過的是第二和第四象限,所以k肯定是負值,而 -k一定是正值。
4)根據同樣的公式,當鼠標移入移出時的瞬間,與元素邊框的交點與元素框中心點的斜率 k1 = (y-y0)/(x-x0)。
5)由圖可知,當 k < k1 < –k時,鼠標一定是從元素的左右方向移動的;反之,一定是從上下方向移動的。
當鼠標是從左右方向移動時,如果x > x0,那么鼠標就是從右邊移動的,反之就是從左邊移動的;
當鼠標是從上下方向移動時,如果y > y0時,那么鼠標就是從上邊移動的,反之就是從下邊移動的。
注意:坐標系中所有的y值都是負的。
以上便是這個問題,我提供的解決思路,通過上面的圖解說明,相信大家理解起來會比較容易。如果查看我提供的代碼實現demo1.js,會發現代碼的邏輯,跟上面的圖解說明也是一致的。當然這個思路只是解決如何判斷鼠標移入移出的方向問題,demo中的效果實現最后還得要借助css 過渡才行,不過這個部分就更簡單了,詳細代碼可見demo1.html的源碼,邏輯非常簡單,這里就不再詳細說明了。
在得出上面的思路之前,我其實已經在網上了解到另外一個思路實現了,我把該實現也做了一個demo:
代碼:
當然這兩個demo,從效果上沒有任何區別,它們的區別僅僅在于鼠標移動方向判斷的算法不同而已。這個算法可以在demo2.js中找到,你也可以通過下面的兩篇文章了解到它的一些介紹:
不過慚愧的是,我并沒有看懂這個思路的原理,所以我這里也給不出解釋說明了,雖然在別的地方看到了一些解釋,但是并不是很清晰,所以我才去想有沒有更簡單理解的方法實現。實際工作中,我認為這兩種思路都是可以使用的,用哪個憑自己喜好決定就行了。
最后希望本文提供的這個小東西在你平常工作的時候,能夠派上用場,為你的頁面添加一些活潑的滑入滑出效果等等,同時也算是自己的一個積累。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。