MAC頻道

首頁登錄|注冊

Framer Studio原型設計工具(原創設計平臺)v11 最新版

Framer Studio原型設計工具(原創設計平臺)v11 最新版
  • 分類:編程開發
  • 大小:63.40 MB
  • 類型:免費版
  • 語言:簡體中文
  • 更新:2019-08-16
  • 評級:3星級
  • 平臺:macOS

免費下載

積分購買VIP免費

立即下載

下載不了?點擊報錯

  • 50%
Framer Studio原型設計工具(原創設計平臺)是一個原型設計工具,非常適合設計師學習代碼。學習代碼,快下載Framer Studio原型設計工具。許多中國設計師沒有編碼基礎。使用這種純代碼框架來構建接口是不現實的。現在,在100多個版本的更新之后,這個框架工作室變得更像草圖。你可以直接在里面用鼠標構建你的原型,你有了更接近草圖的藝術板的概念。

框架編程教學

和素描一樣,framer以層次的形式呈現設計。與草圖不同,每個圖層不僅具有樣式屬性,如大小、位置、背景顏色,還具有狀態屬性。每一層可以是另一層的父層,也可以是另一層的子層,這可以看作一組草圖。動態效果的表現是通過不同狀態之間的轉換來實現的,不同狀態之間的屬性變化形成互補動畫。
在framer的代碼中,有一些特殊的符號或單詞需要注意。讓我們以下面的代碼為例:
#設置背景色屏幕。背景色=層。onclick(事件、層)->。
分層。州。開關(“StateB”)
1。Dot:
它可以翻譯為“de”。
屏幕。上面代碼中的背景色被轉換為屏幕的背景色。應該注意的是,原點后面不僅可以有屬性值,還可以有一個操作。A層。上面代碼中的onclick轉換為“click layer A”。
2。等效符號:
這里的等號表示賦值,就像數學中的x=1表示1到x的賦值一樣。background color=“[333]在上述代碼中為屏幕背景色提供33的顏色,即將屏幕背景色設置為333。
3。井號:
數字是注釋,是代碼的記憶。即使在很長一段時間之后,您也可以通過查看注釋來查看代碼在做什么。系統不處理注釋,注釋只供人們查看。
4。關鍵詞:
所謂的關鍵字是框架中的一些關鍵字,命名時不能使用這些關鍵字。在上面的代碼中,backgroundcolor、onclick和states是關鍵字,在framer編輯器中通常是藍色的。隨著我們了解的越來越多,我們也會接觸到很多關鍵詞。
關鍵詞
5。功能:
回想一下數學中的函數:f(x,y)=x+y,f(x,y)接收參數x和y,計算x+y并將結果返回到f(x,y)。在framer中,函數的概念是相似的。它接受一個或多個參數并返回或不返回。
一般來說,我們需要先定義函數,然后到處引用函數。當我們引用它時,我們可以傳遞不同的參數。
framer的函數表達式一般定義如下:
總和=(a,b)->
A+B
這意味著函數sum接收兩個參數a和b,并在計算a+b后返回結果。當我們引用一個函數時,我們直接寫sum(2,3),所以sum(2,3)的值為5。
6。物體:
最后,它涉及到程序員所面臨的最終問題——對象,它是代碼中屬性和操作的集合。創建對象時,請使用新的關鍵字,例如創建女朋友層對象:
#create my friend and friend=新層
姓名:“美女”
寬度:60
高度:170
她有一些特質:美,寬60,高170。當我們使用她的屬性之一時,我們只需要使用小點,比如她的身高就是女朋友。高度。
同時,她還包括一些手術,如女朋友。CenterX(12),也就是說,她站在屏幕中央,向右移動12(CenterX()在框架中定義)。有所有層對象,可以詳細查閱。
現在回到我們的任務:在屏幕上畫一個藍色的圓圈,當你點擊它時,它會逐漸變綠,同時變成一個正方形。
假設圓的半徑是80,藍色是14c4ff,綠色是36e43c,我們先畫一個藍色的圓。
在框架中,層默認為一個矩形,因此我們可以先繪制一個正方形,然后將它的角半徑設置為寬度的一半,以成為一個圓。代碼是指:
#create layerlayera=新建層
寬度:160
高度:160
X:240
Y:300
背景色:“14c4ff”
邊界半徑:80
我們稱之為層。新層是新層。連接這個層是一個新的層,并將其分配給層A。以下代碼向后縮進(通過按Tab鍵),它表示層A的屬性。我們將寬度和高度設置為160,X和Y是位置。我隨機設置它,以便將其設置在屏幕中央。將背景色設置為藍色,角的半徑設置為80。一個圓出現在右側。
初始狀態:圓形
接下來,我們向它添加一個新狀態。
#添加狀態層A。狀態。添加
狀態B:
邊框半徑:0
背景色:“36E43C”

Framer Studio原型設計工具

相關截圖

相關軟件

相關專題

猜你喜歡

網友評論

11选5任5实战经验