在6月Windows的Build 研討會上,我們向世界介紹了Visual Studio和Blend 2013 Preview版。隨著這次的發布,我們極大地擴展了Visual Studio對于用JavaScript、HTML、CSS創建Window Store Apps的支持,除了在Visual Studio中發現的客戶端診斷和調試工具外,Blend同時還提供了主機功能,旨在通過打破那折磨人的“編輯-刷新”周期來提高效率。
在本文中,我們將深度剖析一下Blend中三個改善 HTML/CSS開發最多的的部分,包括創作CSS Animations新的工作流程(1)、嵌入自定義字體(2)和數據綁定屬性(3)。
CSS 動畫
W3C CSS ANIMATIONS 規則 描述了一個極其強大的句法,但是該句法還是比較復雜的,難以單獨通過代碼來使其呈現出來,并且不容易調試。幸運的是,創作動畫有行之有效的模式。在這個版本中,Blend采用了最熟悉的模式之一:基于時間軸的創作。
通過動畫時間線,開發人員可以擦除至任意時間點,添加keyframes,拖放關鍵規則,修改迭代次數,設置填充模式等。簡而言之,你可以編輯任何一個或者每個W3W規則描述的CSS動畫。
大多其他的動畫創作工具需要一個JavaScript的依賴,但是Blend時間軸卻是眾多中獨一無二的一個,因為它創建了一個單純的并且無需JavaScript或其他框架的CSS動畫。一切都百分之百的符合CSS標準。這就意味著開發人員可以打開編輯任何網絡中發現的CSS動畫。
我們同樣注意到大多數的動畫工具只允許編輯工作程序以外的范圍。不幸的是,這種隔離是有代價的:開發者無法看到DOM中的動畫是如何與其他元素交互的。使用Blend,在工作程序范圍內開發者能直接刪除并且編輯動畫。這就意味著如果你設置動畫一個元素的寬度,例如,你就能看到它如何影響相鄰元素的布局。
雖然動畫應該謹慎使用在任何程序中,但正是諺語中的“錦上添花”促使我們做最好的應用,使得它們看起來靈敏、完美、現代化。我們認為動畫時間軸編輯器將會向那些期望往組合里面添加一些動作的UI開發人員證明這是無法估價的。