iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
0
Modern Web

菜菜菜的前端學習日誌系列 第 22

指南針效果

菜菜菜的前端學習日誌 - Day22

好玩兒~

最近接了一個小案子是要做手機版的網頁,其中有一個小功能就是指南針!!

當下茫茫然...不知道要如何下手做@口@

上網查了一下,結果發現其實並不難,就是用運用陀螺儀

接著將它實做出來,感覺挺好玩的

以前網頁上根本無法實作陀螺儀的應用

但近幾年行動裝置的普及化,陀螺儀的應用隨之增加

例如:今天要講的指南針效果、Real Racing3(之前挺愛玩的賽車遊戲)...等

許多應用都能使用此技術,但今天就只講指南針吧哈哈!!!

陀螺儀

取值

要做出這指南針的效果就是運用行動裝置上的陀螺儀

我們必須要先取得陀螺儀的值才能利用它來實作

而陀螺儀的值主要有3個,alpha、beta及gamma

分別是偵測行動裝置上的Z軸、X軸及Y軸

那我們要怎麼取得它的值呢?!

其實陀螺儀就是一個事件,跟click跟mouseover...等事件是一樣的方式

所以我們需要透過事件監聽去監聽deviceorientation來取得他的值

首先我要來測試到底有沒有成功的取到值,所以先在body標籤新增以下程式碼

alpha:<p id="alpha"></p>
beta:<p id="beta"></p>
gamma:<p id="gamma"></p>

再來在script標籤內新增監聽事件

將event參數傳進function就能取得alpha、beta、gamma值了
再來將值印出來看看,因為取到的值會有小數點所以我們用Math.round()來四捨五入取整數值

window.addEventListener('deviceorientation', function(event) {
    var z = document.getElementById('alpha'),
        x = document.getElementById('beta'),
        y = document.getElementById('gamma'),

        alpha = event.alpha,
        beta = event.beta,
        gamma = event.gamma;

        z.innerHTML = Math.round(alpha);
        x.innerHTML = Math.round(beta);
        y.innerHTML = Math.round(gamma);

}, false);

結果就會像這樣

好的!!我們取到值了那就可以來實作指南針效果了

指南針

既然要做指南針效果就需要先放一張指南針的圖片囉~

因為指南針效果是以Z軸旋轉360度,所以我們只取alpha值就好

再來就是利用前幾天講過的transform搭配alpha來改變圖片的角度

var compass = document.getElementById('compass')

window.addEventListener('deviceorientation', function(event) {
    alpha = event.alpha;

    compass.style.transform = 'rotate(' + alpha + 'deg)';
    compass.style.webkitTransform = 'rotate('+ alpha + 'deg)';
  }, false);

實作的結果就會是這樣拉

是不是很簡單又很好玩呢!!!


上一篇
Event 事件-下
下一篇
jQuery
系列文
菜菜菜的前端學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言