成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

元素跟隨鼠標(biāo)旋轉(zhuǎn)，未待完續(xù)。。。。

Kerr1Gan / 3339人閱讀

摘要：這主要是沿著軸進(jìn)行旋轉(zhuǎn)，顧名思義就是橫向不動，肉眼看見的圖形應(yīng)該是上下翻轉(zhuǎn)的效果定義沿著軸的旋轉(zhuǎn)。

本節(jié)主要講的是元素跟隨鼠標(biāo)旋轉(zhuǎn)主要是用到了原生js更改css的transform屬性，這個屬性下有很多方法，下面就只講關(guān)于本節(jié)內(nèi)容的幾種方法，其他的可以私下自己去看一看
translate(x,y) 轉(zhuǎn)換2D 
translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
translateX(x)僅水平方向移動（X軸移動）
translateY(Y)僅垂直方向移動（y軸移動）
效果：

鏈接描述

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

鏈接描述

rotateX(angle) 定義沿著 x 軸的 3D 旋轉(zhuǎn)。 
 這主要是沿著X軸進(jìn)行旋轉(zhuǎn)，顧名思義就是橫向不動，肉眼看見的圖形應(yīng)該是上下翻轉(zhuǎn)的效果

rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。 
 這主要是沿著Y軸進(jìn)行旋轉(zhuǎn)，顧名思義就是垂直不動，肉眼看見的圖形應(yīng)該是左右翻轉(zhuǎn)的效果，盜個圖吧，作者看見別怪！

rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。 
 Z軸我個人的理解就是按照你設(shè)置的旋轉(zhuǎn)原點，繞圈旋轉(zhuǎn)
 
 下面就是x，y，z 軸的圖解

鏈接描述

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

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

獲取旋轉(zhuǎn)元素的中心點

   設(shè)置默認(rèn)旋轉(zhuǎn)的中心X原點以及Y的中心原點，根據(jù)元素的位置計算，利用元素的width + 元素的偏移量 計算 旋轉(zhuǎn)原點，鼠標(biāo)點擊
   時獲取
   centerX = n.offsetLeft + n.offsetWidth / 2
   centerY = n.offsetTop + n.offsetHeight / 2

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

獲取旋轉(zhuǎn)的角度centerx

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

例如：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98950.html

相關(guān)文章

  • 元素跟隨鼠標(biāo)旋轉(zhuǎn)，未待完續(xù)。。。。

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

    xiaochao 評論0 收藏0

  • 《每周一點canvas動畫》——三角函數(shù)

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

    Markxu 評論0 收藏0

  • 《每周一點canvas動畫》——三角函數(shù)

    摘要：常用三角函數(shù)前面我們簡單的介紹了三角函數(shù)的表示方法以及的坐標(biāo)系統(tǒng)?？偨Y(jié)這節(jié)你應(yīng)該學(xué)會了如何運用三角函數(shù)，控制物體的旋轉(zhuǎn)。 本節(jié)主要內(nèi)容有： 三角函數(shù)介紹 常用三角函數(shù)解析 鼠標(biāo)跟隨角度旋轉(zhuǎn) 看到三角函數(shù)，勾股定理這樣的數(shù)學(xué)名詞是不是有種雙腿打顫的感覺啊！好吧，就算你已經(jīng)嚇尿了，也不能否認(rèn)我們中學(xué)學(xué)習(xí)的知識終于有了用武之地，挽起袖子，開整?。?！ 1、三角函數(shù) 什么是三角函數(shù)呢？簡單的...

    aervon 評論0 收藏0

  • javascript與三角函數(shù)之三：眼睛跟隨效果

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

    Meils 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<