一、3d模型動畫基本原理和分類
1、3d模型動畫的基本原理是讓模型中各頂點的位置隨時間變化。
2、主要種類有morph（變形）動畫，關節動畫和骨骼蒙皮動畫(skinnedmesh)。
從動畫資料的角度來說，三者一般都採用關鍵幀技術，即只給出關鍵幀的資料，其他幀的資料使用插值得到。但由於這三種技術的不同，關鍵幀的資料是不一樣的。
二、每種動畫的簡介
1、morph（漸變，變形）動畫是直接指定動畫每一幀的頂點位置，其動畫關鍵中儲存的是mesh所有頂點在關鍵幀對應時刻的位置。
2、關節動畫的模型不是乙個整體的mesh,而是分成很多部分(mesh)，通過乙個父子層次結構將這些分散的mesh組織在一起，父mesh帶動其下子mesh的運動，各mesh中的頂點座標定義在自己的座標系中，這樣各個mesh是作為乙個整體參與運動的。動畫幀中設定各子mesh相對於其父mesh的變換（主要是旋轉，當然也可包括移動和縮放），通過子到父，一級級的變換累加（當然從技術上，如果是矩陣操作是累乘）得到該mesh在整個動畫模型所在的座標空間中的變換（從本文的視角來說就是世界座標系了，下同），從而確定每個mesh在世界座標系中的位置和方向，然後以mesh為單位渲染即可。關節動畫的問題是，各部分mesh中的頂點是固定在其mesh座標系中的，這樣在兩個mesh結合處就可能產生裂縫。
3、骨骼蒙皮動畫即skinnedmesh了，骨骼蒙皮動畫的出現解決了關節動畫的裂縫問題，而且效果非常酷，發明這個演算法的人一定是個天才，因為skinnedmesh的原理簡單的難以置信，而效果卻那麼好。骨骼動畫的基本原理可概括為：在骨骼控制下，通過頂點混合動態計算蒙皮網格的頂點，而骨骼的運動相對於其父骨骼，並由動畫關鍵幀資料驅動。乙個骨骼動畫通常包括骨骼層次結構資料，網格(mesh)資料，網格蒙皮資料(skin info)和骨骼的動畫(關鍵幀)資料。下面將具體分析。
三、skinnedmesh和關節動畫的不同
skinnedmesh中文一般稱作骨骼蒙皮動畫，正如其名，這種動畫中包含骨骼（bone）和蒙皮(skinned mesh)兩個部分，bone的層次結構和關節動畫類似，mesh則和關節動畫不同；關節動畫中是使用多個分散的mesh,而skinned mesh中mesh是乙個整體，也就是說只有乙個mesh,實際上如果沒有骨骼讓mesh運動變形，mesh就和靜態模型一樣了。
四、skinned mesh原理結構分析
skinned mesh技術的精華在於蒙皮，所謂的皮並不是模型的貼圖（也許會有人這麼想過吧），而是mesh本身，蒙皮是指將mesh中的頂點附著（繫結）在骨骼之上，而且每個頂點可以被多個骨骼所控制，這樣在關節處的頂點由於同時受到父子骨骼的拉扯而改變位置就消除了裂縫。skinned mesh這個詞從字面上理解似乎是有皮的模型，哦，如果貼圖是皮，那麼普通靜態模型不也都有嗎？所以我覺得應該理解為具有蒙皮資訊的mesh或可當做**用的mesh，這個**就是mesh。而為了有**功能，mesh還需要蒙皮資訊，即skin資料，沒有skin資料就是乙個普通的靜態mesh了。skin資料決定頂點如何繫結到骨骼上。頂點的skin資料報括頂點受哪些骨骼影響以及這些骨骼影響該頂點時的權重(weight)，另外對於每塊骨骼還需要骨骼偏移矩陣(boneoffsetmatrix)用來將頂點從mesh空間變換到骨骼空間。在本文中，提到骨骼動畫中的mesh特指這個**mesh，提到模型是指骨骼動畫模型整體。骨骼控制蒙皮運動，而骨骼本身的運動呢？當然是動畫資料了。每個關鍵幀中包含時間和骨骼運動資訊，運動資訊可以用乙個矩陣直接表示骨骼新的變換，也可用四元數表示骨骼的旋轉，也可以隨便自己定義什麼只要能讓骨骼動就行。除了使用編輯設定好的動畫幀資料，也可以使用物理計算對骨骼進行實時控制。
「參考copperdong 的部落格
CSS按鈕動畫 一
在前端的開發中，我們都會用到很多種動畫，按鈕動畫就是最基礎和最簡單的一種了。例如像下面這種按鈕的動畫效果該怎麼實現呢？我們分析一下，其實無非就是滑鼠移入和滑鼠移走的css的樣式 廢話不多說，咱們直接上 就完了 hello world class btn btn btn after 2.class b...
技術大佬論壇 技術美術之啟程
從2k18到2k20這三年一瞬即逝，在即將迎來ps5的時候，非常榮幸能加入sony,戰神工作室。離開visual concept是個很艱難的決定，工作室有著許多業界老兵，伴隨著2k系列一步一步走到了今天，我從他們身上學到了很多，無論是在技術上，管理上還是遊戲開發的思路上。這三作結束後，深深感覺自己已...
css 動畫（一）transform 變形
前言 這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！translate 位置平移 rotate 旋轉 scale 縮放 設定轉換元素的基準點，然後元素的變形就圍繞這個點展開 設定元素及其子元素怎樣在三維空間中展示 設定元素距離檢視的距離，設定視點 設定當元素不...