墨刀
- 墨刀的好處和基本元素，可以參見15分鐘認(rèn)識(shí)墨刀基本元素
- 本次主要希望借助墨刀已有的模板和工具來實(shí)現(xiàn)模板復(fù)用和頁(yè)面內(nèi)動(dòng)態(tài)效果實(shí)現(xiàn)
本文目的
- 認(rèn)識(shí)墨刀已有模板
- 認(rèn)識(shí)墨刀工作流程
- 實(shí)現(xiàn)原型的快速開發(fā)
- “每天回家來個(gè)擁抱！” 迭代一
Ready Go!
借用前的思維準(zhǔn)備
吾嘗終日而思矣，不如須臾之所學(xué)也;吾嘗跂而望矣，不如登高之博見也。登高而招，臂非加長(zhǎng)也，而見者遠(yuǎn);順風(fēng)而呼，聲非加疾也，而聞?wù)哒?。假輿馬者，非利足也，而致千里;假舟楫者，非能水也，而絕江河，君子生非異也，善假于物也。
－荀子《勸學(xué)》
- 也是有趣，年紀(jì)越大，越能夠感受到古人所講的智慧。借助已有工具開發(fā)，真的是要比單獨(dú)開發(fā)快很多。
-
借用的基本原則：記住復(fù)用為了擴(kuò)展能力而非投機(jī)取巧。這里參考 V.Anton Spraul 的原文
復(fù)用的關(guān)鍵點(diǎn)
認(rèn)識(shí)墨刀已有模板
- 這里介紹 “母版” 和“組合面板”中的工具。
-
“組合面板”：
-
內(nèi)置組合面板完全 可以當(dāng)基本組件來使用。這種復(fù)用是合適而且高效的。
組合面板 - 自定義組合面板：如何只是希望將一些頁(yè)面設(shè)計(jì)結(jié)合起來，并被復(fù)用，使用自定義是非常好的選擇
-
-
母版：在墨刀里是一種可以不斷被重復(fù)使用的設(shè)計(jì)樣式，使用的時(shí)候用先要通過“母版編輯器”來編輯。
組合示例.gif -
“母版編輯器”：實(shí)際上就是新建了另一個(gè)工作區(qū)，只是整個(gè)工作局限在母版的范圍內(nèi)。通過返回鍵（在區(qū)域的左上角）回到原來工作區(qū)。（當(dāng)時(shí)我找了半天回到原來工作區(qū)的按鈕）。
母版編輯器.gif
工作流：列表區(qū)
- 在進(jìn)行組件布局和各種設(shè)計(jì)的時(shí)候，最重要的是需要面對(duì)各種頁(yè)面和各種組件組合和選擇，而列表區(qū)則顯示也幫助呈現(xiàn)這種目錄結(jié)構(gòu)。
-
對(duì)頁(yè)面進(jìn)行處理：“頁(yè)面列表” （圖片來自官方文檔），在這里多玩玩，很快就能上手
頁(yè)面列表示意.png -
對(duì)組件進(jìn)行選擇：“組件列表” 組件多了，尤其是層疊多了，選擇就困難了，直接在工作區(qū)點(diǎn)擊不如在這里點(diǎn)擊方便。
組件列表示意.gif -
在同一頁(yè)面中進(jìn)行動(dòng)態(tài)操作：“頁(yè)面狀態(tài)” 這是超級(jí)酷的功能！ 官方參考文檔 示例有些復(fù)雜了，讀起來還有些費(fèi)勁，這里做一些注解，并用一個(gè)簡(jiǎn)單的示例，
- 所有頁(yè)面必須有一個(gè)狀態(tài)，沒有則被顯示為默認(rèn)狀態(tài)，全局狀態(tài)不能被鏈接和操作；
- 每一個(gè)頁(yè)面狀態(tài)都不同和彼此獨(dú)立，包括鏈接；
- 通過超鏈接實(shí)現(xiàn)觸發(fā)和頁(yè)面關(guān)聯(lián)；
-
增加組件只能在全局狀態(tài)中進(jìn)行
頁(yè)面狀態(tài)示例，可以看到通過點(diǎn)擊星星實(shí)現(xiàn)從默認(rèn)狀態(tài)到狀態(tài)2的過渡
實(shí)現(xiàn)快速開發(fā)
- 第一版
- 更新changelog:
- 實(shí)現(xiàn) 組合面板復(fù)用，將禮物，好吃的，甜言蜜語(yǔ)構(gòu)建為一類附件；
- 實(shí)現(xiàn) 頁(yè)面狀態(tài) 更新 通過“點(diǎn)亮星星”?的方式實(shí)現(xiàn)頁(yè)面內(nèi)動(dòng)畫效果
甜蜜的秘密
