CC_Sprite 面向的主要用戶群體
CC_Sprite 主要面向：
- 沒有ps恋日、美術(shù)基礎(chǔ)又想做小動(dòng)畫淘这、小游戲的iOS開發(fā)。
- 你不想學(xué)習(xí)ps或其他動(dòng)畫軟件宜鸯，也不想安裝其他軟件腾供，你只想做一個(gè)單純的仆邓、天真的iOS開發(fā)鲜滩。
- 你能接受雖然沒有商業(yè)級(jí)的動(dòng)畫那么強(qiáng)大，但能表現(xiàn)一些常規(guī)動(dòng)作的火柴人動(dòng)畫宏赘。（如果你足夠耐心绒北，將各個(gè)模塊細(xì)節(jié)拆分配上不同配色，也是可以做出精致的矢量動(dòng)畫的）
那么你可以嘗試使用一下簡單的 CC_Sprite
示例
通過示例簡單看一下精靈的動(dòng)作效果：
我們可以看下一些我做的精靈模型（等后面有空察署，我會(huì)自己設(shè)計(jì)一個(gè)比較細(xì)節(jié)的英雄模型來看它能達(dá)到的效果）闷游，這些開放出來可以隨意使用，也可以在此基礎(chǔ)上修改贴汪。一起共享你制作的精靈吧：
以上效果用到的代碼為：
CC_Sprite *sp1=[[CC_Sprite alloc]initOn:self.view withFilePath:fileName scaleSize:0.4 speedRate:1];//初始化
[sp1 updatePosition:CGPointMake(self.view.center.x-100, self.view.center.y)];//調(diào)整位置
[sp1 updateColors:@{@"arm":[UIColor yellowColor]}];//更新部位顏色
[sp1 playAction:@"atk" times:1 block:^(NSString * _Nonnull state, CC_Sprite * _Nonnull sprite) {
}];//播放動(dòng)作
使用
安裝工具庫
Podfile
To integrate bench_ios into your Xcode project using CocoaPods, specify it in your Podfile:
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
target 'TargetName' do
pod 'bench_ios'
end
Then, run the following command:
$ pod install
========
精靈文件還沒有制作庫脐往，可以拷貝以下文件到目錄中：
如果使用 CC_Sprite 需要文件：
- CC_Sprite.h、CC_Sprite.m
- CC_SpriteItem.h扳埂、CC_SpriteItem.m
如果制作 CC_Sprite 模型业簿，需要文件：
- CC_SpriteMakerVC.h、CC_SpriteMakerVC.m
- CC_SpriteMaker.h阳懂、CC_SpriteMaker.m
- CC_SpriteBaseView.h梅尤、CC_SpriteBaseView.m
如果測試 CC_Sprite 模型完整效果，可以使用：
- CC_SpriteTestVC.h岩调、CC_SpriteTestVC.m
優(yōu)勢
相比于傳統(tǒng)逐幀動(dòng)畫巷燥、原生動(dòng)畫API有以下優(yōu)勢：
- 最小的體積：傳統(tǒng)的動(dòng)畫需要提供每一幀圖片。而 CC_Sprite 動(dòng)畫只保存骨骼的動(dòng)畫數(shù)據(jù)号枕，它所占用的空間非常小缰揪，只需一個(gè)json文件，無需任何圖片資源葱淳。
- 美術(shù)需求：CC_Sprite 無需任何圖片資源所以任何程序員可以獨(dú)立完成整個(gè)動(dòng)畫钝腺，無需ps、美術(shù)軟件基礎(chǔ)赞厕。
- 流暢性：CC_Sprite 動(dòng)畫使用差值算法計(jì)算中間幀艳狐，這能讓你的動(dòng)畫總是保持流暢的效果。
- 復(fù)用：一套動(dòng)作可以復(fù)用置另一個(gè)精靈坑傅，一個(gè)精靈每個(gè)模塊都可替換（如武器的替換）僵驰。
- 可視化：SpriteKit等iOS原生動(dòng)畫只有編譯后才可看到效果，開發(fā)完全憑空想象唁毒，CC_Sprite 對(duì)每一關(guān)鍵幀可以即時(shí)預(yù)覽。
- 軟件成本：幾乎為0星爪，無需安裝和學(xué)習(xí)任何其他軟件浆西，直接在原生iOS模擬器創(chuàng)建精靈???♂?，展示的即是真實(shí)效果顽腾，省去調(diào)試API的步驟近零。
運(yùn)行原理
使用 CC_SpriteMaker 制作的精靈???♂?生成json文件诺核，包含每個(gè)關(guān)節(jié)的關(guān)鍵點(diǎn)，使用 CC_Sprite 播放時(shí)利用差值計(jì)算中間狀態(tài)久信。
功能
- 部位：將精靈分解成各個(gè)部位窖杀，單獨(dú)對(duì)部位進(jìn)行調(diào)整。
- 動(dòng)作：將每個(gè)部位動(dòng)作分解裙士，各個(gè)動(dòng)作獨(dú)立入客。
- 組合：可以在任何關(guān)鍵幀插入回調(diào)，自由組合多個(gè)動(dòng)畫或變化腿椎。
運(yùn)行環(huán)境
iOS模擬器或真機(jī)桌硫，因?yàn)槿渴褂胕OS自帶庫封裝，基本沒有兼容問題啃炸。
支持
可以在https://github.com/gwh111/bench_ios留言交流問題或建議铆隘。
問題和完善
- 還不支持圖片的導(dǎo)入（不用其他庫的前提下沒有找到圖片自由變形的方案，還需要考慮計(jì)算量）
- 模擬器可能會(huì)掉幀出現(xiàn)部位跟不上刷新問題南用，真機(jī)不會(huì)出現(xiàn)
調(diào)用方法
使用精靈???♂?
詳細(xì)介紹 CC_Sprite 有哪些屬性和方法膀钠，可以實(shí)現(xiàn)哪些功能。
創(chuàng)建精靈
有兩種方法：
- 從工程目錄讀取文件
CC_Sprite *sp1=[[CC_Sprite alloc]initOn:self.view withFilePath:@"sprite/man" scaleSize:0.4 speedRate:1];
- 另一種是從沙盒讀取文件（一般只在調(diào)試時(shí)使用）
CC_Sprite *sp1=[[CC_Sprite allo?c]initOn:self.view withLocalFilePath:@"sprite/man" scaleSize:0.4 speedRate:1];
配置精靈
屬性
@property(nonatomic,retain) NSMutableArray *items;
items是精靈的每個(gè)部件裹虫。后面會(huì)講到部件類CC_SpriteItem肿嘲。
方法
更新精靈的位置，是以制作時(shí)的中心所在的位置為基準(zhǔn)：
- (void)updatePosition:(CGPoint)position;
更新精靈的部位顏色：
- (void)updateColors:(NSDictionary *)colorDic;
以部位名-顏色的方式設(shè)置恒界，如：
[sp1 updateColors:@{@"arm":[UIColor yellowColor]}];
更新精靈的尺寸：
- (void)updateScale:(float)scale;
更新精靈的播放速度：
- (void)updateSpeed:(float)speed;
更新精靈的反轉(zhuǎn)情況睦刃，通過反轉(zhuǎn)形成左右對(duì)立需求：
- (void)updateReverse:(BOOL)reverse;
名詞解釋：在這里
精靈=多個(gè)部件組成的整體+各個(gè)部件動(dòng)作
部件=部件形狀+各個(gè)動(dòng)作
基準(zhǔn)=一個(gè)精靈各個(gè)部件的形狀
所以更新了部件，那么這個(gè)部位的形狀和這個(gè)部位的動(dòng)作會(huì)發(fā)生改變十酣。更新了基準(zhǔn)涩拙，這個(gè)精靈的形狀發(fā)生改變，而動(dòng)作不變耸采。
更新精靈所有基礎(chǔ)部件使用：
- (void)updateBaseListWithFilePath:(NSString *)fileName;
使用場景如制作了一個(gè)普通英雄 man.json兴泥，包含了走路、攻擊等動(dòng)作虾宇，又想制作一個(gè)比較胖的英雄但不想重新做一遍動(dòng)作搓彻，只需：
- 調(diào)整 man.json 每個(gè)部件的形狀，手臂拉拉粗嘱朽，身體拉圓一點(diǎn)
- 刪除其余動(dòng)作旭贬，然后生成一個(gè)沒有動(dòng)作的 fatman.json
- 初始化 man.json，使用 updateBaseListWithFilePath:@"fatman" 來替換模型搪泳。
- 這樣你就得到了一個(gè)包含 man.json 全部動(dòng)作的fatman精靈稀轨。
更新精靈部分部件使用：
- (void)updateBasePart:(NSString *)name withFilePath:(NSString *)fileName;
使用場景如制作了一個(gè)普通英雄 man.json，它有個(gè)名為 arm 的部件作為武器岸军，你想更換他的武器奋刽，只需：
- 新建一個(gè)精靈瓦侮，繪制一把新的武器，保存為 sword.json
- 使用 updateBasePart:@"arm" withFilePath:@"sword" 來替換 arm 部件的武器佣谐。
拿掉精靈部件使用：
- (void)removePart:(NSString *)name;
比如把英雄的武器拿掉 removePart:@"arm"
播放精靈動(dòng)畫使用：
- (void)playAction:(NSString *)name repeat:(int)repeat block:(nullable void(^)(NSString *state, CC_Sprite *sprite))block;
@name 動(dòng)畫的名字
@repeat 動(dòng)畫播放重復(fù)次數(shù)
停止精靈當(dāng)前進(jìn)行的動(dòng)畫使用：
- (void)stop;
把精靈移除會(huì)自動(dòng)先調(diào)用stop方法肚吏，使用：
- (void)remove;
制作精靈???♂?
調(diào)用制作的方法很簡單，首先從你的測試工程起調(diào)制作控制器：
[CC_SpriteMakerVC presentOnVC:self];
精靈結(jié)構(gòu)分析
和Spine結(jié)構(gòu)略有不同狭魂，Spine是使用動(dòng)作+節(jié)點(diǎn)的方式生成json文件罚攀，節(jié)點(diǎn)和動(dòng)作平鋪在外，而CC_Sptire使用節(jié)點(diǎn)+動(dòng)作的形式趁蕊。起先在這兩種方式上考慮了很久坞生，最終選擇現(xiàn)在的模式，這樣分的好處是：
- 更換某個(gè)部位如：武器時(shí)只需替換武器的整個(gè)包結(jié)構(gòu)掷伙，如果是用動(dòng)作+節(jié)點(diǎn)就需要對(duì)每個(gè)動(dòng)作做出調(diào)整是己，因?yàn)椴煌淦鞑粌H形狀不一樣，動(dòng)作也不一樣任柜。
- 制作精靈和運(yùn)行精靈可以共用一套邏輯卒废，節(jié)點(diǎn)+動(dòng)作的結(jié)構(gòu)因?yàn)槊總€(gè)部位獨(dú)立比較利于修改和調(diào)整。
精靈功能模塊
這里的操作會(huì)對(duì)精靈每個(gè)部位同步設(shè)置宙地，可以理解為所有部位模塊在這里是一個(gè)整體摔认。
新
清空當(dāng)前精靈和畫布，構(gòu)建一個(gè)空的新精靈宅粥。
切換
從沙盒選擇精靈模型或部位模型参袱。
復(fù)制
可以復(fù)制一個(gè)部位，包括它的所有動(dòng)作秽梅。
+
增加一個(gè)空白的部位抹蚀。
++
從沙盒選擇一個(gè)部位，如選擇不同的武器來添加到當(dāng)前精靈企垦，使用后從精靈移除這個(gè)部位环壤，也可以保留。
-
刪除這個(gè)部位钞诡。
+幀
拷貝指定幀到新幀郑现。
換
把當(dāng)前幀拷貝到指定幀。
-幀
刪除當(dāng)前幀荧降。
+b
添加一個(gè)block接箫，可以自定義block名，添加后播放到這幀會(huì)有block回調(diào)朵诫。
-b
移除當(dāng)前block列牺。
秒
設(shè)定從上一個(gè)動(dòng)作到當(dāng)前動(dòng)作執(zhí)行的時(shí)間。
整移
整體移動(dòng)拗窃，在畫布保持不動(dòng)瞎领，在實(shí)際播放時(shí)會(huì)移動(dòng)響應(yīng)的值。
移
移動(dòng)所有部位随夸，是實(shí)際的點(diǎn)的移動(dòng)九默。
留
當(dāng)前幀保持不動(dòng)停留到下一幀，中間不會(huì)有過渡宾毒。
以下是編輯時(shí)的功能
隱
隱藏所有編輯點(diǎn)驼修。
預(yù)覽
查看填充顏色的效果。
編輯
回歸編輯的模式诈铛。
播放
整體播放一遍動(dòng)作乙各。
生成
生成文件到沙盒。包括精靈幢竹、部位和基準(zhǔn)耳峦。這三者差別請(qǐng)看上面名詞解釋。
收起
為了使畫布更大焕毫，收起上面的功能蹲坷。
動(dòng)作功能模塊
動(dòng)作
彈出所有動(dòng)作選擇列表，選擇對(duì)應(yīng)動(dòng)作邑飒。
+
增加一個(gè)動(dòng)作循签。
復(fù)制
復(fù)制一個(gè)動(dòng)作。
-
刪除一個(gè)動(dòng)作疙咸。
名
修改當(dāng)前動(dòng)作的名稱县匠。
動(dòng)作關(guān)鍵幀模塊
以下操作都是對(duì)當(dāng)前選中部位，其他部位不影響
基準(zhǔn)
是當(dāng)前部位的核心撒轮，是一切動(dòng)作的基礎(chǔ)乞旦，是一個(gè)形狀。
+幀
拷貝指定幀到新幀腔召。
換
把當(dāng)前幀拷貝到指定幀杆查。
-幀
刪除當(dāng)前幀。
移
移動(dòng)當(dāng)前部位的位置臀蛛。
隱
隱藏當(dāng)前部位編輯點(diǎn)亲桦。
左/右
向左/右添加關(guān)鍵點(diǎn)，在創(chuàng)建基準(zhǔn)時(shí)使用浊仆。
刪
刪除最后一個(gè)編輯點(diǎn)客峭。
存
添加點(diǎn)或移動(dòng)后，認(rèn)為確定了抡柿，存一下舔琅，要撤銷就重新點(diǎn)下當(dāng)前幀
修改點(diǎn)后只是修改了緩存的點(diǎn)位置坐標(biāo)，存可以把位置坐標(biāo)轉(zhuǎn)換成json文件洲劣，而生成是把json文件存到沙盒备蚓。
如何制作精靈??的建議?
整個(gè)精靈的運(yùn)作使用了蘋果的 <QuartzCore> 庫课蔬，使用了 CADisplayLink 作為幀刷新的定時(shí)器。這樣的好處是GPU繪制郊尝，并且?guī)史€(wěn)定二跋，因?yàn)閾?jù)說 CADisplayLink 是以屏幕刷新周期作為回調(diào)的，這樣最大限度使用了手機(jī)的幀數(shù)刷新速率流昏。
理解貝塞爾曲線扎即。精靈的每個(gè)部位都使用 CAShapeLayer 繪制，并在每個(gè)刷新周期調(diào)整 path 屬性進(jìn)行繪制况凉。貝塞爾曲線通過三個(gè)點(diǎn)控制一段曲線谚鄙，擁有足夠多的貝塞爾線段就可以繪制任意圖形，并且方便地進(jìn)行變形刁绒。
繪制精靈的要點(diǎn)是把握關(guān)鍵點(diǎn)闷营，是了解結(jié)構(gòu)。人體共有206塊骨膛锭，我們并不需要每個(gè)關(guān)節(jié)都能變形粮坞，使用多少貝塞爾線段取決于你對(duì)模型的精細(xì)程度。將目標(biāo)點(diǎn)放在關(guān)節(jié)處初狰，就是兩根骨頭的連接點(diǎn)莫杈，來控制關(guān)節(jié)的移動(dòng)。將控制點(diǎn)放在兩個(gè)關(guān)節(jié)之間奢入，來控制胖瘦筝闹。這樣做出的精靈和動(dòng)作符合正常物理規(guī)律。
如何做一個(gè)動(dòng)作腥光，就是將整個(gè)動(dòng)作拆分成關(guān)鍵幀关顷，繪制關(guān)鍵幀后，計(jì)算機(jī)會(huì)自動(dòng)計(jì)算中間幀武福。將它們連起來播放议双，你會(huì)驚喜地發(fā)現(xiàn)雖然只是一個(gè)輪廓，你的大腦??可以腦補(bǔ)出整個(gè)畫面捉片，既充滿神秘又能理解動(dòng)作平痰。這讓我想起小時(shí)候外公教我中國畫，總是說在意不在形伍纫，小時(shí)候理解不了宗雇，總覺得要畫的像，但中國畫（寫意不是工筆）的內(nèi)涵就在于意莹规，在像與不像之間赔蒲。你仔細(xì)看，不像，但忽的一看舞虱，又能腦補(bǔ)整個(gè)場景欢际。CC_Sprite 的精髓就在這里。當(dāng)然砾嫉，你也可以添加更多部位幼苛，比如拆分眼睛，嘴巴等細(xì)節(jié)來細(xì)化精靈焕刮，但這樣相對(duì)比較耗時(shí)。
不知大家有沒有玩過《火焰紋章》掌機(jī)游戲墙杯，其實(shí)很多動(dòng)作我都是參考這個(gè)游戲內(nèi)的英雄配并，他們的戰(zhàn)斗運(yùn)動(dòng)方式。剛開始制作到一半時(shí)才去看Spine的json文件高镐，發(fā)現(xiàn)和它結(jié)構(gòu)完全反了溉旋，擔(dān)心后面會(huì)有問題彩扔，做了一半又不想重新開始就硬著頭皮做了下去苦银，最后發(fā)現(xiàn)意外的好用，這種結(jié)構(gòu)利于拆分浙垫，至少適應(yīng)了我的需求算行。后面再完善制作的功能……
