動(dòng)畫的post-Flash時(shí)代幾乎是免費(fèi)的。 CSS動(dòng)畫正迅速成為用戶友好界面的基石在移動(dòng)和桌面,和JavaScript庫(kù)已經(jīng)存在處理復(fù)雜的交互式動(dòng)畫。 之后,這么多“CSS和JavaScript動(dòng)畫”內(nèi)斗,一個(gè)新的API專門為網(wǎng)絡(luò)動(dòng)畫出來(lái),可能只是團(tuán)結(jié)兩個(gè)陣營(yíng)。
web的動(dòng)畫,這是一個(gè)激動(dòng)人心的時(shí)刻,也是一次嚴(yán)重的誤解和錯(cuò)誤的信息。 2014年,我有機(jī)會(huì)周游世界來(lái)談?wù)?在用戶界面設(shè)計(jì)中使用動(dòng)畫?。 我見(jiàn)到并采訪了許多人使用和冠軍的CSS和JavaScript。 在采訪了許多開(kāi)發(fā)人員,設(shè)計(jì)師和瀏覽器的代表,我發(fā)現(xiàn)了一個(gè)技術(shù)和人類的故事被告知。
你將要讀的是純粹的觀察和公正的一個(gè)帳戶,你將能夠找到在網(wǎng)絡(luò)動(dòng)畫的主題。
Flash可能消失,但網(wǎng)絡(luò)動(dòng)畫的時(shí)代才剛剛開(kāi)始
Flash的時(shí)代以來(lái),它已經(jīng)成為時(shí)尚認(rèn)為動(dòng)畫裝飾,多一個(gè)“華麗”事后,經(jīng)常在貧窮的味道,就像一件不受歡迎的?眨眼標(biāo)記。 但是,除非我們想要顯示在屏幕上沒(méi)有什么比復(fù)制其他,動(dòng)畫仍然是我們的朋友。
為?用戶界面設(shè)計(jì)師?、動(dòng)畫加強(qiáng)層次結(jié)構(gòu)、人際關(guān)系、結(jié)構(gòu)和因果關(guān)系。?回到90年代早期的研究?表明,屏幕上的動(dòng)畫幫助人類理解發(fā)生了什么。 動(dòng)畫縫合在一起應(yīng)用狀態(tài)和分流工作,大腦的GPU——視覺(jué)皮層。
為?交互開(kāi)發(fā)人員?復(fù)雜的視覺(jué)效果,從圖表上顯示板,電子游戲在平板電腦上——是不可能創(chuàng)造沒(méi)有動(dòng)畫膠各部分組合在一起。 如果我們想要這些東西在互聯(lián)網(wǎng)上,我們?nèi)匀恍枰獎(jiǎng)赢嫛?/p>
遺憾的是,我們已經(jīng)落后于運(yùn)動(dòng)設(shè)計(jì)競(jìng)賽。 產(chǎn)品使用動(dòng)畫受益用戶會(huì)成功,靜態(tài)或animation-abusing競(jìng)爭(zhēng)對(duì)手將會(huì)失敗。 目前,本地應(yīng)用跳動(dòng)的褲子了。 應(yīng)用程序開(kāi)發(fā)人員已經(jīng)將動(dòng)畫融入他們的設(shè)計(jì)和充實(shí)工作流和原型設(shè)計(jì)工具?flinto?和?Mitya?從第一天開(kāi)始。
但事情可能會(huì)扭轉(zhuǎn)。 iOS的狩獵團(tuán)隊(duì)趕走了CSS動(dòng)畫和過(guò)渡規(guī)格,以便網(wǎng)站外觀和感覺(jué)和iOS應(yīng)用程序做的一樣好。 甚至谷歌已經(jīng)撿起,?把動(dòng)畫前面和中心?其材料設(shè)計(jì)建議,小心守則應(yīng)用動(dòng)畫和過(guò)渡有意義,有目的。
動(dòng)畫是自然進(jìn)化的下一步我們的應(yīng)用程序和設(shè)備的生態(tài)系統(tǒng)。 它使數(shù)字世界各個(gè)年齡層的用戶更直觀和有趣的。 只要我們的設(shè)備運(yùn)動(dòng)gpu,它不會(huì)消失。
動(dòng)畫的所有事情
在其核心,動(dòng)畫只是一個(gè)可視化表示隨時(shí)間和空間變化的速度。 所有的動(dòng)畫可以簡(jiǎn)化為三種類型:
靜態(tài)的動(dòng)畫?從起點(diǎn)到終點(diǎn),沒(méi)有分支或邏輯。 這可以?CSS獨(dú)自完成?,因?yàn)?豐富的CSS加載動(dòng)畫?證明了。
有狀態(tài)的動(dòng)畫?在其最簡(jiǎn)單的形式接受布爾輸入-?點(diǎn)擊打開(kāi)一個(gè)菜單,點(diǎn)擊關(guān)閉它?例如,兩個(gè)國(guó)家之間的變化。 這是目前實(shí)現(xiàn)JavaScript框架的應(yīng)用和刪除類作用域CSS動(dòng)畫。
動(dòng)態(tài)動(dòng)畫?可以有多個(gè)結(jié)果取決于用戶輸入和其他變量。 它使用自己的邏輯來(lái)確定如何應(yīng)該動(dòng)畫和他們的端點(diǎn)是什么。 可能需要背后的“拖”頁(yè)面根據(jù)你刷卡的速度,你的手指或動(dòng)態(tài)變化的圖形作為新的數(shù)據(jù)。 這是最棘手的動(dòng)畫在我們今天處理完成的工具。 CSS就不能用于這種類型的動(dòng)畫。
更多的國(guó)家! =動(dòng)態(tài)動(dòng)畫
精明的CSS開(kāi)發(fā)人員可能指出,有足夠的州,CSS動(dòng)畫可以相似動(dòng)態(tài)動(dòng)畫。 這是真正的一個(gè)點(diǎn)。 但真正的動(dòng)態(tài)動(dòng)畫更多的比你可能預(yù)期的結(jié)束狀態(tài)。
想象一下不起眼的加載酒吧。 有一個(gè)不同的類為每個(gè)百分點(diǎn)的“豐滿”很容易就跑到一百行CSS,更不用說(shuō)JavaScript的次數(shù)將會(huì)接觸到DOM更新類和瀏覽器重繪。 我們絕對(duì)可以編寫一個(gè)更動(dòng)態(tài)加載程序單獨(dú)使用JavaScript性能。
CSS動(dòng)畫是聲明:除了少數(shù)偽類,如?:徘徊和?:目標(biāo),它接受來(lái)自用戶和用戶的上下文環(huán)境。 它只是作者告訴它做什么,不能應(yīng)對(duì)新的輸入或改變環(huán)境。 沒(méi)有辦法創(chuàng)建一個(gè)CSS動(dòng)畫,說(shuō):“如果你在頁(yè)面的中間,這樣做,否則,這樣做。 “CSS不包含這樣的邏輯。
當(dāng)CSS-first開(kāi)發(fā)者需要邏輯,他們通常先范圍CSS類,使用JavaScript處理的邏輯在應(yīng)用這類。 框架如?AngularJS?支持國(guó)家,許多UI交互容易適應(yīng)一些州,如“加載”,“開(kāi)放”和“選擇。 “這些動(dòng)畫也在老的瀏覽器完全降低,提供急需的用戶體驗(yàn)提升支持CSS動(dòng)畫和過(guò)渡的地方。
交互開(kāi)發(fā)人員有不同的時(shí)間。 CSS動(dòng)畫也常常聲明來(lái)處理這些開(kāi)發(fā)人員想要的東西。 付費(fèi)客戶需求可靠動(dòng)畫跨瀏覽器的廣泛,所以,許多交互開(kāi)發(fā)人員和他們的工作室所做的所有聰明的開(kāi)發(fā)人員做什么:讓省力庫(kù)定制自己的過(guò)程。 其中一些圖書館,喜歡?gsap?和?速度?向公眾開(kāi)放和發(fā)達(dá)。 但許多人永遠(yuǎn)不會(huì)被釋放在野外,因?yàn)槿嗣窈蜋C(jī)構(gòu)創(chuàng)建他們沒(méi)有時(shí)間或金錢(或?qū)?huì))來(lái)支持一個(gè)開(kāi)源項(xiàng)目。
這是一個(gè)令人深感擔(dān)憂的故事,我聽(tīng)過(guò)一遍又一遍,它表明,許多開(kāi)發(fā)人員都無(wú)需移動(dòng)web的重新發(fā)明輪子。 沒(méi)有足夠的需求被認(rèn)為是“好”的東西來(lái)支持許多競(jìng)爭(zhēng)對(duì)手。 很容易看出圖書館像GSAP必須商業(yè)為了生存,或者贊助浮標(biāo)庫(kù)速度。
Flash做了偉大的事情給交互開(kāi)發(fā)人員和用戶界面設(shè)計(jì)人員一個(gè)通用工作流,適應(yīng)各種各樣的動(dòng)畫和編輯平臺(tái)。 但自?史蒂夫·喬布斯在2010年宣布iPhone不會(huì)支持Flash?,許多前Flash開(kāi)發(fā)者已經(jīng)悄悄地進(jìn)入流亡,帶著他們的小知識(shí)。 現(xiàn)在,整整一代的網(wǎng)頁(yè)設(shè)計(jì)師與相對(duì)上線不知道我們面臨的機(jī)會(huì)和挑戰(zhàn)時(shí)增加動(dòng)畫的復(fù)雜性。
但事情將變得很…動(dòng)畫。
網(wǎng)絡(luò)動(dòng)畫API:?最偉大的?一個(gè)?你從未聽(tīng)說(shuō)過(guò)的API
網(wǎng)絡(luò)動(dòng)畫API是一個(gè)W3C規(guī)范,提供了一個(gè)統(tǒng)一的語(yǔ)言CSS和SVG動(dòng)畫,打開(kāi)瀏覽器的動(dòng)畫引擎開(kāi)發(fā)人員操作。 它下面的:
為動(dòng)畫引擎提供一個(gè)API,使我們能夠開(kāi)發(fā)更多瀏覽器動(dòng)畫工具,讓動(dòng)畫庫(kù)利用性能提高;
給(排位賽)動(dòng)畫它們自己的線程,擺脫閃避;
支持?運(yùn)動(dòng)路徑?;
提供post-animation回調(diào);
引入?嵌套和測(cè)序動(dòng)畫?以來(lái),我們還沒(méi)有看到閃光;
讓我們暫停,玩耍,探索,反向,加速或者減速播放?時(shí)機(jī)字典?和?動(dòng)畫播放器對(duì)象?。
這是?只是一個(gè)例子的Web API可以CSS動(dòng)畫無(wú)法?。
支持
Web動(dòng)畫API已經(jīng)超過(guò)兩年,和它的功能一直在推出Chrome和Firefox夜間在過(guò)去的六個(gè)月。 Mozilla是規(guī)范背后的主要力量。 與此同時(shí),Chrome團(tuán)隊(duì)已經(jīng)優(yōu)先發(fā)貨的功能。
微軟API“考慮”?Internet Explorer。 蘋果,令人驚訝的是,Safari也采取了觀望的態(tài)度。 我們只能幻想當(dāng)API將達(dá)到這些?web應(yīng)用程序引擎由古老的開(kāi)源瀏覽器的叉子?。
早期用戶想要探索這個(gè)API可以嘗試?Web動(dòng)畫polyfill API?,這是由所取代?網(wǎng)絡(luò)動(dòng)畫下?現(xiàn)在隨便任何一天(更多關(guān)于polyfill和API可以發(fā)現(xiàn)?聚合物的網(wǎng)站項(xiàng)目?)。 然而,對(duì)于不支持的瀏覽器API,polyfill仍不如GSAP性能,基于javascript動(dòng)畫庫(kù)的衛(wèi)冕冠軍。 因此,polyfill不是互動(dòng),開(kāi)發(fā)人員需要為高性能項(xiàng)目投入生產(chǎn)。
這將是一段時(shí)間這個(gè)API支持。 有一半的瀏覽器制造商等著看開(kāi)發(fā)人員將會(huì)使用它,并大多數(shù)開(kāi)發(fā)人員拒絕使用一個(gè)工具,不是廣泛支持,API將面臨一個(gè)雞生蛋還是蛋生雞的場(chǎng)景。 然而,在一個(gè)臺(tái)上交談與谷歌的保羅Kinlan Fronteers,我建議,API是完全支持web應(yīng)用程序在一個(gè)封閉的和"系統(tǒng),例如谷歌,開(kāi)發(fā)人員能夠安全地使用它在一個(gè)“圍墻花園”,直到它達(dá)到成熟和全面的支持。
性能
API的作者和實(shí)現(xiàn)者希望動(dòng)畫庫(kù)開(kāi)發(fā)人員將啟動(dòng)feature-sniffing API的支持去挖掘它的性能優(yōu)勢(shì)。 因?yàn)閃eb API使用CSS動(dòng)畫的渲染引擎,我們可以預(yù)期CSS的性能水平。 動(dòng)畫將運(yùn)行在它們自己的線程,只要他們不依賴于任何發(fā)生在主線程,如JavaScript或布局。
說(shuō)到布局,回流處理障礙仍然是最大的一個(gè)瀏覽器。 沒(méi)有CSS或JavaScript動(dòng)畫可以繞過(guò)它,除非你把一切直接通過(guò)WebGL GPU(一些聰明的內(nèi)部圖書館開(kāi)發(fā)人員一直在做)。 除了不透明和?轉(zhuǎn)換,帶動(dòng)了大量CSS屬性將導(dǎo)致回流,布局的改變和/或重新繪制在屏幕上的像素。 的?將會(huì)改變CSS屬性幫助一些?讓我們點(diǎn)的東西,告訴瀏覽器,“將會(huì)發(fā)生改變,那件事。 你做你要做有效地改變它。 “希望隨著瀏覽器越來(lái)越懂得圖形,他們將這些元素進(jìn)入自己的層或優(yōu)化他們處理這些圖形的方式。 這是消除黑客的第一步?translateZ(0)。
等“性能黑客”經(jīng)常被打了一個(gè)神奇的修復(fù)每當(dāng)動(dòng)畫閃避,但他們經(jīng)常使用時(shí)無(wú)意中導(dǎo)致性能問(wèn)題。 性能決定最好是真正留給瀏覽器從長(zhǎng)遠(yuǎn)來(lái)看。 幸運(yùn)的是,瀏覽器制造商爭(zhēng)相讓更少的屬性觸發(fā)回流,從而讓他們從主線程。 對(duì)于動(dòng)畫庫(kù)開(kāi)發(fā)人員,這意味著Web動(dòng)畫API可以贏得合作伙伴的性能在不久的將來(lái)。
工具
任何人使用web動(dòng)畫渴望適當(dāng)?shù)膭?dòng)畫開(kāi)發(fā)工具:一個(gè)時(shí)間表,財(cái)產(chǎn)檢查,更好的編輯,并且能夠暫停,回放,否則檢查調(diào)試時(shí)一個(gè)動(dòng)畫。 網(wǎng)絡(luò)動(dòng)畫API將開(kāi)放CSS渲染引擎的核心開(kāi)發(fā)者和瀏覽器廠商自己創(chuàng)建這些工具。 這兩個(gè)?鉻?和Firefox準(zhǔn)備動(dòng)畫功能的開(kāi)發(fā)工具。 這個(gè)API打開(kāi)這些可能性。
今天的Web動(dòng)畫社區(qū)
沒(méi)有多少人以外的其他工作都知道網(wǎng)絡(luò)動(dòng)畫的API。 標(biāo)準(zhǔn)社區(qū)是渴望真實(shí)的反饋交互和動(dòng)畫庫(kù)開(kāi)發(fā)人員。 然而,許多開(kāi)發(fā)人員認(rèn)為standardistas生活在象牙塔,遠(yuǎn)離戰(zhàn)壕的放縱,客戶的需求和Flash的經(jīng)驗(yàn)教訓(xùn)。
老國(guó)王的冠軍他曾流放的人。?
公平地講,standardistas還沒(méi)有出來(lái)迎接他們的聽(tīng)眾。 加入“官方”Web動(dòng)畫API談話,你必須跨越一些障礙,讓電子郵件鏈可能溢出的收件箱忙碌的開(kāi)發(fā)人員。 或者,您可以在IRC和加入談話,如果只有設(shè)計(jì)師使用IRC。 需要發(fā)生的談話是不太可能發(fā)生,如果人最簡(jiǎn)單地說(shuō)沒(méi)有。 供應(yīng)商和規(guī)范作者需要找到更多的方法來(lái)接觸他們的關(guān)鍵的觀眾,否則風(fēng)險(xiǎn)構(gòu)建一個(gè)API沒(méi)有觀眾。
但standardistas并不是唯一有溝通問(wèn)題。 作為一個(gè)社區(qū),我們非常武斷和快速嘲笑我們認(rèn)為不值得的事情,Flash或一個(gè)API,我們不喜歡的樣子。 我們中的很多人投資我們的自我的工具和流程。 但這些東西不能定義我們。 我們一起創(chuàng)建定義了我們。
動(dòng)畫庫(kù)開(kāi)發(fā)人員?,?閱讀此規(guī)范?。 它很長(zhǎng),但是如果GreenSock的杰克柯南道爾能做到,你也可以。
交互開(kāi)發(fā)人員?那些沒(méi)有整天讀一個(gè)巨大的規(guī)范,只是讀了?自述polyfill的頁(yè)面?。 這是一個(gè)完美的TLDR。 現(xiàn)在你知道什么是未來(lái),你就會(huì)知道當(dāng)它可能對(duì)你有用,是否優(yōu)化圖書館的性能或構(gòu)建一個(gè)瀏覽器UI時(shí)間表。
設(shè)計(jì)師?,在工作中優(yōu)先考慮的JavaScript。 polyfill玩,玩GSAP和速度。 找出這些東西能做什么對(duì)你的工作,CSS無(wú)法完成。
與網(wǎng)絡(luò)動(dòng)畫,我們有一個(gè)難得的機(jī)會(huì),把我們的自我放在一邊,一起作為一個(gè)社區(qū)構(gòu)建一個(gè)工具,未來(lái)的設(shè)計(jì)人員和開(kāi)發(fā)人員可以構(gòu)建偉大的事情。 為他們的緣故,我希望我們能。
本文由北京網(wǎng)站建設(shè)公司傳誠(chéng)信翻譯傳播，轉(zhuǎn)載請(qǐng)注明！
