本書根據(jù)藝術(shù)設(shè)計(jì)專業(yè)應(yīng)用型人才培養(yǎng)目標(biāo)的要求編寫，包括新媒體動(dòng)態(tài)設(shè)計(jì)概述、動(dòng)態(tài)設(shè)計(jì)的創(chuàng)意構(gòu)思、動(dòng)態(tài)設(shè)計(jì)的實(shí)現(xiàn)方法、動(dòng)態(tài)設(shè)計(jì)在新媒體中的應(yīng)用、動(dòng)態(tài)設(shè)計(jì)的優(yōu)化和測試、新媒體動(dòng)態(tài)設(shè)計(jì)案例分析、動(dòng)態(tài)設(shè)計(jì)進(jìn)階技巧。本書注重培養(yǎng)讀者的動(dòng)態(tài)設(shè)計(jì)思維和實(shí)現(xiàn)動(dòng)態(tài)效果的能力，引用分析了大量專業(yè)教學(xué)成果以及相關(guān)行業(yè)優(yōu)秀案例，以幫助讀者了解新媒體動(dòng)態(tài)設(shè)計(jì)領(lǐng)域的發(fā)展歷史、發(fā)展前沿以及創(chuàng)作流程，進(jìn)而展現(xiàn)出新媒體動(dòng)態(tài)設(shè)計(jì)的輪廓概貌。
本書適合作為高等院校和職業(yè)院校設(shè)計(jì)相關(guān)專業(yè)教材，也可以作為該領(lǐng)域的從業(yè)者和愛好者的參考用書。

王毅，魯美傳媒動(dòng)畫學(xué)院，副教授，藝術(shù)與科技專業(yè)學(xué)科帶頭人，負(fù)責(zé)實(shí)驗(yàn)及本科教學(xué)工作。負(fù)責(zé)的相關(guān)課程有：計(jì)算基礎(chǔ)、數(shù)字動(dòng)態(tài)設(shè)計(jì)基礎(chǔ)、自媒體動(dòng)畫設(shè)計(jì)、動(dòng)畫短片設(shè)計(jì)。

本書內(nèi)容包括動(dòng)態(tài)設(shè)計(jì)的概念、原理、技術(shù)、應(yīng)用等方面，通過案例分析和實(shí)踐操作，幫助讀者掌握動(dòng)態(tài)設(shè)計(jì)的基本原理和技術(shù)，培養(yǎng)其動(dòng)態(tài)設(shè)計(jì)的創(chuàng)意思維和實(shí)踐能力。

隨著信息時(shí)代的快速發(fā)展，新媒體已成為人們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠帧Ｋ云淇旖?、直觀的特性，極大地改變了人們獲取、交流信息的方式。在這個(gè)數(shù)字化的時(shí)代，媒體不再是靜止的文字或圖片，而是呈現(xiàn)出豐富多彩、生動(dòng)活潑的動(dòng)態(tài)內(nèi)容。
新媒體動(dòng)態(tài)設(shè)計(jì)是對(duì)傳統(tǒng)靜態(tài)設(shè)計(jì)的延伸和拓展。在數(shù)字化媒體環(huán)境下，通過運(yùn)用各種技術(shù)手段和創(chuàng)意理念，引入動(dòng)態(tài)元素，創(chuàng)造出具有運(yùn)動(dòng)、變化和互動(dòng)特性的多媒體內(nèi)容，使信息呈現(xiàn)更加生動(dòng)豐富，吸引用戶的注意力，提升用戶體驗(yàn)。
本書首先介紹了新媒體動(dòng)態(tài)設(shè)計(jì)的基本概念和歷史發(fā)展，讓讀者對(duì)動(dòng)態(tài)設(shè)計(jì)有一個(gè)清晰的認(rèn)識(shí)。本書重點(diǎn)介紹了各類動(dòng)畫制作工具的基本操作和應(yīng)用，包括但不限于運(yùn)用JavaScript、CSS 制作動(dòng)態(tài)效果等，幫助讀者熟練運(yùn)用這些工具進(jìn)行動(dòng)態(tài)設(shè)計(jì)；討論了動(dòng)態(tài)設(shè)計(jì)中常用的交互設(shè)計(jì)原則，幫助讀者理解如何將動(dòng)態(tài)設(shè)計(jì)與用戶體驗(yàn)相結(jié)合，提升產(chǎn)品的互動(dòng)性和吸引力。同時(shí)通過豐富的實(shí)例，展示了動(dòng)態(tài)設(shè)計(jì)在不同領(lǐng)域的應(yīng)用，涵蓋網(wǎng)頁設(shè)計(jì)、移動(dòng)應(yīng)用、廣告宣傳等多個(gè)方面，希望能夠引導(dǎo)讀者通過實(shí)際項(xiàng)目的練習(xí)，將所學(xué)知識(shí)應(yīng)用于實(shí)踐中，從而鞏固所學(xué)并提升動(dòng)態(tài)設(shè)計(jì)的實(shí)際操作能力。本書旨在為廣大讀者提供一個(gè)全面而系統(tǒng)的指導(dǎo)，幫助他們掌握新媒體動(dòng)態(tài)設(shè)計(jì)的基本原理、技術(shù)方法以及創(chuàng)意實(shí)踐。通過本書的學(xué)習(xí)，讀者能夠了解動(dòng)態(tài)設(shè)計(jì)的基本概念，掌握各類動(dòng)畫制作工具的使用，以及在實(shí)際項(xiàng)目中運(yùn)用動(dòng)態(tài)設(shè)計(jì)的技巧。
本書由王毅、張彬彬主編，龐聰、金曉依為副主編，參與編寫的人員還有宗誠、楊步凡、崔哲航、李江、陳逸凡、李樂。希望本書能夠成為廣大讀者學(xué)習(xí)和掌握新媒體動(dòng)態(tài)設(shè)計(jì)的有力工具，同時(shí)也希望讀者在學(xué)習(xí)的過程中能夠發(fā)揮自己的創(chuàng)造力和想象力，為新媒體設(shè)計(jì)的未來做出積極的貢獻(xiàn)。

編者
2024年1月

第一章 新媒體動(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)畫產(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)畫技巧 006
第三節(jié) 新媒體動(dòng)態(tài)設(shè)計(jì)的優(yōu)勢和應(yīng)用 008
一、新媒體動(dòng)態(tài)設(shè)計(jì)的特點(diǎn) 009
二、新媒體動(dòng)態(tài)設(shè)計(jì)的優(yōu)勢 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)畫的十二原則 012
第五節(jié) 常見動(dòng)態(tài)設(shè)計(jì)軟件和工具 016
一、二維動(dòng)畫軟件 017
二、三維動(dòng)畫軟件 018
第六節(jié) 新媒體動(dòng)態(tài)設(shè)計(jì)的發(fā)展趨勢和前景展望 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
一、常見的創(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
二、問題定義與原型測試 026
三、創(chuàng)新與品牌差異化 027
四、敏捷設(shè)計(jì)和快速迭代 027
五、跨學(xué)科合作 028
第三節(jié) 創(chuàng)意構(gòu)思的案例分析 028
一、常見的網(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 簡介 034
二、HTML 的基礎(chǔ)結(jié)構(gòu) 034
三、常用HTML 元素簡介 035
四、CSS 和JavaScript 與HTML 的互動(dòng) 036
五、HTML5 新特性與動(dòng)態(tài)設(shè)計(jì) 036
六、開發(fā)者工具與動(dòng)態(tài)設(shè)計(jì) 036
第二節(jié) 使用JavaScript 制作動(dòng)畫 037
一、JavaScript 及其在動(dòng)畫制作中的角色 037
二、JavaScript 的基礎(chǔ)知識(shí) 037
三、使用JavaScript 進(jìn)行DOM 操作 039
四、使用JavaScript 創(chuàng)建動(dòng)畫 040
五、實(shí)戰(zhàn)：使用JavaScript 制作一個(gè)簡單的動(dòng)畫 042
六、JavaScript 動(dòng)畫的優(yōu)化 043
七、JavaScript 動(dòng)畫庫 044
第三節(jié) 使用CSS 制作動(dòng)畫 046
一、CSS 及其在動(dòng)畫制作中的角色 046
二、CSS 基礎(chǔ)知識(shí) 046
三、初識(shí)CSS 動(dòng)畫 047
四、深入理解CSS transition 049
五、深入理解CSS animation 051
六、CSS 動(dòng)畫的優(yōu)化 052
七、CSS 動(dòng)畫庫 053
第四節(jié) 使用動(dòng)態(tài)設(shè)計(jì)軟件實(shí)現(xiàn)動(dòng)態(tài)效果  055
一、 動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)工具概述 055
二、 Adobe Dreamweaver：綜合網(wǎng)頁設(shè)計(jì)工具 056
三、 Adobe XD：從靜態(tài)到動(dòng)態(tài) 057
四、 Webflow：無代碼網(wǎng)頁動(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)頁設(shè)計(jì)中的應(yīng)用 062
一、動(dòng)畫效果 062
二、頁面轉(zhuǎn)場效果 066
第二節(jié) 動(dòng)態(tài)設(shè)計(jì)在APP 設(shè)計(jì)中的應(yīng)用 067
一、交互性元素 067
二、動(dòng)態(tài)過渡效果 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)畫包裝設(shè)計(jì) 076
四、動(dòng)態(tài)廣告設(shè)計(jì) 077
五、品牌的動(dòng)態(tài)社交媒體營銷 077
六、虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí)體驗(yàn) 078

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

第六章 新媒體動(dòng)態(tài)設(shè)計(jì)案例分析 097
第一節(jié) 網(wǎng)頁動(dòng)態(tài)設(shè)計(jì)案例 098
一、菜單導(dǎo)航 098
二、頁腳設(shè)計(jì) 101
三、鼠標(biāo)懸停 103
四、加載 105
第二節(jié) APP 動(dòng)態(tài)設(shè)計(jì)案例 106
一、視覺反饋 106
二、按鈕點(diǎn)擊反饋 107
三、菜單展開和折疊 107
四、元素視覺引導(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
四、未來趨勢與挑戰(zhàn) 119

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

參考文獻(xiàn) 152