Dosen原創(chuàng)
開(kāi)始學(xué)習(xí)Framerjs塞椎，邊學(xué)邊翻譯，也加了一些我學(xué)習(xí)過(guò)程中的理解羡忘。寫(xiě)下來(lái)留作以后查閱谎痢，看官如果發(fā)現(xiàn)有地方寫(xiě)的不對(duì)請(qǐng)指出。轉(zhuǎn)載請(qǐng)聯(lián)系作者卷雕。
Dragging????? 拖動(dòng)
Draggable layers in Framer include physics and many customizable properties that open up new creative possibilities. By accounting for things like the speed and the direction, you can take greater control over dragging interactions.
在Framer中的可拖動(dòng)層包含物理屬性和很多自定義屬性节猿，可以激發(fā)創(chuàng)意。通過(guò)對(duì)類似于速度和方向的一些事情的解釋，可以對(duì)拖動(dòng)交互達(dá)到很好的控制滨嘱。
Let’s start by creating a draggable layer. Simply set
draggable.enabled
to
true
. Now, you can pick it up, place it elsewhere, and even toss it around.
讓我們開(kāi)始創(chuàng)建可拖動(dòng)層峰鄙。只需要簡(jiǎn)單的把draggable.enabled設(shè)置為true。現(xiàn)在太雨，你可以把它拿起來(lái)了吟榴，放在任何地方，甚至扔出去囊扳。
You can also restrict the dragging direction, by disabling dragging horizontally or vertically. Both are enabled by default. You can also specify the speed. This can provide you with accelerated or reduced dragging.
你也可以限制拖動(dòng)的方向吩翻，禁用拖動(dòng)的水平方向或垂直方向，默認(rèn)兩個(gè)方向都是可用的锥咸。你也可以指定速度狭瞎，這個(gè)可以讓你加速或減速拖動(dòng)。
Constraints????? 約束
In most cases, you’ll want to limit the range a layer can be dragged within. For example, think of the pull-to-refresh gesture, in which you can only drag a certain distance. In Framer, this can be achieved with constraints.
在大多數(shù)時(shí)候搏予，你會(huì)想要限制一個(gè)層可以被拖動(dòng)的范圍熊锭。例如，像下拉刷新的手勢(shì)雪侥，你只能拖動(dòng)一定的距離碗殷。在Framer中，可以利用約束來(lái)完成校镐。
Constraints have x, y, width and height properties. Think of it as another layer, that contains your draggable layer.
約束有x亿扁，y，寬和高這些屬性鸟廓。把約束想象成一個(gè)別的層从祝，它包含你的可拖動(dòng)層。
這段代碼先把layerA層的可拖動(dòng)屬性設(shè)為true引谜，又將可拖動(dòng)的約束設(shè)為位置x：0牍陌，y：0，寬：160px员咽，高80px毒涧。
Overdrag, Bounce and Momentum? ? ? 拖出，彈力和慣性
(暫這么翻譯贝室，如果有朋友知道這三個(gè)名詞的確切翻譯契讲，麻煩留言告訴我)
It’s likely you’re already familiar with these terms, even if you don’t know them by name. Let’s have a look at each of them.
看來(lái)你已經(jīng)熟悉它們之間的關(guān)系了，甚至你還不知道它們的名字滑频。讓我們來(lái)單獨(dú)看看它們捡偏。
A draggable layer can be dragged beyond its constraints, although it will snap back. This is called overdrag. Think of Safari on iOS, where you can drag websites beyond the top and bottom of the pages.
一個(gè)可拖動(dòng)層可以被拖出它的約束，即使它還會(huì)吸附回來(lái)峡迷。這就叫做拖出银伟。想象在iOS的Safari你虹，你可以拖動(dòng)頁(yè)面超出頂部和底部。
When a layer is moving in a direction, it can also bounce beyond its constraints. This is called bounce. It’s sort of like a rubber-band effect.
當(dāng)層在一個(gè)方向上移動(dòng)時(shí)彤避，它的彈力可以超出它的約束傅物，這就叫做彈力。它有點(diǎn)像是橡皮筋效果琉预。
Finally, setting momentum to false disables the default physics of your draggable layer. You can still move it, but you can’t toss it around anymore. The momentum and bounce properties can also be customised. Have a look at this example of a custom draggable layer with constraints.
最后董饰，設(shè)置可拖動(dòng)層的慣性為false會(huì)讓默認(rèn)的物理失效。你仍然可以移動(dòng)它圆米，但是你無(wú)法將它扔出去尖阔。慣性和彈力屬性也是可以自定義的≌ジ溃可以看一下這個(gè)例子<使用了約束的可拖動(dòng)層案例> 。
Events????? 事件
The three fundamental dragging events that you can listen to are: DragStart, DragMove and DragEnd. The Move event is fired whenever the draggable layer is moving. Unlike the DragMove event, this includes the momentum and bounce animations.
有三個(gè)你可以監(jiān)聽(tīng)的基本的拖動(dòng)中事件谴供，是：拖動(dòng)開(kāi)始块茁，拖動(dòng)中，拖動(dòng)結(jié)束桂肌。當(dāng)可拖動(dòng)圖層移動(dòng)中時(shí)移動(dòng)事件才會(huì)被觸發(fā)数焊，不同于拖動(dòng)中事件，拖動(dòng)中事件包含了慣性和彈力動(dòng)畫(huà)崎场。
這段代碼是監(jiān)聽(tīng)了drag的開(kāi)始佩耳，進(jìn)行中，結(jié)束三個(gè)事件谭跨。
測(cè)試發(fā)現(xiàn)干厚，DragStart監(jiān)聽(tīng)的是在拖住并且開(kāi)始移動(dòng)的一瞬間。點(diǎn)住不動(dòng)并不是DragStart的監(jiān)聽(tīng)內(nèi)容螃宙。
而且感覺(jué)這個(gè)Move event出現(xiàn)的很突然蛮瞄，經(jīng)過(guò)查文檔，測(cè)試谆扎，半天才明白意思挂捅。在最后一句，官方說(shuō)了兩個(gè)事件堂湖，一個(gè)是Events.move闲先，一個(gè)是DragMove。move事件監(jiān)聽(tīng)的是手指拖動(dòng)移動(dòng)的過(guò)程无蜂，松開(kāi)手指結(jié)束伺糠。而DragMove監(jiān)聽(tīng)的是手指移動(dòng)的過(guò)程，加上加上松開(kāi)手指之后直到慣性以及彈力動(dòng)畫(huà)結(jié)束的過(guò)程酱讶。上圖退盯，一看就明白。
Drag Animation????? 拖動(dòng)動(dòng)畫(huà)
There are two specific events that occur when momentum and bounce are enabled: DragAnimationDidStart and DragAnimationDidEnd. They occur after DragEnd, while the layer is animating.
當(dāng)慣性和彈力被啟用時(shí)，出現(xiàn)兩個(gè)特殊的事件渊迁。拖動(dòng)動(dòng)畫(huà)開(kāi)始時(shí)和拖動(dòng)動(dòng)畫(huà)結(jié)束時(shí)慰照。它在拖動(dòng)結(jié)束的時(shí)候出現(xiàn)。
Both the ScrollComponent and the PageComponent are built with Draggable Layers, meaning you can use all draggable properties and methods as well. Learn more about the ScrollComponent next.
滾動(dòng)組件和頁(yè)面組件都是和可拖動(dòng)層一起組成琉朽，這意味著你可以使用所有的可拖動(dòng)層的屬性和方法毒租。學(xué)習(xí)更多關(guān)于滾動(dòng)組件請(qǐng)看下一篇。
Summary ? ? ?概要
Setting draggable.enabled to true creates a draggable layer
設(shè)置draggable.enabled為true來(lái)創(chuàng)建可拖動(dòng)層箱叁。
You can restrict the dragging direction of a layer
你可以限制一個(gè)層的拖動(dòng)方向墅垮。
You can limit the dragging range within with constraints
你可以通過(guò)約束來(lái)限制拖動(dòng)的范圍。
By default, a draggable layer has overdrag, momentum and bounce
默認(rèn)的耕漱，一個(gè)可拖動(dòng)層有 拖出算色、慣性和彈力。
The 3 basic dragging events are: DragStart, DragMove and DragEnd
3個(gè)基礎(chǔ)的拖動(dòng)事件是：拖動(dòng)開(kāi)始螟够、拖動(dòng)中灾梦、拖動(dòng)結(jié)束。
