寫在前面

Omi 框架 正式發布了 → omi-transform。

Made css3 transform super easy. Made 60 FPS easy.

作為 Omi 組件化開發特效運動解決方案，讓你輕松在 Omi 項目里快速簡便支持 CSS3 Transform 設置。css3transform 是經受過海量項目洗禮的，作為移動 Web 特效解決方案，在微信、手 Q 興趣部落、日跡、QQ 群、QQ 附近等項目中廣泛使用，以激進的修改 DOM 屬性為代價，帶來極為便利的可編程性。

你可以通過 css3transform 官方首頁快速了解它。

原文地址

“抓娃娃” 并不陌生，存在兩種結果: 抓到與抓不到。在 Web 動畫中，如上圖，“抓到” 與 “抓不到” 對應著兩個動畫，可以使用不同的動畫圖片資源來實現，似乎毫無異義。

細做觀察，不難發現：兩個動畫中 “動畫初始到抓取” 及 “抓取結束到動畫結束” 的區間中存在相同動畫 (滑動和晃動抓桿)。既然動畫相同，那么可以通過引用同一份動畫圖片資源，不做相同圖片的重復加載，從而減少總資源大小。

“兩個動畫間存在部分相同的動畫，相同部分可以引用同一份動畫圖片資源，來減少圖片的總大小?！?

肉眼進行辨別哪些動畫是一樣的？那是不可能的。gka 提供一鍵式制作多個動畫的方式，支持多種圖片優化方案 (含圖片去重)。

gka 是一款簡單的、高效的幀動畫生成工具，圖片處理工具。

官方文檔：https://gka.js.org

Github：https://github.com/gkajs/gka

原文地址

多倍圖的適配在前端開發還是比較常見的，像在 Retina 屏幕，一般會使用二倍圖從而讓圖片保持清晰，而在開發幀動畫中使用的圖片實際上同樣需要做這樣的適配處理。gka 提供一鍵式的制作多倍圖幀動畫的方式。

gka 是一款簡單的、高效的幀動畫生成工具，圖片處理工具。

官方文檔：https://gka.js.org

Github：https://github.com/gkajs/gka

最近業務比較忙，但是我們追求 3D 世界的腳步不能停下來~某天在路上看到一輛輛飛馳而過的汽車，想到要不要弄一個賽車類的游戲
沒有再用原生，而是使用了 threejs，畢竟大點的 3D 項目，再用原生就是自己給自己找麻煩了……
本文從 0 到 1 講解了這個游戲的開發過程，其中沒有專門的介紹 webgl 和 threejs，沒有基礎的同學可以結合 threejs 文檔一起看，或者先學習一下 webgl 的基礎知識~
游戲地址如下：

寫在前面

Md2site 是基于 Omi 的一款 Markdown 轉網站工具，使用簡單，生成的文件輕巧，功能強大。
當我們想把一堆 markdown 文檔轉成網站時，你可能有許多選擇，倘若選擇 md2site ，你一定會愛上她。

• 官網：http://alloyteam.github.io/omi/md2site/
• Github: https://github.com/AlloyTeam/omi/tree/master/md2site
• 真實案例:http://alloyteam.github.io/omi/website/docs-cn.html

特性

• 超輕巧，生成的網站除了 Omi 不依賴其他第三方庫，超級小的尺寸讓你加載更快
• 完整支持 Markdown，使用 markdown 寫你的文檔或者網站，完整支持 markdown 所有語法
• 響應式，生成的網站是響應式的，手機和 PC 都有不錯的閱讀體驗
• 多語言，天生支持多語言，只需增加修改配置便可。讓世界了解你的網站
• 代碼美，請記住: 不僅僅是代碼高亮，使用 md2site 輕松可以讓代碼內的某些代碼高亮
• 超方便，npm run dev 預覽，npm run dist 一鍵生成網站。不滿足現有布局或樣式可輕松進行二次開發

Open and modern framework for building user interfaces.

• Omi 的 Github 地址 https://github.com/AlloyTeam/omi
• 如果想體驗一下 Omi 框架，可以訪問 Omi Playground
• 如果想使用 Omi 框架或者開發完善 Omi 框架，可以訪問 Omi 使用文檔
• 如果你想獲得更佳的閱讀體驗，可以訪問 Docs Website
• 如果你懶得搭建項目腳手架，可以試試 omi-cli
• 如果你有 Omi 相關的問題可以 New issue
• 如果想更加方便的交流關于 Omi 的一切可以加入 QQ 的 Omi 交流群 (256426170)

背景：不知道大家還記不記得上次那個 3D 迷宮游戲，有同事吐槽說游戲中間有一個十字瞄準器，就感覺少了一把槍。好吧，那這次就帶來一款第一人稱射擊游戲。寫 demo 鍛煉，所以依舊用的原生 webgl，這次重點會說一下 webgl 中關于攝像頭相關的知識，點開全文在線試玩~~

背景：前段時間自己居然迷路了，有感而發就想到寫一個可以讓人迷路的小游戲，可以消 (bao) 遣 (fu) 時 (she) 間 (hui)

沒有使用 threejs，就連 glMatrix 也沒有用，純原生 webgl 干，寫起來還是挺累的，不過代碼結構還是挺清晰的，注釋也挺全的，點開全文開始迷宮之旅~

介紹這個工具前不得不先介紹一下積木系統。

積木系統是 imweb 團隊出品、為產品運營而生的一套活動頁面發布系統，詳細介紹見 PPT

簡單可以這么理解它的理念:

1. 一個頁面 = 一個模板 + 多個組件
2. 一個組件 = 一份代碼 + 一份數據
3. 一個組件開發一次，復用多次
4. 一個頁面使用多個組件拼裝后，實時預覽、快速發布上線

此前在阿里實習的時候也接觸過一個叫 TMS（淘寶內容管理系統）的系統, 專門用于快速搭建電商運營活動頁面.

這種系統可統一理解為運營活動頁面發布系統。

本文主要闡述使用 js 實現思維導圖的關鍵技術點，如果還不知道什么是思維導圖的同學，請自行度娘。以下是 demo 和源碼的傳送門：
demo：http://rockyren.github.io/mindmaptree/
源碼：http://github.com/RockyRen/mindmaptree/tree/master

在源碼中我使用了 svg 繪制思維導圖。與 canvas 相比，svg 將圖像當成對象，我們可將思維導圖中節點和線等圖形表現為對象，而且 svg 更適合用于動態交互的應用