「移動(dòng)設(shè)備陀螺儀」與「preserve-3d」碰撞的火花

jsyzchen 發(fā)布于2019-08-22 13:53 / 841人閱讀

摘要：它描述的是設(shè)備由前向后旋轉(zhuǎn)的情況。表示設(shè)備沿軸上的旋轉(zhuǎn)角度，范圍為度。完整的代碼大概是這樣慶祝時(shí)刻現(xiàn)在我們已經(jīng)完成了，一個(gè)利用移動(dòng)設(shè)備陀螺儀與實(shí)現(xiàn)的交互效果。

原文鏈接：航洋 blog

「移動(dòng)設(shè)備陀螺儀」與「preserve-3d」碰撞的火花

涉及知識(shí)「CSS：transform、JS：deviceorientation」

廢話不多，先上 DEMO「請(qǐng)使用移動(dòng)設(shè)備查看」

如何搭建一個(gè)簡(jiǎn)單的立方體

只需要寥寥幾行 HTML、CSS 代碼就能產(chǎn)出一個(gè)「立方體」

核心 HTML 如下

CSS 第一步

.cube {
  width: 160px;
  height: 160px;
  position: relative;
  -webkit-transform-style: preserve-3d; /* 這一句重點(diǎn) */
  transform-style: preserve-3d;
  -webkit-transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
.cube-face {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 4px 1px #fff;
  box-sizing: border-box;
  background: -webkit-linear-gradient(45deg, rgba(156, 144, 144, .6), #000);
  background: -o-linear-gradient(45deg, rgba(156, 144, 144, .6), #000);
  background: linear-gradient(45deg, rgba(156, 144, 144, .6), #000)
}

這個(gè) CSS 過(guò)于簡(jiǎn)單，就不贅述與解釋。
主要是要設(shè)置父元素 .cube 的 transform-style: preserve-3d，
使子元素位于 3D 空間中，不然子元素都是「平面內(nèi)、扁平化」，達(dá)不到 3D 效果。

給所有子元素 .cube-face 設(shè)置了透明的漸變色 rgba(156, 144, 144, .6) 背景，
是為了更好的觀察到「被遮住的反面」，視覺(jué)上更加立體

目前效果截圖大概是這個(gè)樣子：

看起來(lái)就像一個(gè)正方形，其實(shí)是 6 個(gè)面全部重疊在一起。

CSS 第二步

.cube-front {
  -webkit-transform: translateZ(80px);
  transform: translateZ(80px);
}

上面 4 行代碼使得「正面 .cube-front」向前移動(dòng) 80px「也就是立方體一半的邊長(zhǎng)」。
同理我們可以設(shè)置「背面 .cube-back」向后移動(dòng) 80px
效果大概是這樣：

CSS 第三步

.cube-left {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

上面 4 行代碼使得「左面 .cube-left」先順時(shí)針旋轉(zhuǎn)「90 度」
大概是這個(gè)樣子：

然后再向「左邊」移動(dòng) 80px 就 OK 啦，
注意：左邊是 Z 軸負(fù)方向。

.cube-left {
  -webkit-transform: rotateY(90deg) translateZ(-80px);
  transform: rotateY(90deg) translateZ(-80px);
}

大概是這個(gè)樣子：

同理，我們可以做出右邊的效果，唯一區(qū)別就是，右邊移動(dòng)方向與左邊相反。
道理類(lèi)似，異曲同工，上邊和下邊，想必聰明的大家都掌握了正確寫(xiě)法姿勢(shì)。

成品大概是這個(gè)樣子：

用陀螺儀使立方體動(dòng)起來(lái)

細(xì)心的開(kāi)發(fā)者應(yīng)該發(fā)現(xiàn)了，在最開(kāi)始，我給父元素 .cube 設(shè)置了：
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg)
認(rèn)讓父元素在三維空間上旋轉(zhuǎn) 10 度。
如果我們動(dòng)態(tài)連續(xù)修改這三個(gè)值，絕對(duì)可以達(dá)到 3D 旋轉(zhuǎn)動(dòng)畫(huà)的效果。

這個(gè)時(shí)候，JS 的 deviceorientation「檢測(cè)設(shè)備方向」事件閃現(xiàn)突然閃現(xiàn)在我的腦海。
因?yàn)檫@個(gè)事件的回調(diào)參數(shù)里面恰好有三個(gè)參數(shù)「beta、gamma、alpha」，分別代表「X、Y、Z」的旋轉(zhuǎn)方向。

beta 表示設(shè)備在 x 軸上的旋轉(zhuǎn)角度，范圍為 [-180, 180] 度。它描述的是設(shè)備由前向后旋轉(zhuǎn)的情況。
gamma 表示設(shè)備在 y 軸上的旋轉(zhuǎn)角度，范圍為 [-90, 90] 度。它描述的是設(shè)備由左向右旋轉(zhuǎn)的情況。
alpha 表示設(shè)備沿 z 軸上的旋轉(zhuǎn)角度，范圍為 [0, 360] 度。

大概是這個(gè)樣子：

注冊(cè) deviceorientation 事件，得到 x、y、z

const handleOrientation = ({beta: x, gamma: y, alpha: z}) => {
  // 1. 得到 x、y、z
  // 2. 處理 x、y、z
  // 3. 使用 x、y、z
}

global.addEventListener("deviceorientation", handleOrientation)

處理 x、y、z

由于我們期望立方體可以在 x、y、z 三個(gè)反向的旋轉(zhuǎn)范圍是 [-360, 360] 度，
但是 beta、gamma、alpha 的范圍并不是我們期望的范圍，所以我們要處理一下數(shù)據(jù)。

{
  x: x * 2,
  y: y * 4,
  z: (z - 180) * 2
}

使用 x、y、z

我們現(xiàn)在得到的 x、y、z 已經(jīng)在 [-360, 360] 度范圍內(nèi)了，
接下來(lái)要做的就是，使用 x、y、z 修改父元素 .cube 的 rotateX(xdeg) rotateY(ydeg) rotateZ(zdeg) 旋轉(zhuǎn)值。

完整的代碼大概是這樣：

const cube = document.querySelector(".cube")
const setCubePosition = ({x = 0, y = 0, z = 0}) => {
  cube.style = `transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${x}deg);-webkit-transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${x}deg);`
}
const handleOrientation = ({beta: x, gamma: y, alpha: z}) => {
  setCubePosition({
    x: x * 2,
    y: y * 4,
    z: (z - 180) * 2
  })
}

global.addEventListener("deviceorientation", handleOrientation)

慶祝時(shí)刻

現(xiàn)在我們已經(jīng)完成了，一個(gè)利用「移動(dòng)設(shè)備陀螺儀」與「preserve-3d」實(shí)現(xiàn)的 3D 交互效果。
讓我們?yōu)樽约汗恼?
???

點(diǎn)我查看完整代碼

感謝閱讀