1. CSS3幀動畫
animation動畫除了可以實現補間動畫外，還可以完成逐幀動畫。
在animation的屬性中，有個屬性 animation-timing-function 一共具有如下這些值
CSS
貝塞爾緩動就是完成補間動畫的，比如流暢的縮放、位置移動等動畫。
但是逐幀動畫沒有補間效果的，它不是電腦根據初始和結束狀態的差異自動生成中間的過渡幀，而是每一幀都是關鍵幀，需要自己定義每一幀的狀態。
比如像下面這樣的圖，就只能通過逐幀動畫來實現運動效果↓
這幾個屬性值就是用來處理逐幀動畫的：
CSS
steps(number,position) ，有兩個參數。
number表示動畫的段數。關鍵幀的數量=段數+1。
position這個比較難理解，有兩個值：end和start。end是默認值。
先看一個效果。
兩個小球，從0px運動到400px，分為了4個動畫步驟，有5個關鍵幀。第一個是start模式，第二個是end模式。
發現start模式是時間一開始，直接進入第二個關鍵幀狀態，然後順利順利走完全程。
end模式有點傻，時間一開始，從第一個關鍵幀開始跑，結果時間結束了，才走完第四個關鍵幀，沒有完成全部路程就over了。
所以start和end的名字和它所表示的含義剛好相反。
比如執行次數或者填充模式。
為上面的小球加上infinite，可以看出start模式第二次開始的運動都是從第二個關鍵幀開始的。
加上forwards模式則變得不一樣了，forwards是向前的單詞意思，但是表示的則是保留動畫最後的運動狀態，意思和功能也是相反的。
第二個end模式的小球終於有機會走完全程了。
所以，當為end模式設置了forwards的時候要小心，因為它其實多走了一步。
1、這頭熊的原始素材一共有8個步驟。
所以使用 steps(8,end) 是最好的方式，因為如果使用 steps(8,start) ，則第一幀不能執行，最後一幀會閃白，圖片消失。
因為要一直運動，所以需要加上infinite，當執行完最後一張圖的時候，再返回到第一張圖，形成一個連貫的完步。
通過背景圖片的 background-position 的改變，形成熊的運動。
CSS
可以打開codepen編輯器，把運動時間設置更大一點，可以看到慢動作，一幀一幀是如何顯示的。
2、這個logo一共有24張圖片
但是logo只運動一次，並且停在結束狀態，根據end模式的特徵，如果加上forwards的話，會多運動一步。
所以，這里是 steps(23,end) ，為什麼是23步，而不是24步，因為forwards模式對它的影響。要想最後一步還要看到圖片，那麼背景圖片的挪動就要少挪動一個圖片的寬度。圖片整個寬度4800px，每一張圖200px的寬高。所以背景圖片只需要往左邊挪動-4600px即可。
CSS
通過上面的案例可以看出，對象的運動效果由逐幀繪制的圖片的間距所影響。間距一樣，則速度一樣。利用steps不能去改變現成的圖片幀與幀之間的速度。
但是利用 step-end 或者 step-start 卻是可以的。
3、 step-end 的特別用處
其實 step-end 等價於 steps(1,end) ， step-start 等價於 steps(1,start) 。
只有一個步驟的逐幀動畫，卻可以利用好時間的改變和距離的改變做出速度不同的效果來。
熊從左邊快速奔跑出來，一共跑了六步，一步比一步速度放慢。然後在原地踏步。
首先這是一個逐幀動畫，但是要實現不同的速度，又沒有辦法改變原來素材圖片與圖片之間的距離，所以要使用另外的辦法。
第一個完步時間間隔小，left的值間隔大，相當於速度快。背景圖片往左移動一張，left的值往右改變一次，熊實現往前奔跑。
CSS
第二個完步的時間間隔稍微大點，left的間隔小了一點，速度變慢了一些。依次類推，速度逐漸放緩。第二個完步又從第一幀開始。
CSS
所以說利用step-end還是可以做出速度不一樣的逐幀動畫的。
在線製作雪碧圖： https://www.toptal.com/developers/css/sprite-generator
2. flash如何在動畫前補幀
步驟2：插入——新建元件（圖形），用橢圓工具畫出一個圓球（按住shift鍵）。步驟3：回到場景1，選擇「視圖——網格——顯示網格」
步驟4：選擇「窗口——庫」，將元件庫調出來。
步驟5：選擇第一幀，將小球從元件庫中拖到場景中。
步驟6：在第20 幀上插入關鍵幀。
步驟7：移動小球，使其開始位置與結束位置不同。
3. 簡答題 什麼是flash動畫,如何理解動畫中的關鍵幀以及幀
Flash是美國的MACROMEDIA公司於1999年6月推出的優秀網頁動畫設計軟體。它是一種互動式動畫設計工具，用它可以將音樂，聲效，動畫以及富有新意的界面融合在一起，以製作出高品質的網頁動態效果。Flash動畫設計的三大基本功能是整個Flash動畫設計知識體系中最重要、也是最基礎的，包括：繪圖和編輯圖形、補間動畫和遮罩。這是三個緊密相連的邏輯功能，並且這三個功能自Flash誕生以來就存在。Flash動畫說到底就是「遮罩+補間動畫+逐幀動畫」與元件（主要是影片剪輯）的混合物，通過這些元素的不同組合，從而可以創建千變萬化的效果。
與膠片一樣，Flash 文檔也將時長分為幀。 在時間軸中，使用這些幀來組織和控制文檔的內容。 在時間軸中放置幀的順序將決定幀內對象在最終內容中的顯示順序。
關鍵幀是這樣一個幀：在其中定義對動畫的對象屬性所做的更改，或者包含 ActionScript 代碼以控制文檔的某些方面。 也可以在時間軸中排列關鍵幀，以便編輯動畫中事件的順序。 Flash能補間，即自動填充關鍵幀之間的幀，以便生成流暢的動畫。
通過關鍵幀，不用畫出每個幀就可以生成動畫，因此，關鍵幀使動畫的創建更為方便。
如果有相關的FLASH或者Animate操作及代碼方面的問題可以私信或留言，盡力解答！
4. 整理涵蓋很全很廣的前端知識點
HTML、CSS相關
html5新特性、語義化
瀏覽器渲染機制、重繪、重排
網頁生成過程：
重排(也稱迴流): 當 DOM 的變化影響了元素的幾何信息( DOM 對象的位置和尺寸大小)，瀏覽器需要重新計算元素的幾何屬性，將其安放在界面中的正確位置，這個過程叫做重排。 觸發：
重繪： 當一個元素的外觀發生改變，但沒有改變布局,重新把元素外觀繪制出來的過程，叫做重繪。 觸發：
重排優化建議：
transform 不重繪，不迴流 是因為 transform 屬於合成屬性，對合成屬性進行 transition/animate 動畫時，將會創建一個合成層。這使得動畫元素在一個獨立的層中進行渲染。當元素的內容沒有發生改變，就沒有必要進行重繪。瀏覽器會通過重新復合來創建動畫幀。
css盒子模型
所有 HTML 元素可以看作盒子，在CSS中， "box model" 這一術語是用來設計和布局時使用。 CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：邊距，邊框，填充，和實際內容。 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
css樣式優先順序
!important>style>id>class
什麼是BFC？BFC的布局規則是什麼？如何創建BFC？BFC應用？
BFC 是 Block Formatting Context 的縮寫，即塊格式化上下文。 BFC 是CSS布局的一個概念，是一個環境，裡面的元素不會影響外面的元素。 布局規則：Box是CSS布局的對象和基本單位，頁面是由若干個Box組成的。元素的類型和display屬性，決定了這個Box的類型。不同類型的Box會參與不同的 Formatting Context 。 創建：浮動元素 display：inline-block position:absolute 應用: 1.分屬於不同的 BFC 時,可以防止 margin 重疊 2.清除內部浮動 3.自適應多欄布局
DOM、BOM對象
BOM（Browser Object Model） 是指瀏覽器對象模型，可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。 使 JavaScript 有能力與瀏覽器"對話"。 DOM （Document Object Model） 是指文檔對象模型，通過它，可以訪問 HTML 文檔的所有元素。 DOM 是 W3C （萬維網聯盟）的標准。 DOM 定義了訪問 HTML 和 XML 文檔的標准： "W3C 文檔對象模型（DOM）是中立於平台和語言的介面，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。" W3C DOM 標准被分為 3 個不同的部分：
什麼是 XML DOM ？ XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。 什麼是 HTML DOM？ HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
JS相關
js數據類型、typeof、instanceof、類型轉換
閉包(高頻)
閉包是指有權訪問另一個函數作用域中的變數的函數 ——《JavaScript高級程序設計》
當函數可以記住並訪問所在的詞法作用域時，就產生了閉包，
即使函數是在當前詞法作用域之外執行 ——《你不知道的JavaScript》
原型、原型鏈(高頻)
原型: 對象中固有的 __proto__ 屬性，該屬性指向對象的 prototype 原型屬性。
原型鏈: 當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那麼它就會去它的原型對象里找這個屬性，這個原型對象又會有自己的原型，於是就這樣一直找下去，也就是原型鏈的概念。原型鏈的盡頭一般來說都是 Object.prototype 所以這就是我們新建的對象為什麼能夠使用 toString() 等方法的原因。
特點: JavaScript 對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。
this指向、new關鍵字
this 對象是是執行上下文中的一個屬性，它指向最後一次調用這個方法的對象，在全局函數中， this 等於 window ，而當函數被作為某個對象調用時，this等於那個對象。 在實際開發中， this 的指向可以通過四種調用模式來判斷。
new
作用域、作用域鏈、變數提升
繼承(含es6)、多種繼承方式
（1）第一種是以 原型鏈的方式來實現繼承 ，但是這種實現方式存在的缺點是，在包含有引用類型的數據時，會被所有的實例對象所共享，容易造成修改的混亂。還有就是在創建子類型的時候不能向超類型傳遞參數。
（2）第二種方式是使用 借用構造函數 的方式，這種方式是通過在子類型的函數中調用超類型的構造函數來實現的，這一種方法解決了不能向超類型傳遞參數的缺點，但是它存在的一個問題就是無法實現函數方法的復用，並且超類型原型定義的方法子類型也沒有辦法訪問到。
（3）第三種方式是 組合繼承 ，組合繼承是將原型鏈和借用構造函數組合起來使用的一種方式。通過借用構造函數的方式來實現類型的屬性的繼承，通過將子類型的原型設置為超類型的實例來實現方法的繼承。這種方式解決了上面的兩種模式單獨使用時的問題，但是由於我們是以超類型的實例來作為子類型的原型，所以調用了兩次超類的構造函數，造成了子類型的原型中多了很多不必要的屬性。
（4）第四種方式是 原型式繼承 ，原型式繼承的主要思路就是基於已有的對象來創建新的對象，實現的原理是，向函數中傳入一個對象，然後返回一個以這個對象為原型的對象。這種繼承的思路主要不是為了實現創造一種新的類型，只是對某個對象實現一種簡單繼承，ES5 中定義的 Object.create() 方法就是原型式繼承的實現。缺點與原型鏈方式相同。
（5）第五種方式是 寄生式繼承 ，寄生式繼承的思路是創建一個用於封裝繼承過程的函數，通過傳入一個對象，然後復制一個對象的副本，然後對象進行擴展，最後返回這個對象。這個擴展的過程就可以理解是一種繼承。這種繼承的優點就是對一個簡單對象實現繼承，如果這個對象不是我們的自定義類型時。缺點是沒有辦法實現函數的復用。
（6）第六種方式是 寄生式組合繼承 ，組合繼承的缺點就是使用超類型的實例做為子類型的原型，導致添加了不必要的原型屬性。寄生式組合繼承的方式是使用超類型的原型的副本來作為子類型的原型，這樣就避免了創建不必要的屬性。
EventLoop
JS 是單線程的，為了防止一個函數執行時間過長阻塞後面的代碼，所以會先將同步代碼壓入執行棧中，依次執行，將非同步代碼推入非同步隊列，非同步隊列又分為宏任務隊列和微任務隊列，因為宏任務隊列的執行時間較長，所以微任務隊列要優先於宏任務隊列。微任務隊列的代表就是， Promise.then ， MutationObserver ，宏任務的話就是 setImmediate setTimeout setInterval
原生ajax
ajax 是一種非同步通信的方法,從服務端獲取數據,達到局部刷新頁面的效果。 過程：
事件冒泡、捕獲(委託)
event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡
ES6
Vue
簡述MVVM
MVVM 是 Model-View-ViewModel 縮寫，也就是把 MVC 中的 Controller 演變成 ViewModel。Model 層代表數據模型， View 代表UI組件， ViewModel 是 View 和 Model 層的橋梁，數據會綁定到 viewModel 層並自動將數據渲染到頁面中，視圖變化的時候會通知 viewModel 層更新數據。
談談對vue生命周期的理解？
每個 Vue 實例在創建時都會經過一系列的初始化過程， vue 的生命周期鉤子，就是說在達到某一階段或條件時去觸發的函數，目的就是為了完成一些動作或者事件
computed與watch
watch 屬性監聽 是一個對象，鍵是需要觀察的屬性，值是對應回調函數，主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作,監聽屬性的變化，需要在數據變化時執行非同步或開銷較大的操作時使用
computed 計算屬性 屬性的結果會被緩存，當 computed 中的函數所依賴的屬性沒有發生改變的時候，那麼調用當前函數的時候結果會從緩存中讀取。除非依賴的響應式屬性變化時才會重新計算，主要當做屬性來使用 computed 中的函數必須用 return 返回最終的結果 computed 更高效，優先使用
使用場景 computed ：當一個屬性受多個屬性影響的時候使用，例：購物車商品結算功能 watch ：當一條數據影響多條數據的時候使用，例：搜索數據
v-for中key的作用
vue組件的通信方式
父子組件通信
父->子 props ，子->父 $on、$emit` 獲取父子組件實例 parent、 parent 、children Ref 獲取實例的方式調用組件的屬性或者方法 Provide、inject` 官方不推薦使用，但是寫組件庫時很常用
兄弟組件通信
Event Bus 實現跨組件通信 Vue.prototype.$bus = new Vue() Vuex
跨級組件通信
$attrs、$listeners Provide、inject
常用指令
雙向綁定實現原理
當一個 Vue 實例創建時，Vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉為 getter/setter並且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被調用時，會通知 watcher重新計算，從而致使它關聯的組件得以更新。
v-model的實現以及它的實現原理嗎？
nextTick的實現
vnode的理解，compiler和patch的過程
new Vue後整個的流程
思考：為什麼先注入再提供呢？？
答：1、首先來自祖輩的數據要和當前實例的data,等判重，相結合，所以注入數據的initInjections一定要在 InitState 的上面。2. 從上面注入進來的東西在當前組件中轉了一下又提供給後代了，所以注入數據也一定要在上面。
vm.[Math Processing Error]mount(vm.mount(vm.options.el) ：掛載實例。
keep-alive的實現
作用：實現組件緩存
鉤子函數：
原理： Vue.js 內部將 DOM 節點抽象成了一個個的 VNode 節點， keep-alive 組件的緩存也是基於 VNode 節點的而不是直接存儲 DOM 結構。它將滿足條件 （pruneCache與pruneCache） 的組件在 cache 對象中緩存起來，在需要重新渲染的時候再將 vnode 節點從 cache 對象中取出並渲染。
配置屬性：
include 字元串或正則表達式。只有名稱匹配的組件會被緩存
exclude 字元串或正則表達式。任何名稱匹配的組件都不會被緩存
max 數字、最多可以緩存多少組件實例
vuex、vue-router實現原理
vuex 是一個專門為vue.js應用程序開發的狀態管理庫。 核心概念：
你怎麼理解Vue中的diff演算法?
在js中,渲染真實 DOM 的開銷是非常大的, 比如我們修改了某個數據,如果直接渲染到真實 DOM , 會引起整個 dom 樹的重繪和重排。那麼有沒有可能實現只更新我們修改的那一小塊dom而不要更新整個 dom 呢？此時我們就需要先根據真實 dom 生成虛擬 dom ， 當虛擬 dom 某個節點的數據改變後會生成有一個新的 Vnode , 然後新的 Vnode 和舊的 Vnode 作比較，發現有不一樣的地方就直接修改在真實DOM上，然後使舊的 Vnode 的值為新的 Vnode 。
diff 的過程就是調用 patch 函數，比較新舊節點，一邊比較一邊給真實的 DOM 打補丁。在採取 diff 演算法比較新舊節點的時候，比較只會在同層級進行。 在 patch 方法中，首先進行樹級別的比較 new Vnode 不存在就刪除 old Vnode old Vnode 不存在就增加新的 Vnode 都存在就執行diff更新 當確定需要執行diff演算法時，比較兩個 Vnode ，包括三種類型操作：屬性更新，文本更新，子節點更新 新老節點均有子節點，則對子節點進行 diff 操作，調用 updatechidren 如果老節點沒有子節點而新節點有子節點，先清空老節點的文本內容，然後為其新增子節點 如果新節點沒有子節點，而老節點有子節點的時候，則移除該節點的所有子節點 老新老節點都沒有子節點的時候，進行文本的替換
updateChildren 將 Vnode 的子節點Vch和oldVnode的子節點oldCh提取出來。 oldCh和vCh 各有兩個頭尾的變數 StartIdx和EndIdx ，它們的2個變數相互比較，一共有4種比較方式。如果4種比較都沒匹配，如果設置了 key ，就會用 key 進行比較，在比較的過程中，變數會往中間靠，一旦 StartIdx>EndIdx 表明 oldCh和vCh 至少有一個已經遍歷完了，就會結束比較。
你都做過哪些Vue的性能優化？
你知道Vue3有哪些新特性嗎？它們會帶來什麼影響？
更小巧、更快速 支持自定義渲染器 支持搖樹優化：一種在打包時去除無用代碼的優化手段 支持Fragments和跨組件渲染
模板語法99%保持不變 原生支持基於class的組件，並且無需藉助任何編譯及各種stage階段的特性 在設計時也考慮TypeScript的類型推斷特性 重寫虛擬DOM 可以期待更多的編譯時提示來減少運行時的開銷 優化插槽生成 可以單獨渲染父組件和子組件 靜態樹提升 降低渲染成本 基於Proxy的觀察者機制 節省內存開銷
檢測機制 更加全面、精準、高效,更具可調試式的響應跟蹤
實現雙向綁定 Proxy 與 Object.defineProperty 相比優劣如何?
React
1、react中key的作用，有key沒key有什麼區別，比較同一層級節點什麼意思？
2、你對虛擬dom和diff演算法的理解，實現render函數
虛擬DOM 本質上是 JavaScript 對象,是對 真實DOM 的抽象表現。 狀態變更時，記錄新樹和舊樹的差異 最後把差異更新到真正的 dom 中 render函數:
3、React組件之間通信方式？
Context 提供了一個無需為每層組件手動添加 props ，就能在組件樹間進行數據傳遞的方法.如果你只是想避免層層傳遞一些屬性，組件組合（ component composition ）有時候是一個比 context 更好的解決方案。 5. 組件組合缺點：會使高層組件變得復雜
4、如何解析jsx
5、生命周期都有哪幾種，分別是在什麼階段做哪些事情？為什麼要廢棄一些生命周期？
componentWillMount、componentWillReceiveProps、componentWillUpdate在16版本被廢棄，在17版本將被刪除，需要使用UNSAVE_前綴使用，目的是向下兼容。
6、關於react的優化方法
使用return null而不是CSS的display:none來控制節點的顯示隱藏。保證同一時間頁面的DOM節點盡可能的少。
不要使用數組下標作為key 利用 shouldComponentUpdate 和 PureComponent 避免過多 render function ; render 裡面盡量減少新建變數和bind函數，傳遞參數是盡量減少傳遞參數的數量。 盡量將 props 和 state 扁平化，只傳遞 component 需要的 props （傳得太多，或者層次傳得太深，都會加重 shouldComponentUpdate 裡面的數據比較負擔），慎將 component 當作 props 傳入
使用 babel-plugin-import 優化業務組件的引入，實現按需載入 使用 SplitChunksPlugin 拆分公共代碼 使用動態 import ，懶載入 React 組件
7、綁定this的幾種方式
8、對fiber的理解
9、setState是同步還是非同步的
10、Rex、React-Rex
Rex的實現流程
用戶頁面行為觸發一個 Action ，然後 Store 調用 Recer ，並且傳入兩個參數：當前 State 和收到的 Action 。 Recer 會返回新的 State 。每當 state 更新之後， view 會根據 state 觸發重新渲染。
React-Rex:
Provider ：從最外部封裝了整個應用，並向 connect 模塊傳遞 store 。 Connect ：
11、對高階組件的理解
高階組件是參數為組件，返回值為新組件的函數。 HOC 是純函數，沒有副作用。 HOC 在 React 的第三方庫中很常見，例如 Rex 的 connect 組件。
高階組件的作用：
12、可以用哪些方式創建 React 組件？
React.createClass()、ES6 class 和無狀態函數
13、 React 元素與組件的區別？
組件是由元素構成的。元素數據結構是普通對象，而組件數據結構是類或純函數。
Vue與React對比？
數據流：
react 主張函數式編程，所以推崇純組件，數據不可變，單向數據流，
vue 的思想是響應式的，也就是基於是數據可變的，通過對每一個屬性建立Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。
監聽數據變化實現原理 ：
組件通信的區別：jsx和.vue模板。
性能優化
vuex 和 rex 之間的區別？
從實現原理上來說，最大的區別是兩點：
Rex 使用的是不可變數據，而 Vuex 的數據是可變的。 Rex 每次都是用新的 state 替換舊的 state ，而 Vuex 是直接修改
Rex 在檢測數據變化的時候，是通過 diff 的方式比較差異的，而 Vuex 其實和Vue的原理一樣，是通過 getter/setter 來比較的(如果看 Vuex 源碼會知道，其實他內部直接創建一個 Vue 實例用來跟蹤數據變化)
瀏覽器從輸入url到渲染頁面，發生了什麼？
網路安全、HTTP協議
TCP UDP 區別
Http和Https區別（高頻）
GET和POST區別（高頻）
理解xss，csrf，ddos攻擊原理以及避免方式
XSS ( Cross-Site Scripting ， 跨站腳本攻擊 )是一種代碼注入攻擊。攻擊者在目標網站上注入惡意代碼，當被攻擊者登陸網站時就會執行這些惡意代碼，這些腳本可以讀取 cookie，session tokens ，或者其它敏感的網站信息，對用戶進行釣魚欺詐，甚至發起蠕蟲攻擊等。
CSRF （ Cross-site request forgery ） 跨站請求偽造 ：攻擊者誘導受害者進入第三方網站，在第三方網站中，向被攻擊網站發送跨站請求。利用受害者在被攻擊網站已經獲取的注冊憑證，繞過後台的用戶驗證，達到冒充用戶對被攻擊的網站執行某項操作的目的。
XSS避免方式：
CSRF 避免方式：
DDoS 又叫分布式拒絕服務，全稱 Distributed Denial of Service ，其原理就是利用大量的請求造成資源過載，導致服務不可用。
5. 在Flash中幀是製作動畫的核心，請問幀的類型包括哪幾種，每一種的作用是什麼
● 空幀
空幀不是真正的幀，而是些矩形框，在這些矩形框里可以放入幀。在設計Flash動畫時，沒有內容的幀佔了時間軸的大部分，所以時間軸運行到空幀時就會停止放映。
● 關鍵幀
關鍵幀是特殊的幀，用來定義動畫中的變化，包括對象的運動和特點(如大小和顏色)，在場景中添加或刪除對象以及幀動作的添加。任何時候，當用戶希望動畫發生改變，或者希望發生某種動作，必須使用關鍵幀。
顯然，逐幀動畫需要許多關鍵幀，因為用戶必須單獨編輯每一幀。另一方面，一個過渡動畫，只需要兩個關鍵幀：一個是開始幀，一個是結束幀。在起始關鍵幀和結束關鍵幀之間的變化由Flash計算，不需要附加關鍵幀。
● 普通幀
普通幀也稱為靜態幀，顯示同一層上最後一個關鍵幀的內容。在時間軸上，關鍵幀必須總是在普通幀的前面。前置關鍵幀的內容顯示在隨後的每個普通幀中，直到到達另一個關鍵幀為止。
用戶希望在動畫中始終保持可見的背景圖像就是一個很好的例子，可以說明在哪裡使用普通幀。將背景放在時間軸開始處的關鍵幀上，在其後放上所需數量的普通幀以延長電影的時間。將背景添加到電影的frame l上，但是不在後面加上普通幀，那麼，背景將僅在frame l里可見。在已填充的關鍵幀後面的普通幀為銀灰色，在空關鍵幀後的普通幀為白色。
● 過渡幀
過渡幀包含了一系列幀，其中至少有兩個關鍵幀： 一個決定對象在起始點的外觀，另一個決定對象在終止點的外觀，而在這之間可以有任意多的過渡幀。在兩個關鍵幀之間的幀表示了對象在過渡點的外觀。
利用Flash可以處理兩種類型的過渡：運動過渡和形狀過渡。利用運動過渡來處理動畫中的符號、群組或文本框的尺寸、位置、旋轉等；利用形狀過渡將一個簡單形狀變形，形狀過渡僅僅對場景級對象有效，對符號或群組無效。如果在形狀過渡中使用文字，首先需將文本分解。一個場景中多個對象的同時運動過渡需要為每個過渡使用一層。不能同時為同一層上的單獨對象設置運動過渡。但是，用戶可以同時在不同層上為它們設置過渡。
運動過渡幀至少需要用兩個關鍵幀來標識，這兩個關鍵幀被帶有一個黑箭頭和淺藍背景的中間過渡幀分開；形狀過渡幀至少需要用兩個關鍵幀來標識，它們被帶有一個黑箭頭和淺綠背景的中間過渡幀分開；有問題的過渡幀，例如丟失的關鍵幀，需要用虛線來標識。
轉----回答者： zhangnuo2004 | 六級
6. 在動畫製作中，如何理解「幀」這個概念啊
幀就是每秒的圖片數.比如你做一個動畫.肯定是一張圖片一張圖片的連起來的啊. 比如24幀/秒.就是說把一秒分成了24張圖片.幀數越高說明畫面越流暢.. 就像電影一樣.和拍照是一樣的.把你一秒的動作分成幾十張照片再連起來就形成了動的效果.
記得採納啊
7. 前端（過渡動畫）
css3 新增的有：過度動畫陰影，圓角
transition：width（寬度產生動畫）
1 在哪產生動畫
2 動畫消耗的時間
3 運動曲線
4 延長多長時間才開始執行動畫，（不寫就不執行）規定過度效果的曲線，默認是ease，多個用，（逗號）隔開，過度屬性：transition
圓角： border - radius，如果不想寫那麼多的話就用
transition：all is ease
transition：all is linear 勻速
transition：all is ease 開始和結束 慢速 中間加速
transition ：all is ease - in . 開始的時候慢，越來越快，然後停止；
transition : all is ease - out . 開始時快，越來越慢，然後停止；
transition : al is ease-in -out .開始和結束時慢速
如果子元素超出父元素時 : overflow : hidden;
rgba(0 ,0, 0,0.5 );半透明；
line-height 行高；margin : 20px,間距20px,info信息
tansfrom 變形
1.位移 ， 2.縮放 ， 3.旋轉 ， 4.斜切 ，
1.位移 transition(50px，50px) 水平和垂直；
是不會影響文檔流的 ，自己動 不會影響下邊的；
2.旋轉 transition:rotate（30deg）沿著z 軸旋轉 ；
3.縮放 transitiion ：scale(0.5,0.2) 寬度 高度；
4.斜切 transition : skew(0,45deg ) x軸不動，y軸斜切45度；水平和垂直；
margin : 50px(上邊距) auto 0;
元素旋轉
transfrom : rotate(45deg) 默認是沿著z軸旋轉；
transfrom : perspective(800px ) rotate(45deg)
perspective 設置透視距離，經驗數 800px ，比較符合人眼的透視距離；
transfrom -style ： perseve-3d ,設置盒子按3d空間顯示；
變形中間點
div : nthchild{} ;第幾個孩子；
transfrom-origin:left center, 設置變形的中心點 (左中)；
transfrom-origin:left top,設置變形的中心點 (左上)；
背面可見
margin : 上，右，下，左，
如果不想變的話 加過度 transfom:all 500ms ease;
800是經驗值 起始角度 rotatey (0deg);
有透視效果 transfrom -style : preserve -3d;
設置盒子背面是否可見
backface - visibity : hidden; 背面不可見 （隱藏不可見）；
圖片翻面時另一張圖片
animation 動畫
多個設置用空格隔開；
animation : moving 1s ease(運動曲線) 1s(延遲) 5(動的次數 ) alternat(是否返回)
alternate 設置是否返回；
infinite 不限次數；
動畫運歲動的狀態 ： 暫停 animation-play-state : paused;
動畫運動的狀態 ： 運行 animation-play-state : running;
forwards 動畫結束最後狀態；
both 都 起始和結束都設置；
@keyframes 創建關鍵動畫時；聲明一個動畫，給他後面隨便起一個名字；
動畫一個狀態到另一個狀態；
隱藏 overflow : hidden;
相對定位 ：position : relative;
絕對定位 : positiion : absolute;
動畫定義的關鍵字:
@keyframes 名字{ 起始狀態 from [ left 0px]
終止狀態 to [ left 0px,]}
from 開始 ，to 結束；
循環一直走 ：infinte ;
transfrom : scaley;
多幀動畫
位移動畫 transfrom : tanslateY(Y軸) 10px;
圓角 border - ralios : 50px;
原路返回 ： alternate;
縮放 transfrom : scale(0.5 0.5)
box-shadow : 17px(X軸) 13px（Y軸）12px(羽化) 14px(擴展) p
8. 逐幀動畫和補間動畫各自的優缺點
首先你要知道動畫流程，然後再按需求來選。
這里以動畫片為例。一般是繪制線稿導入電腦清稿，再用動畫軟體製作。
再以前一直是按照導入的關鍵幀來繪制補間幀。
各公司就想把補間給搞的好點，自動化，但是- -，失敗了，微軟是設置自動補間AI，說真的很方便，但是得不到認可，因為太過機械，2D的這種補間還不如直接3D搞然後2D輸出。
至於ADOBE也是如此，元件補間，圖形補間，骨骼動畫，ADOBE補間，都無法達到2D動畫要求。
相對的日系動畫軟體比較乾脆，直接不搞補間，轉門去搞關鍵幀的畫面優化，補間全靠繪制，所以日系的動畫軟體都很小。上手也容易當然前提是能畫的好。
同樣動畫流程里，要做動畫片還是要全靠畫，也就是你說的逐幀動畫，一般是繪制關鍵幀，最好的形式是在紙上畫只畫線稿，然後用掃描儀或手機拍照（用手機架或者板凳等固定拍照），然後用PS處理，調整色階調整對比度，讓畫面干凈線條清晰（這個可以PS錄製成腳本，以後直接執行腳本就可以批量處理不用自己1張張搞），然後導入動畫軟體，看你說的應該是FLASH類似，所以我以FLASH來說，導入圖片後選點陣圖轉矢量，然後刪除白色，然後點平滑，來平滑線條，顏色選黑色，這樣線稿就出來了。然後用紅藍綠的線條（鉛筆工具）畫出高光陰影和要封閉的線。處理好關鍵幀後，用洋蔥皮按鈕開參考模式，把2個關鍵幀中間的動作畫出來，同樣是線稿，也是要紅藍綠線。畫完後，用顏色上色，顏色是純色，這個一般是先做人設，用人設的配色來，可以把顏色都點到單獨一層，吸管吸取上色。最後全選，再點刪除線條，這樣紅藍綠線就沒了。動畫也就完成了。
而在網頁動畫里，很多都不需要自然和藝術，所以機械形式就可以，一般選用，影片剪輯，這個主要是因為網頁屬於前端，影片剪輯可以用代碼控制，一般每個部件需要單獨分層轉為元件，在動畫流程里很繁瑣，但是對於不針對藝術也不能繪畫的人來說還是很方便。
總的來說，逐幀是萬能的可以很好的對畫面控制，技術嫻熟的可以很快製作，並且動作自然。而影片剪輯的補間，只能固定的放大縮小旋轉移動等，適合對畫面不需要太多追求，追求快速製作的人。
9. Canvas 全是幀動畫嗎，有沒有沒有像CSS3那種緩動動畫
1，對前端來說簡單易用；
2，聲明式的動畫，瀏覽器內核更容易進行優化，也避免了 JavaScript 的低性能和性能波動（GC或者JIT導致的停頓）導致掉幀；
3，部分加速的CSS動畫（Transform & Opacity）可以完全由內核的合成器驅動，完全使用GPU加速，對CPU的開銷很小；
4，隨著內核合成器的持續演進，可加速的CSS動畫有望越來越多；
10. 在Flash中，動畫類型主要包括哪兩種其特點是什麼
在Flash中，動畫類型主要包括補間動畫跟逐幀動畫。
補間動畫需要在兩個關鍵幀中間需要做「補間動畫」，才能實現圖畫的運動；插入補間動畫後兩個關鍵幀之間的插補幀是由計算機自動運算而得到的。
逐幀動畫是在「連續的關鍵幀」中分解動畫動作，也就是在時間軸的每幀上逐幀繪制不同的內容，使其連續播放而成動畫。
Flash是美國的MACROMEDIA公司於1999年6月推出的優秀網頁動畫設計軟體。它是一種互動式動畫設計工具，用它可以將音樂，聲效，動畫以及富有新意的界面融合在一起，以製作出高品質的網頁動態效果。
Flash動畫涉及領域：
一、手機領域的開發
轉向手機領域的開發將會要求你對精確的界面設計和CPU的使用分布的操控能力更高。但也意味更大更廣泛的使用空間。事實上手機和Pocket PC的分界已越來越不明顯，你必須為每一款手機設計一個不同的界面，因為它們的屏幕大小各有不同。
二、游戲開發
事實上，Flash中的游戲開發已經進行了多年的嘗試。但至今為止仍然停留在中、小型游戲的開發上。游戲開發的很大一部份都受限於它的CPU能力和大量代碼的管理。不過可喜的是，Flash Player 7 運行時性能提高了 2 至 5 倍；而且基於 Java 類的結構的類的開始也奠定了這些基礎。
三、Web應用服務
很難界定Web應用服務的范圍究竟有多大。似乎它擁有無限的可能。隨著網路的逐漸滲透，基於客戶端-伺服器的應用設計也開始逐漸受到歡迎，並且一度被譽為最具前景的方式。這種方式你可能要花更多的時間在伺服器的後台處理能力和架構上，並且將它們與前台保持同步。
以上內容參考網路-補間動畫
以上內容參考網路-逐幀動畫
以上內容參考網路-Flash動畫