元素跟隨鼠標旋轉，未待完續。。。。

Kerr1Gan 發布于2019-08-23 12:42 / 3309人閱讀

摘要：這主要是沿著軸進行旋轉，顧名思義就是橫向不動，肉眼看見的圖形應該是上下翻轉的效果定義沿著軸的旋轉。

本節主要講的是元素跟隨鼠標旋轉主要是用到了原生js更改css的transform屬性，這個屬性下有很多方法，下面就只講關于本節內容的幾種方法，其他的可以私下自己去看一看

translate(x,y) 轉換2D

translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
translateX(x)僅水平方向移動（X軸移動）
translateY(Y)僅垂直方向移動（y軸移動）
效果：

鏈接描述

rotate(angle) 定義2D旋轉，旋轉角度在參數中定義

通過指定rotate內設置角度參數對元素進行一個2D的旋轉，設置正數元素則順時針旋轉參數內的角度，設置負數則逆時針旋轉參數內的角度
transform-origin可以定義旋轉的原點，不設置的話會按中心點進行旋轉，這個屬性的參數也分為 x軸 y軸 z軸（偏移量）
效果：

鏈接描述

rotateX(angle) 定義沿著 x 軸的 3D 旋轉。

 這主要是沿著X軸進行旋轉，顧名思義就是橫向不動，肉眼看見的圖形應該是上下翻轉的效果

rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。

 這主要是沿著Y軸進行旋轉，顧名思義就是垂直不動，肉眼看見的圖形應該是左右翻轉的效果，盜個圖吧，作者看見別怪！

rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。

 Z軸我個人的理解就是按照你設置的旋轉原點，繞圈旋轉
 
 下面就是x，y，z 軸的圖解

鏈接描述

另外還有最重要的就是transform的矩陣matrix(n,n,n,n,n,n)里面的六個值分別代表不同的屬性，這里就不說它，沒啥好說的自己下去看看吧！！！

利用上一篇文章所講的坐標來計算鼠標移動的時候計算角度

獲取旋轉元素的中心點

   設置默認旋轉的中心X原點以及Y的中心原點，根據元素的位置計算，利用元素的width + 元素的偏移量 計算 旋轉原點，鼠標點擊
   時獲取
   centerX = n.offsetLeft + n.offsetWidth / 2
   centerY = n.offsetTop + n.offsetHeight / 2

這里會用到計算弧度Math.atan2

獲取旋轉的角度centerx

   static angle (centerx, centery, endx, endy) {
       // 鼠標移動獲取鼠標移動的e.client - 鼠標點擊時的client
       var diff_x = endx - centerx, // 拿到計算弧度的差值
           diff_y = endy - centery
       // Math.atan2利用x，y坐標計算角度
       // 360 * Math.atan2(diff_y, diff_x) 映射到360度
       // 一個完整的圓的弧度是2π，所以：2π rad = 360°
       // / (2 * Math.PI) 轉換成角度
       var c = 360 * Math.atan2(diff_y, diff_x) / (2 * Math.PI)
       // 其實在這里就分逆時針和順時針旋轉了，(360 + -c)逆時針
       // 如果為-90 = 360 + -90 ，如果為-80 = -80 + 90
       c = c <= -90 ? (360 + c) : c
       // 補上-90度的差值
       return c + 90
   }

例如：

    centerx：40，centery：30 取的都是中心點的值
    endx: 80, endy: 60

GPU云服務器云服務器未待完續 jquery鼠標跟隨 DIV跟隨鼠標移動 js中鼠標跟隨

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98950.html

元素跟隨鼠標旋轉，未待完續。。。。

摘要：這主要是沿著軸進行旋轉，顧名思義就是橫向不動，肉眼看見的圖形應該是上下翻轉的效果定義沿著軸的旋轉。本節主要講的是元素跟隨鼠標旋轉主要是用到了原生js更改css的transform屬性，這個屬性下有很多方法，下面就只講關于本節內容的幾種方法，其他的可以私下自己去看一看 translate(x,y) 轉換2D translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移...

xiaochao 2019-08-02 11:54 評論0 收藏0
《每周一點canvas動畫》——三角函數

摘要：常用三角函數前面我們簡單的介紹了三角函數的表示方法以及的坐標系統。總結這節你應該學會了如何運用三角函數，控制物體的旋轉。本節主要內容有：三角函數介紹常用三角函數解析鼠標跟隨角度旋轉看到三角函數，勾股定理這樣的數學名詞是不是有種雙腿打顫的感覺啊！好吧，就算你已經嚇尿了，也不能否認我們中學學習的知識終于有了用武之地，挽起袖子，開整！！！ 1、三角函數什么是三角函數呢？簡單的...

Markxu 2019-08-19 18:06 評論0 收藏0
《每周一點canvas動畫》——三角函數

摘要：常用三角函數前面我們簡單的介紹了三角函數的表示方法以及的坐標系統。總結這節你應該學會了如何運用三角函數，控制物體的旋轉。本節主要內容有：三角函數介紹常用三角函數解析鼠標跟隨角度旋轉看到三角函數，勾股定理這樣的數學名詞是不是有種雙腿打顫的感覺啊！好吧，就算你已經嚇尿了，也不能否認我們中學學習的知識終于有了用武之地，挽起袖子，開整！！！ 1、三角函數什么是三角函數呢？簡單的...

aervon 2019-08-01 15:11 評論0 收藏0
javascript與三角函數之三：眼睛跟隨效果

摘要：我們先看下最后的效果實現思路要實現眼睛隨鼠標一起運動，我們必須先求出眼睛的坐標，也就是它的和值為了取到和值，我們只要知道角的內三角形的對邊和鄰邊的長度即可為了取到對邊和鄰邊，我們只需要知道角的弧度即可角的弧度，我們可能通過圖中邊和邊，再使用我們先看下最后的效果 showImg(https://segmentfault.com/img/bVTp6V?w=1106&h=924); 實現思...

Meils 2019-08-20 18:52 評論0 收藏0