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