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