動畫的post-Flash時代幾乎是免費的。 CSS動畫正迅速成為用戶友好界面的基石在移動和桌面,和JavaScript庫已經(jīng)存在處理復(fù)雜的交互式動畫。 之后,這么多“CSS和JavaScript動畫”內(nèi)斗,一個新的API專門為網(wǎng)絡(luò)動畫出來,可能只是團結(jié)兩個陣營。

web的動畫,這是一個激動人心的時刻,也是一次嚴重的誤解和錯誤的信息。 2014年,我有機會周游世界來談?wù)?nbsp;在用戶界面設(shè)計中使用動畫 。 我見到并采訪了許多人使用和冠軍的CSS和JavaScript。 在采訪了許多開發(fā)人員,設(shè)計師和瀏覽器的代表,我發(fā)現(xiàn)了一個技術(shù)和人類的故事被告知。

你將要讀的是純粹的觀察和公正的一個帳戶,你將能夠找到在網(wǎng)絡(luò)動畫的主題。

Flash可能消失,但網(wǎng)絡(luò)動畫的時代才剛剛開始

Flash的時代以來,它已經(jīng)成為時尚認為動畫裝飾,多一個“華麗”事后,經(jīng)常在貧窮的味道,就像一件不受歡迎的 眨眼標記。 但是,除非我們想要顯示在屏幕上沒有什么比復(fù)制其他,動畫仍然是我們的朋友。

為 用戶界面設(shè)計師 、動畫加強層次結(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的狩獵團隊趕走了CSS動畫和過渡規(guī)格,以便網(wǎng)站外觀和感覺和iOS應(yīng)用程序做的一樣好。 甚至谷歌已經(jīng)撿起, 把動畫前面和中心 其材料設(shè)計建議,小心守則應(yīng)用動畫和過渡有意義,有目的。

動畫是自然進化的下一步我們的應(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ù)偽類,如 :徘徊和 :目標,它接受來自用戶和用戶的上下文環(huán)境。 它只是作者告訴它做什么,不能應(yīng)對新的輸入或改變環(huán)境。 沒有辦法創(chuàng)建一個CSS動畫,說:“如果你在頁面的中間,這樣做,否則,這樣做。 “CSS不包含這樣的邏輯。

當CSS-first開發(fā)者需要邏輯,他們通常先范圍CSS類,使用JavaScript處理的邏輯在應(yīng)用這類。 框架如 AngularJS 支持國家,許多UI交互容易適應(yīng)一些州,如“加載”,“開放”和“選擇。 “這些動畫也在老的瀏覽器完全降低,提供急需的用戶體驗提升支持CSS動畫和過渡的地方。

交互開發(fā)人員有不同的時間。 CSS動畫也常常聲明來處理這些開發(fā)人員想要的東西。 付費客戶需求可靠動畫跨瀏覽器的廣泛,所以,許多交互開發(fā)人員和他們的工作室所做的所有聰明的開發(fā)人員做什么:讓省力庫定制自己的過程。 其中一些圖書館,喜歡 gsap 和 速度 向公眾開放和發(fā)達。 但許多人永遠不會被釋放在野外,因為人民和機構(gòu)創(chuàng)建他們沒有時間或金錢(或?qū)?來支持一個開源項目。

這是一個令人深感擔憂的故事,我聽過一遍又一遍,它表明,許多開發(fā)人員都無需移動web的重新發(fā)明輪子。 沒有足夠的需求被認為是“好”的東西來支持許多競爭對手。 很容易看出圖書館像GSAP必須商業(yè)為了生存,或者贊助浮標庫速度。

Flash做了偉大的事情給交互開發(fā)人員和用戶界面設(shè)計人員一個通用工作流,適應(yīng)各種各樣的動畫和編輯平臺。 但自 史蒂夫·喬布斯在2010年宣布iPhone不會支持Flash ,許多前Flash開發(fā)者已經(jīng)悄悄地進入流亡,帶著他們的小知識。 現(xiàn)在,整整一代的網(wǎng)頁設(shè)計師與相對上線不知道我們面臨的機會和挑戰(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);

• 引入 嵌套和測序動畫 以來,我們還沒有看到閃光;

• 讓我們暫停,玩耍,探索,反向,加速或者減速播放 時機字典 和 動畫播放器對象 。

這是 只是一個例子的Web API可以CSS動畫無法 。

支持

Web動畫API已經(jīng)超過兩年,和它的功能一直在推出Chrome和Firefox夜間在過去的六個月。 Mozilla是規(guī)范背后的主要力量。 與此同時,Chrome團隊已經(jīng)優(yōu)先發(fā)貨的功能。

微軟API“考慮” Internet Explorer。 蘋果,令人驚訝的是,Safari也采取了觀望的態(tài)度。 我們只能幻想當API將達到這些 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ā)人員能夠安全地使用它在一個“圍墻花園”,直到它達到成熟和全面的支持。

性能

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ā)生改變,那件事。 你做你要做有效地改變它。 “希望隨著瀏覽器越來越懂得圖形,他們將這些元素進入自己的層或優(yōu)化他們處理這些圖形的方式。 這是消除黑客的第一步 translateZ(0)。

等“性能黑客”經(jīng)常被打了一個神奇的修復(fù)每當動畫閃避,但他們經(jīng)常使用時無意中導(dǎo)致性能問題。 性能決定最好是真正留給瀏覽器從長遠來看。 幸運的是,瀏覽器制造商爭相讓更少的屬性觸發(fā)回流,從而讓他們從主線程。 對于動畫庫開發(fā)人員,這意味著Web動畫API可以贏得合作伙伴的性能在不久的將來。

工具

任何人使用web動畫渴望適當?shù)膭赢嬮_發(fā)工具:一個時間表,財產(chǎn)檢查,更好的編輯,并且能夠暫停,回放,否則檢查調(diào)試時一個動畫。 網(wǎng)絡(luò)動畫API將開放CSS渲染引擎的核心開發(fā)者和瀏覽器廠商自己創(chuàng)建這些工具。 這兩個 鉻 和Firefox準備動畫功能的開發(fā)工具。 這個API打開這些可能性。

今天的Web動畫社區(qū)

沒有多少人以外的其他工作都知道網(wǎng)絡(luò)動畫的API。 標準社區(qū)是渴望真實的反饋交互和動畫庫開發(fā)人員。 然而,許多開發(fā)人員認為standardistas生活在象牙塔,遠離戰(zhàn)壕的放縱,客戶的需求和Flash的經(jīng)驗教訓(xùn)。

老國王的冠軍他曾流放的人。

公平地講,standardistas還沒有出來迎接他們的聽眾。 加入“官方”Web動畫API談話,你必須跨越一些障礙,讓電子郵件鏈可能溢出的收件箱忙碌的開發(fā)人員。 或者,您可以在IRC和加入談話,如果只有設(shè)計師使用IRC。 需要發(fā)生的談話是不太可能發(fā)生,如果人最簡單地說沒有。 供應(yīng)商和規(guī)范作者需要找到更多的方法來接觸他們的關(guān)鍵的觀眾,否則風險構(gòu)建一個API沒有觀眾。

但standardistas并不是唯一有溝通問題。 作為一個社區(qū),我們非常武斷和快速嘲笑我們認為不值得的事情,Flash或一個API,我們不喜歡的樣子。 我們中的很多人投資我們的自我的工具和流程。 但這些東西不能定義我們。 我們一起創(chuàng)建定義了我們。

• 動畫庫開發(fā)人員 , 閱讀此規(guī)范 。 它很長,但是如果GreenSock的杰克柯南道爾能做到,你也可以。

• 交互開發(fā)人員 那些沒有整天讀一個巨大的規(guī)范,只是讀了 自述polyfill的頁面 。 這是一個好的TLDR。 現(xiàn)在你知道什么是未來,你就會知道當它可能對你有用,是否優(yōu)化圖書館的性能或構(gòu)建一個瀏覽器UI時間表。

• 設(shè)計師 ,在工作中優(yōu)先考慮的JavaScript。 polyfill玩,玩GSAP和速度。 找出這些東西能做什么對你的工作,CSS無法完成。

與網(wǎng)絡(luò)動畫,我們有一個難得的機會,把我們的自我放在一邊,一起作為一個社區(qū)構(gòu)建一個工具,未來的設(shè)計人員和開發(fā)人員可以構(gòu)建偉大的事情。 為他們的緣故,我希望我們能。

名稱欄目：Flash可能消失,但網(wǎng)絡(luò)動畫時代才剛開始.
URL標題：http://www.rwnh.cn/news/80393.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站策劃、云服務(wù)器、定制網(wǎng)站、建站公司、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)