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