開源夏令營總結

  時間過得很快， 開源夏令營就要結束了， 今天就簡單總結一下這段時間的所學所做。

一. 準備工作

1. 研究源代碼：

因為項目已經有一定規模， 是以第一步肯定是要先弄懂現有項目結構和代碼邏輯。

• 所做的工作： 
  • 學習和練習backbonejs， requirejs， sass
  • 了解MV*模式， 弄懂每一部分具體做哪些工作
• 我的了解： 
  • controlljs是整個編輯器的核心，是連接配接view層和model資料層的紐帶。
  • view層負責把資料顯示出來， 包括每一幀的具體資料， 和骨骼父子關系等
  • model， collection會負責資料的驗證和存取。

每當使用者操作時，會在view層觸發事件， 然後通知到controller層， 然後拿到model層的資料， 最後再通過view層進行顯示。

2. 其他工作

• 下載下傳使用能制作骨骼動畫編輯器的軟體， 比如cocostudio和spine。
• 了解動畫引擎（alloystick）的demo和需要的資料

二. 前期任務

1. 骨骼資料合法性驗證（ 在model層經行驗證，不通過則資料不變）
2. 工作區可以一次性拖入多張圖檔， 同時添加多個骨骼
3. 可以隐藏骨骼樹面闆， 為時間軸模闆提供更大的空間， 便于編輯動畫

通過這幾個任務， 更加熟悉了這個項目， 包括每一部分具體的實作都會有所了解。

三. 後期任務

1. 學習node-webkit：
   • 看node-webkit的官方wiki， 配好環境
   • 內建node-webkit到項目中
   • 利用grunt-node-webkit-builder 導出應用
2. 導出資料和動畫預覽
   • 根據文檔，具體了解動畫引擎所需要的資料的作用
   • 把骨骼蒙皮圖檔畫到一張畫布上， 然後導出一張大圖和相關資料
   • 把幀資料進行一些處理， 然後導出
   • 加一個iframe， 加載動畫引擎js， 然後實作動畫預覽

四. 總結

• 這段時間有很大的收獲，以前寫代碼時總想着怎麼去實作一個功能。 現在覺得這不夠， 不僅要實作而且還要優雅的實作（包括容錯， 可擴充， 代碼規範， 注釋， 實作方法的效率…），是以 時刻要想着有沒有更好的辦法實作。
• 深刻體會到了一個項目的整體規劃，和MV*這種模式的好處。 把工作分成幾個部分，交給幾部分代碼去實作。 這樣便于了解， 也便于維護。
• 對骨骼動畫有了更深入的了解，看似簡單的變換（平移， 旋轉， 縮放）和透明度（alpha), 遮蓋順序（z-index） 就能産生生動的動畫， 讓我更加體會到了程式設計的樂趣。