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