摘要：前言前些天看了阿麗塔感嘆酷炫特效的同時，不得不說這個片子灰常之熱血重新點(diǎn)燃了我糞斗的基情有那么幾個瞬間仿佛自己回到了，下面進(jìn)入正題在依德醫(yī)生剛撿回阿麗塔的那一段，有木有發(fā)現(xiàn)醫(yī)生家的設(shè)備都很有意思比如那個人皮縫紉機(jī)，其靈活程度堪比織網(wǎng)的蜘蛛說

前些天看了《阿麗塔》
感嘆酷炫特效的同時，不得不說這個片子灰常之熱血！
重新點(diǎn)燃了我糞斗的基情！！
有那么幾個瞬間仿佛自己回到了……

OK，下面進(jìn)入正題
在依德醫(yī)生剛撿回阿麗塔的那一段，有木有發(fā)現(xiàn)醫(yī)生家的設(shè)備都很有意思～
比如那個人皮縫紉機(jī)，其靈活程度堪比織網(wǎng)ing的蜘蛛
說到蜘蛛，就想起了西游記里的蜘蛛精。今年下半年……

…………
…………
除了人皮縫紉機(jī)，當(dāng)時還注意到他們屏幕的一個交互很有趣——

沒錯，今天的主角出場了
就是用JS做一個類似的旋轉(zhuǎn)縮放控件
先來看一哈最終效果，鐺鐺：

貌似手感不錯？可以點(diǎn)此搶先體驗（此版本僅限PC端玩家）

本篇首先開發(fā)一個demo試試水，暫時用鼠標(biāo)代替手指

實現(xiàn)思路如下：

畫一個彩色圓環(huán)

監(jiān)聽鼠標(biāo)移動事件（保證只能作用在圓環(huán)上）

實時計算鼠標(biāo)當(dāng)前的角度（相對于圓心）

對比當(dāng)前角度和上一次角度，確定每一幀的旋轉(zhuǎn)方向和距離，根據(jù)變化的角度值旋轉(zhuǎn)圓環(huán)

縮放操作外部dom

這里使用大圓套小圓組成圓環(huán)：大圓設(shè)置一個漸變背景色，小圓為純白色
為啥子不只用一個圓，然后設(shè)置border屬性捏？
因為我不喜歡
因為border不能設(shè)置漸變色
當(dāng)然還有另一個作用：阻止事件（詳見下文）

萬事俱備，開始裝逼
目標(biāo)是把圓環(huán)用絕對定位放到左上角，而且內(nèi)圓要適中大小
所以分別設(shè)置圓心和大小圓的半徑為：

var CENTER = { x: 150, y: 150 }, BIG_RADIUS = 150, SMALL_RADIUS = 70

創(chuàng)建div表示兩個圓

var bigCircle = document.createElement("div")
var smallCircle = document.createElement("div")
document.body.appendChild(bigCircle)
document.body.appendChild(smallCircle)

封裝一個函數(shù)方便給大小圓添加樣式
參數(shù)：center圓心、radius半徑、bg背景、isMove是否運(yùn)動（使用CSS3的變化和旋轉(zhuǎn)，每0.16秒運(yùn)動一次，即60幀）

function setCircleClass(center, radius, bg, isMove) {
    this.style.position = "absolute"
    this.style.left = center.x - radius + "px"
    this.style.top = center.y - radius + "px"
    this.style.width = radius * 2 + "px"
    this.style.height = radius * 2 + "px"
    this.style.borderRadius = "50%"
    this.style.zIndex = 66666
    this.style.background = bg
    isMove && (this.style.transition = "transform linear .016s")
}

調(diào)用函數(shù)添加樣式

setCircleClass.apply(bigCircle, [CENTER, BIG_RADIUS, "linear-gradient(skyblue, darkorange)", true])
setCircleClass.apply(smallCircle, [CENTER, SMALL_RADIUS, "#FFF", false])

顏色有點(diǎn)瓜皮：

監(jiān)聽大圓的mousemove事件，同時小圓阻止事件傳播

bigCircle.addEventListener("mousemove", main)
smallCircle.addEventListener("mousemove", function(e) {
    e.stopPropagation()
})

創(chuàng)建大圓的監(jiān)聽函數(shù)main
這里設(shè)置鼠標(biāo)左鍵按下時生效，順便寫一個打印語句

function main(e) {
    if(e.buttons === 1) {
        console.log("鼠標(biāo)在圓環(huán)移動ing")
    }
}

接下來就是重頭戲了，想要讓圓環(huán)跟隨鼠標(biāo)轉(zhuǎn)動，首先想到的絕壁是斜率
在監(jiān)聽事件觸發(fā)時，不停計算鼠標(biāo)位置和圓心兩點(diǎn)連線的斜率，通過對比本次的斜率和上一次斜率，即可得出圓環(huán)轉(zhuǎn)動的方向
方向有了，還要計算圓環(huán)移動的速度，然而斜率的變化并不是線性的，因此很難通過斜率的變化值來計算速度……
所以光有斜率是沒辦法解決問題的，那么有木有其他線性變化的東西呢……
沒錯，就是角度了～！

記得Math對象有一些三角函數(shù)方法，速速去查

正在眼花繚亂之時，突然眼角一閃，一個黑衣人從天而降，定睛一看，正是傳說中的atan2函數(shù)
“騷年，你要找的人正是在下”

打量了一番，發(fā)現(xiàn)這哥們不僅長得帥，而且手中還拿了一個神器：計算角度函數(shù)

function calcAngleDegrees(x, y) {
    return Math.atan2(y, x) * 180 / Math.PI
}

臥槽，簡直是踏破鐵鞋，趕緊來戰(zhàn)：

function main(e) {
    if(e.buttons === 1) {
        var angle = calcAngleDegrees((e.clientX - CENTER.x), (CENTER.y - e.clientY))
        console.log("角度：" + angle)
    }
}

如圖可以看到，角度的變化是從9點(diǎn)鐘方向的180度，順時針遞減360度，回到9點(diǎn)鐘方向
正符合我們后續(xù)的需求

“大師果然牛皮，不知您的一身好武功是如何修來的？”
atan2笑而不語，一轉(zhuǎn)身便消失在了無盡的夜色中，只留下了無盡的疑問……

既然如此，作為一個熱愛技術(shù)的搬磚工，我決定自己找出真相~

本小節(jié)終。

有了角度值，下面就的問題就引刃而解了

先創(chuàng)建一個函數(shù)用來旋轉(zhuǎn)圓環(huán)，參數(shù)：deg當(dāng)前圓環(huán)的角度

function rotate(deg) {
    this.style.webkitTransform = "rotate(" + deg + "deg)"
    this.style.mozTransform = "rotate(" + deg + "deg)"
    this.style.msTransform = "rotate(" + deg + "deg)"
    this.style.oTransform = "rotate(" + deg + "deg)"
    this.style.transform = "rotate(" + deg + "deg)"
}

創(chuàng)建變量：當(dāng)前圓環(huán)(大圓)角度值circleAngle、當(dāng)前鼠標(biāo)角度值mouseAngle、上一次鼠標(biāo)角度值lastMouseAngle

var circleAngle = 0, mouseAngle, lastMouseAngle

此處需初始化lastMouseAngle，這個操作看似簡單，實則使用正確的姿勢可以避免一系列bug
這里研究出來比較好的方法就是在鼠標(biāo)移入圓環(huán)和在圓環(huán)中按下鼠標(biāo)的時候賦值，感性趣的童鞋可以自行研究一下

bigCircle.addEventListener("mouseenter", init)
bigCircle.addEventListener("mousedown", init)

function init(e) {
    lastMouseAngle = calcAngleDegrees((e.clientX - CENTER.x), (CENTER.y - e.clientY))
}

初始化lastMouseAngle之后，mouseAngle - lastMouseAngle即為角度的增量

增量正負(fù)決定方向：正數(shù)為逆時針，負(fù)數(shù)為順時針
增量大小決定距離：絕對值即是圓環(huán)旋轉(zhuǎn)的角度

由于順時針旋轉(zhuǎn)時增量為負(fù)，且CSS里transform屬性為順時針旋轉(zhuǎn)增加角度
所以當(dāng)前圓環(huán)的角度計算公式為：circleAngle -= (mouseAngle - lastMouseAngle)

改造main函數(shù)：

function main(e) {
    if(e.buttons === 1) {
        mouseAngle = calcAngleDegrees((e.clientX - CENTER.x), (CENTER.y - e.clientY))
        var changeMouseAngle = mouseAngle - lastMouseAngle
        circleAngle -= changeMouseAngle
        console.log("當(dāng)前角度：" + circleAngle)
        rotate.call(this, circleAngle)
        lastMouseAngle = mouseAngle
    }
}

可以看到已經(jīng)有了雛形，愉快地進(jìn)入下一步

想要操作外部dom，需要的是一個線性變化的值
用腳趾頭都能想到，當(dāng)前最合適的無疑就是當(dāng)前圓環(huán)角度circleAngle了
然鵝仔細(xì)觀察上一張圖就會發(fā)現(xiàn)，當(dāng)鼠標(biāo)每次移動過9點(diǎn)鐘方向時，圓環(huán)角度就會瞬間改變360度，回到初始值，并不能滿足當(dāng)前需求
此處做一波改造，判斷當(dāng)角度的變化值changeMouseAngle超過一定度數(shù)的時候，不執(zhí)行后面的操作
考慮到單身20年用戶的手速，暫時設(shè)置這個值為300

var MAX_CHANGE_ANGLE = 300
function main(e) {
    ...
    var changeMouseAngle = mouseAngle - lastMouseAngle
    if(Math.abs(changeMouseAngle) > MAX_CHANGE_ANGLE){
        return lastMouseAngle = mouseAngle
    }
    ...
}

這樣circleAngle就會呈線性變化了

接下來的事就是找一張阿麗塔的美圖了

.pic {
    width: 100px;
    margin: 100px auto;
    border-radius: 10px;
}
.pic img {
    width: 100%;
    border-radius: 10px;
}

最后寫一段縮放代碼：

var picDom = document.getElementsByClassName("pic")[0]

function controlPic(value) {
    this.style.width = 100 + 1 * value + "px"
}

function main(e) {
    ...
    controlPic.call(picDom, circleAngle)
    ...
}

大功告成！查看完整的代碼示例請戳這里，在線體驗請戳這里

從《阿麗塔》上映那天起就開始醞釀這篇博客了，直到一個多月后的今天……

不多BB，下一篇博客將會在demo的基礎(chǔ)上封裝插件，有生之年見~

原文地址在此 ，歡迎來玩~