iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
1
Modern Web

勇者Jason和前端之鑰系列 第 30

【DAY30】旋轉吧!國民老婆!

昨天做了一個不會旋轉的旋轉木馬!
A同學看到了表示有趣,在洗澡之後,
跟我說:「旋轉木馬的這個主題很不錯!」
輕鬆的用一刻鐘的時間寫出了旋轉的木馬!
不得不承認挫折感很大!

我昨天卡在讓它轉起來,最後只能呈現一個不會轉的半殘品。
拖著不甘而疲累的身軀回到家中,
還看到老婆居然被A同學玩轉與股掌之間!
實在是不可忍!

今天就來模仿他的code,做出一個屬於自己的國民老婆
首先拿出昨天的專案!然後複製一份,讓我記得今天的恥辱。
接著,將那些海賊王名場景全部刪掉!
在國民老婆面前!什麼D的意志都會被瓦解殆盡的。
最後記得把title的Merry-go-round的Merry一腳踢開,
換成tzuyu-go-round。

html架構和昨天一樣,css也不用改。
我們今天只要轉老婆

畫面效果
完整程式碼

點開index.js
惡狠狠的把昨天的code刪除殆盡!

先宣告變數:

const stage = document.querySelector('.stage');
const pole = document.querySelector('.pole');
let oriSwitch = false;
let poleDegree = 0;
const varDegree = 3;

首先我們要先知道自己要幹嘛!
轉老婆!!
沒錯!
滑鼠按下去、移動的時侯,才會轉;放開滑鼠按鈕就不會。
這就像一個開關。

所以我們這樣宣告變數,

let oriSwitch = false;

預設是false,正常的情況下,老婆是不會不聽我們使喚的,
接著我們有poleDegree原始的角度和varDegree角度變動量。

function rotatePole(e){
    if (oriSwitch) {
        (e.movementX > 0) ? poleDegree += varDegree : poleDegree -= varDegree;
        pole.style.transform = `rotateY(${poleDegree}deg)`;
    }
}

我們有一個function,要來rotatePole
其中,(e)這個e是event的縮寫,
接下來我們要先來判斷剛剛說的:滑鼠是否有點下去
如何導入true或false呢?

window.addEventListener('mousedown', function(){
    return oriSwitch = true;
});
window.addEventListener('mouseup', function (){
    return oriSwitch = false;
});

使用在視窗內監聽!滑鼠是否有被點擊
如果有的話
會回傳一個值,讓oriSwitch = true
點下去放開後
會回傳一個值,讓oriSwitch = false

不過在ES6有更快的寫法

window.addEventListener('mousedown', () => oriSwitch = true);
window.addEventListener('mouseup', () => oriSwitch = false);

這樣可以讓寫code更簡潔。

這個叫做箭號函式,可以讓指定匿名函式更簡略。
箭號左邊的值,可能以括號括住,指定傳遞給函式的引數。
-函式的單一引數不需要括號。
-如果不會傳入引數,則需要括號。
箭號右邊的函式定義可以是運算式,例如 v + 1,或以大括號 ({}) 括住的陳述式區塊。

來源

我們做好這個開關後,
接下來就是判斷滑鼠移動的方向了。
因為是左右拉,所以要判斷x的移動。

(e.movementX > 0) ? poleDegree += varDegree : poleDegree -= varDegree;
pole.style.transform = `rotateY(${poleDegree}deg)`;

(true or false)?...(1)...:...(2)....
如果是true,傳回(1)的結果;否則就傳回(2)的結果。

因此如果是往右滑,poleDegree就會增加3;
如果是往左滑,poleDegree就會減少3;
最後將值傳回去transform

其中這邊我嘗試用組字串寫過,然後一直撞牆。
rotateY(${poleDegree}deg)
是ES6的新語法,叫做**template strings**
允許你將**template literals**用${ }的方式放進字串內,
不需要再用組字串的一堆加號做連結。

其中!要注意的是兩端要用``(反引號)框起來,
我用了''框,一直錯誤,兩個長得很像啊,我花了不少時間才找到!

最後我們要寫

pole.addEventListener('mousemove', rotatePole);

當監聽到滑鼠在.pole上移動會執行rotatePole
這樣就完成了!

在index.js裡面,有註解掉的部分,
那個是A同學寫的,我選擇先不採用。

這些東西跟我昨天算的rotateY(40deg)translate(350px)是一樣的,
但是他的方法比較高明!
照片數量往上加會自己算出旋轉角度往前的距離出來給他,
比我當初的想法還要好。
可是我想記錄學習歷程所以保留自己的東西,並把玩轉老婆的人寫的code註解掉!


上一篇
【DAY29】準備收官,使用transform做出3D效果
下一篇
【DAY31】好用的google chrome擴充
系列文
勇者Jason和前端之鑰32

1 則留言

0
not
iT邦新手 5 級 ‧ 2018-01-26 13:33:24

讓我想到之前看這邊的教學也是在講css3的轉轉
https://desandro.github.io/3dtransforms/docs/carousel.html

不過在IE11不支援,所以遲遲沒有真正的拿出來用

JasonYang iT邦新手 5 級 ‧ 2018-01-26 14:42:54 檢舉

我看的是大陸的網友做的
我覺得他應該有參考這個
因為圖是一樣的XD

google「鑫空間」

我要留言

立即登入留言