第一章 新媒體動(dòng)態(tài)設(shè)計(jì)概述 001
第一節(jié) 動(dòng)態(tài)設(shè)計(jì)的發(fā)展歷程 002
一、動(dòng)態(tài)設(shè)計(jì)的起源 002
二、動(dòng)畫(huà)產(chǎn)業(yè)的崛起 002
三、動(dòng)態(tài)設(shè)計(jì)的初步探索 003
四、移動(dòng)設(shè)備和應(yīng)用的崛起 003
五、動(dòng)態(tài)設(shè)計(jì)的挑戰(zhàn)和前景 003
第二節(jié) 動(dòng)態(tài)設(shè)計(jì)的基本概念 004
一、什么是動(dòng)態(tài)設(shè)計(jì) 004
二、動(dòng)態(tài)設(shè)計(jì)在新媒體中的應(yīng)用 005
三、基本動(dòng)畫(huà)技巧 006
第三節(jié) 新媒體動(dòng)態(tài)設(shè)計(jì)的優(yōu)勢(shì)和應(yīng)用 008
一、新媒體動(dòng)態(tài)設(shè)計(jì)的特點(diǎn) 009
二、新媒體動(dòng)態(tài)設(shè)計(jì)的優(yōu)勢(shì) 009
三、新媒體動(dòng)態(tài)設(shè)計(jì)的應(yīng)用 009
四、新媒體動(dòng)態(tài)設(shè)計(jì)的設(shè)計(jì)要點(diǎn) 010
第四節(jié) 動(dòng)態(tài)設(shè)計(jì)的設(shè)計(jì)元素和設(shè)計(jì)原則 010
一、設(shè)計(jì)元素 011
二、設(shè)計(jì)原則 011
三、迪士尼動(dòng)畫(huà)的十二原則 012
第五節(jié) 常見(jiàn)動(dòng)態(tài)設(shè)計(jì)軟件和工具 016
一、二維動(dòng)畫(huà)軟件 017
二、三維動(dòng)畫(huà)軟件 018
第六節(jié) 新媒體動(dòng)態(tài)設(shè)計(jì)的發(fā)展趨勢(shì)和前景展望 019
一、技術(shù)驅(qū)動(dòng)的創(chuàng)新 020
二、用戶體驗(yàn)的重塑 020
三、跨媒體融合與互聯(lián)性 020
四、數(shù)據(jù)驅(qū)動(dòng) 020
五、設(shè)計(jì)倫理與社會(huì)責(zé)任 021
六、可持續(xù)性設(shè)計(jì) 021

第二章 新媒體動(dòng)態(tài)設(shè)計(jì)的創(chuàng)意構(gòu)思 023
第一節(jié) 創(chuàng)意構(gòu)思的流程和方法 024
一、常見(jiàn)的創(chuàng)意構(gòu)思流程 024
二、 動(dòng)態(tài)設(shè)計(jì)創(chuàng)意構(gòu)思方法 025
第二節(jié) 設(shè)計(jì)思維的應(yīng)用 026
一、用戶觀察與人性化設(shè)計(jì) 026
二、問(wèn)題定義與原型測(cè)試 026
三、創(chuàng)新與品牌差異化 027
四、敏捷設(shè)計(jì)和快速迭代 027
五、跨學(xué)科合作 028
第三節(jié) 創(chuàng)意構(gòu)思的案例分析 028
一、常見(jiàn)的網(wǎng)站動(dòng)態(tài)設(shè)計(jì)的創(chuàng)意應(yīng)用 028
二、可視化數(shù)據(jù) 029
三、交互游戲 030
四、藝術(shù)品展示 030
五、品牌與產(chǎn)品宣傳 031

第三章 新媒體動(dòng)態(tài)設(shè)計(jì)的實(shí)現(xiàn)方法 033
第一節(jié) HTML 基礎(chǔ)與動(dòng)態(tài)設(shè)計(jì)準(zhǔn)備 034
一、HTML 簡(jiǎn)介 034
二、HTML 的基礎(chǔ)結(jié)構(gòu) 034
三、常用HTML 元素簡(jiǎn)介 035
四、CSS 和JavaScript 與HTML 的互動(dòng) 036
五、HTML5 新特性與動(dòng)態(tài)設(shè)計(jì) 036
六、開(kāi)發(fā)者工具與動(dòng)態(tài)設(shè)計(jì) 036
第二節(jié) 使用JavaScript 制作動(dòng)畫(huà) 037
一、JavaScript 及其在動(dòng)畫(huà)制作中的角色 037
二、JavaScript 的基礎(chǔ)知識(shí) 037
三、使用JavaScript 進(jìn)行DOM 操作 039
四、使用JavaScript 創(chuàng)建動(dòng)畫(huà) 040
五、實(shí)戰(zhàn)：使用JavaScript 制作一個(gè)簡(jiǎn)單的動(dòng)畫(huà) 042
六、JavaScript 動(dòng)畫(huà)的優(yōu)化 043
七、JavaScript 動(dòng)畫(huà)庫(kù) 044
第三節(jié) 使用CSS 制作動(dòng)畫(huà) 046
一、CSS 及其在動(dòng)畫(huà)制作中的角色 046
二、CSS 基礎(chǔ)知識(shí) 046
三、初識(shí)CSS 動(dòng)畫(huà) 047
四、深入理解CSS transition 049
五、深入理解CSS animation 051
六、CSS 動(dòng)畫(huà)的優(yōu)化 052
七、CSS 動(dòng)畫(huà)庫(kù) 053
第四節(jié) 使用動(dòng)態(tài)設(shè)計(jì)軟件實(shí)現(xiàn)動(dòng)態(tài)效果　　 055
一、 動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)工具概述 055
二、 Adobe Dreamweaver：綜合網(wǎng)頁(yè)設(shè)計(jì)工具 056
三、 Adobe XD：從靜態(tài)到動(dòng)態(tài) 057
四、 Webflow：無(wú)代碼網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì) 058
五、 跨平臺(tái)設(shè)計(jì)工具 059

第四章 動(dòng)態(tài)設(shè)計(jì)在新媒體中的應(yīng)用 061
第一節(jié) 動(dòng)態(tài)設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用 062
一、動(dòng)畫(huà)效果 062
二、頁(yè)面轉(zhuǎn)場(chǎng)效果 066
第二節(jié) 動(dòng)態(tài)設(shè)計(jì)在APP 設(shè)計(jì)中的應(yīng)用 067
一、交互性元素 067
二、動(dòng)態(tài)過(guò)渡效果 068
三、動(dòng)態(tài)加載 069
四、導(dǎo)航菜單 071
五、數(shù)據(jù)可視化 074
第三節(jié) 動(dòng)態(tài)設(shè)計(jì)在品牌形象設(shè)計(jì)中的應(yīng)用 075
一、動(dòng)態(tài)品牌標(biāo)志 075
二、動(dòng)態(tài)字體設(shè)計(jì) 076
三、動(dòng)畫(huà)包裝設(shè)計(jì) 076
四、動(dòng)態(tài)廣告設(shè)計(jì) 077
五、品牌的動(dòng)態(tài)社交媒體營(yíng)銷(xiāo) 077
六、虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí)體驗(yàn) 078

第五章 新媒體動(dòng)態(tài)設(shè)計(jì)的優(yōu)化和測(cè)試 081
第一節(jié) 動(dòng)態(tài)設(shè)計(jì)的優(yōu)化方法 082
一、硬件、軟件的優(yōu)化 082
二、關(guān)鍵幀動(dòng)畫(huà)優(yōu)化 082
三、動(dòng)畫(huà)合并 083
四、減少細(xì)節(jié) 084
五、素材優(yōu)化 085
六、預(yù)渲染和緩存 085
七、層次化動(dòng)畫(huà) 086
八、質(zhì)量和性能平衡 087
第二節(jié) 動(dòng)態(tài)設(shè)計(jì)的測(cè)試方法 087
一、觀察與分析 087
二、動(dòng)作演繹 087
三、遵循動(dòng)畫(huà)法則 088
四、用戶反饋與用戶交互 088
五、原型測(cè)試 089
六、提供優(yōu)雅降級(jí)方案 089
七、專(zhuān)家評(píng)審 089
第三節(jié) 動(dòng)態(tài)設(shè)計(jì)的調(diào)整和改進(jìn) 089
一、姿勢(shì)和動(dòng)作的流暢性 089
二、時(shí)間和節(jié)奏 091
三、表情和姿態(tài) 092
四、造型優(yōu)化 094
五、特效和粒子效果 095
六、反饋和迭代 095

第六章 新媒體動(dòng)態(tài)設(shè)計(jì)案例分析 097
第一節(jié) 網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)案例 098
一、菜單導(dǎo)航 098
二、頁(yè)腳設(shè)計(jì) 101
三、鼠標(biāo)懸停 103
四、加載 105
第二節(jié) APP 動(dòng)態(tài)設(shè)計(jì)案例 106
一、視覺(jué)反饋 106
二、按鈕點(diǎn)擊反饋 107
三、菜單展開(kāi)和折疊 107
四、元素視覺(jué)引導(dǎo) 108
五、系統(tǒng)狀態(tài) 109
六、有趣的動(dòng)效 109
第三節(jié) 品牌形象動(dòng)態(tài)設(shè)計(jì)案例 110
一、標(biāo)志設(shè)計(jì)的動(dòng)態(tài)化 110
二、海報(bào)設(shè)計(jì)的動(dòng)態(tài)化 112
三、表現(xiàn)形式的動(dòng)態(tài)化 115
四、未來(lái)趨勢(shì)與挑戰(zhàn) 119

第七章 新媒體動(dòng)態(tài)設(shè)計(jì)進(jìn)階技巧 121
第一節(jié) 利用SVG 實(shí)現(xiàn)動(dòng)態(tài)效果 122
一、SVG 入門(mén) 122
二、掌握SVG 基礎(chǔ) 122
三、SVG 顏色和樣式 123
四、SVG 變換和動(dòng)畫(huà) 124
五、SVG 天氣圖標(biāo)項(xiàng)目實(shí)戰(zhàn) 126
第二節(jié) 利用Canvas 實(shí)現(xiàn)動(dòng)態(tài)效果 127
一、Canvas 入門(mén) 127
二、掌握Canvas 基礎(chǔ) 128
三、Canvas 顏色和樣式 131
四、Canvas 圖形變換 131
五、Canvas 事件和交互 132
六、Canvas 像素操作和性能優(yōu)化 132
七、Canvas 項(xiàng)目實(shí)戰(zhàn) 134
第三節(jié) 利用WebGL 實(shí)現(xiàn)動(dòng)態(tài)效果 136
一、WebGL 簡(jiǎn)介 136
二、WebGL 環(huán)境和基本語(yǔ)法 136
三、WebGL 圖形渲染基礎(chǔ) 139
四、WebGL 坐標(biāo)系統(tǒng)和變換 139
五、WebGL 光照 143
六、WebGL 動(dòng)畫(huà)和交互 148
七、 WebGL 性能優(yōu)化 150

參考文獻(xiàn) 152