鏈接
歡迎大家訪問我的個(gè)人網(wǎng)站四度空間
Fuse?
很多時(shí)候，設(shè)計(jì)師設(shè)計(jì)一個(gè)特效動(dòng)畫出來，用靜態(tài)的UE是很難向開發(fā)者描述動(dòng)效的具體樣式的，于是需要借助一些UX交互設(shè)計(jì)工具。
當(dāng)前用的較多的UX交互設(shè)計(jì)工具是Fuse軟件了，F(xiàn)use軟件要求設(shè)計(jì)師懂一些Html語(yǔ)言和JS語(yǔ)言語(yǔ)言，Html寫UI，JS跑邏輯，大大提高溝通效率，同時(shí)會(huì)省卻開發(fā)者很多時(shí)間，因?yàn)樵谠O(shè)計(jì)者寫好動(dòng)畫特效之后，直接就可以通過Fuse軟件導(dǎo)出iOS或Android原型，直接發(fā)布都可以，就拿iOS舉例，導(dǎo)出的Xcode工程，確實(shí)運(yùn)行沒有問題，但是內(nèi)存超大，而且顯得特別冗余，因此如果把Fuse導(dǎo)出的這個(gè)工程直接融合進(jìn)項(xiàng)目之中實(shí)在不劃算。
開發(fā)者自己來寫動(dòng)畫特效唯一的問題就是如何保證開發(fā)者自己寫的動(dòng)畫特效跟設(shè)計(jì)師想要的動(dòng)畫特效是完全一致的，一個(gè)動(dòng)畫就主要兩方面，一是UI二是特效，UI自然不在話下，只要參數(shù)一致，肯定是滿足設(shè)計(jì)者要求的，關(guān)鍵是特效。這就不得不引入一個(gè)影響動(dòng)畫特效的關(guān)鍵因素緩動(dòng)函數(shù)。
緩動(dòng)函數(shù)，顧名思義，就是決定動(dòng)畫效果運(yùn)動(dòng)快慢的函數(shù)。詳細(xì)說就是定義不同曲線的數(shù)據(jù)公式，描述每一幀動(dòng)畫回調(diào)時(shí)需要改變的圖形參數(shù)屬性的幅度，從而達(dá)到均勻、先快后慢、先慢后快，甚至先超出起始值和結(jié)束值再慢慢恢復(fù)的各種動(dòng)畫特效。
因?yàn)榇蠖鄶?shù)動(dòng)畫特效都是模仿現(xiàn)實(shí)生活中的情形，時(shí)而加速時(shí)而減速。動(dòng)畫特效直接受到緩動(dòng)函數(shù)的影響，自然可以通過設(shè)置緩動(dòng)函數(shù)進(jìn)而實(shí)現(xiàn)不同的動(dòng)畫效果。設(shè)計(jì)師使用Fuse軟件設(shè)計(jì)出動(dòng)畫特效時(shí)，里面必不可少的步驟就是設(shè)置UI動(dòng)畫的緩動(dòng)函數(shù)類型，當(dāng)然Css的緩動(dòng)函數(shù)名稱跟Java或OC的緩動(dòng)函數(shù)名稱有些不同，看圖就一目了然，只要知道設(shè)計(jì)師使用的緩動(dòng)函數(shù)，找到相應(yīng)的坐標(biāo)圖，就順勢(shì)找出了OC中對(duì)應(yīng)的緩動(dòng)函數(shù)名稱。
典型的線性kCAMediaTimingFunctionLinear、漸快kCAMediaTimingFunctionEaseIn、漸慢kCAMediaTimingFunctionEaseOut、先快后慢kCAMediaTimingFunctionEaseInEaseOut都是動(dòng)畫本身就自帶的函數(shù)類型，這也是最簡(jiǎn)單的動(dòng)畫特效。不是我們重點(diǎn)討論的內(nèi)容，我們重點(diǎn)討論設(shè)計(jì)師設(shè)計(jì)的復(fù)雜緩動(dòng)函數(shù)構(gòu)建的動(dòng)畫特效。
復(fù)雜緩動(dòng)函數(shù)曲線通常都是需要開發(fā)者自定義，iOS的原生動(dòng)畫框架對(duì)自定義緩動(dòng)函數(shù)曲線支持不是很好，所以這也是FaceBook開源的POP動(dòng)畫框架大受歡迎的原因。
POP動(dòng)畫框架就是通過改變視圖模型層Model Layer狀態(tài)來實(shí)現(xiàn)動(dòng)畫，原生Core Animation的是通過改變渲染層Render Layer實(shí)現(xiàn)動(dòng)畫，所以Core Animation動(dòng)畫會(huì)在動(dòng)畫結(jié)束后回到起始位置和無(wú)法實(shí)現(xiàn)UILable的Text屬性動(dòng)畫效果，POP動(dòng)畫框架不止于此，更可以創(chuàng)建動(dòng)畫框架沒有的時(shí)間緩動(dòng)函數(shù)曲線進(jìn)而構(gòu)建特別的動(dòng)畫特效，本質(zhì)上來說，POP動(dòng)畫框架的本質(zhì)是CADisplayLink定時(shí)器（屏幕刷新率：60幀/S)每觸發(fā)一次屏幕刷新的方法就執(zhí)行一幀動(dòng)畫，根據(jù)設(shè)定的緩動(dòng)函數(shù)Time Function來計(jì)算每一幀動(dòng)畫的插值，進(jìn)而賦值給視圖或圖層的屬性(Center、Frame、Text)形成動(dòng)畫效果。
對(duì)于POP動(dòng)畫框架來說，設(shè)置緩動(dòng)函數(shù)曲線主要兩種方法，具體哪一種方法視緩動(dòng)函數(shù)曲線的復(fù)雜度而定。
- 第一種方法較為簡(jiǎn)單，只適用于通過兩個(gè)構(gòu)建點(diǎn)就能構(gòu)建的緩動(dòng)函數(shù)曲線、獲取兩個(gè)構(gòu)建點(diǎn)的坐標(biāo)，作為參數(shù)傳入POP動(dòng)畫框架的API。
- 第二種方法就需要理解POP的原理才能完成，POPCustomAnimation類的Block代碼塊在CADisplayLink定時(shí)器每一次觸發(fā)方法是都會(huì)調(diào)用，前提必須知道緩動(dòng)函數(shù)曲線對(duì)應(yīng)的C語(yǔ)言計(jì)算函數(shù)JS查詢表，每一幀動(dòng)畫都需要計(jì)算一次，就是說，緩動(dòng)函數(shù)曲線的每一個(gè)坐標(biāo)點(diǎn)都是通過C語(yǔ)言計(jì)算函數(shù)實(shí)時(shí)計(jì)算構(gòu)建出來的，計(jì)算頻率與CADisplayLink一致，這樣無(wú)論多復(fù)雜的緩動(dòng)函數(shù)曲線都可以更具具體的函數(shù)實(shí)時(shí)構(gòu)建出來。因?yàn)楸举|(zhì)定時(shí)器，自然POP動(dòng)畫是在主線層執(zhí)行的，消耗CPU較嚴(yán)重，所以如果只是簡(jiǎn)單的動(dòng)畫使用分線程執(zhí)行的UIView的Block動(dòng)畫是一個(gè)更好的選擇。
動(dòng)畫分類？
- 基本動(dòng)畫：線性
kCAMediaTimingFunctionLinear、漸快kCAMediaTimingFunctionEaseIn、漸慢kCAMediaTimingFunctionEaseOut、先快后慢kCAMediaTimingFunctionEaseInEaseOut共四種時(shí)間緩動(dòng)函數(shù)。 - 彈簧動(dòng)畫：
springBounciness[0-20]彈力越大則震動(dòng)幅度越大、springSpeed[0-20]速度越大則動(dòng)畫結(jié)束越快、dynamicsFriction摩擦、dynamicsMass質(zhì)量，動(dòng)畫持續(xù)的時(shí)間和時(shí)間的緩動(dòng)函數(shù)由以上幾個(gè)參數(shù)決定。 - 阻尼動(dòng)畫：
deceleration衰減系數(shù)剎車，動(dòng)畫持續(xù)的時(shí)間和時(shí)間的緩動(dòng)函數(shù)由衰減系數(shù)決定 - 自定義動(dòng)畫
自定義動(dòng)畫？
方法一：
- 自定義動(dòng)畫第一步需要自定義時(shí)間的緩動(dòng)函數(shù)曲線。
- 實(shí)現(xiàn)POPCustomAnimation類的Block代碼塊參數(shù)。每次CADisplayLink定時(shí)器觸發(fā)時(shí)也就是每一幀動(dòng)畫都會(huì)調(diào)用我們定義好的Block。
- 記錄動(dòng)畫開始時(shí)的基準(zhǔn)時(shí)間、X軸的時(shí)間進(jìn)度[0-1]百分比、調(diào)用緩動(dòng)函數(shù)ElasticEaseOut對(duì)應(yīng)的C語(yǔ)言函數(shù)（參照J(rèn)S函數(shù)表）計(jì)算出Y值進(jìn)度[0-1]百分比、根據(jù)緩動(dòng)函數(shù)輸出的Y值計(jì)算動(dòng)畫插值賦值給UI對(duì)象、判斷如果Y值進(jìn)度小于1繼續(xù)動(dòng)畫
方法二：（有局限，只適用于較簡(jiǎn)單的動(dòng)畫）
- 移動(dòng)兩個(gè)坐標(biāo)點(diǎn)隨意構(gòu)建緩動(dòng)函數(shù)曲線
- 獲取兩個(gè)坐標(biāo)點(diǎn)坐標(biāo)。為什么POP動(dòng)畫的自定義換動(dòng)函數(shù)API只能輸入兩個(gè)坐標(biāo)點(diǎn)，原來貝塞爾曲線真的是通過兩個(gè)坐標(biāo)點(diǎn)構(gòu)建的（當(dāng)然這里排除（0,0）和（1,1）這兩個(gè)坐標(biāo)）。在動(dòng)畫執(zhí)行之前就把緩動(dòng)函數(shù)構(gòu)建完成，這樣就不用每一幀動(dòng)畫都計(jì)算一次緩動(dòng)函數(shù)下一坐標(biāo)點(diǎn)了，當(dāng)然在動(dòng)畫開始之前就構(gòu)建出完整的緩動(dòng)函數(shù)曲線在精度是比不上每一幀都調(diào)用曲線的C語(yǔ)言函數(shù)這個(gè)方法的。
- 自定義緩動(dòng)函數(shù)完成之后，更可以把自定義曲線的名字和兩個(gè)坐標(biāo)點(diǎn)以Json數(shù)據(jù)的格式導(dǎo)入到庫(kù)之中，不僅僅起到保存的功能喲，更可以去除來加以比較，進(jìn)行微調(diào)，簡(jiǎn)直棒到?jīng)]朋友呀！
貝塞爾曲線的數(shù)學(xué)公式參考實(shí)現(xiàn)(JS版)
(function(factory){
if(typeof define === "function" && define.amd){
define(['jquery'],function($){
return factory($);
});
} else if(typeof module === "object" && typeof module.exports === "object"){
exports = factory(require('jquery'));
} else {
factory(jQuery);
}
})
(function($){
$.easing['jswing']= $.easing['swing'];
var pow = Math.pow,
sqrt = Math.sqrt,
sin = Math.sin,
cos = Math.cos,
PI = Math.PI,
c1 = 1.70158,
c2 = c1 * 1.525,
c3 = c1 + 1,
c4 =(2 * PI)/ 3,
c5 =(2 * PI)/ 4.5;
function bounceOut(x){
var n1 = 7.5625,
d1 = 2.75;
if(x < 1/d1){
return n1*x*x;
} else if(x < 2/d1){
return n1*(x-=(1.5/d1))*x + .75;
} else if(x < 2.5/d1){
return n1*(x-=(2.25/d1))*x + .9375;
} else {
return n1*(x-=(2.625/d1))*x + .984375;
}
}
$.extend($.easing,
{
def: 'easeOutQuad',
swing: function(x){
return $.easing[$.easing.def](x);
},
easeInQuad: function(x){
return x * x;
},
easeOutQuad: function(x){
return 1 -(1 - x)*(1 - x);
},
easeInOutQuad: function(x){
return x < 0.5?
2 * x * x :
1 - pow(-2 * x + 2,2)/ 2;
},
easeInCubic: function(x){
return x * x * x;
},
easeOutCubic: function(x){
return 1 - pow(1 - x,3);
},
easeInOutCubic: function(x){
return x < 0.5?
4 * x * x * x :
1 - pow(-2 * x + 2,3)/ 2;
},
easeInQuart: function(x){
return x * x * x * x;
},
easeOutQuart: function(x){
return 1 - pow(1 - x,4);
},
easeInOutQuart: function(x){
return x < 0.5?
8 * x * x * x * x :
1 - pow(-2 * x + 2,4)/ 2;
},
easeInQuint: function(x){
return x * x * x * x * x;
},
easeOutQuint: function(x){
return 1 - pow(1 - x,5);
},
easeInOutQuint: function(x){
return x < 0.5?
16 * x * x * x * x * x :
1 - pow(-2 * x + 2,5)/ 2;
},
easeInSine: function(x){
return 1 - cos(x * PI/2);
},
easeOutSine: function(x){
return sin(x * PI/2);
},
easeInOutSine: function(x){
return -(cos(PI * x)- 1)/ 2;
},
easeInExpo: function(x){
return x === 0?0 : pow(2,10 * x - 10);
},
easeOutExpo: function(x){
return x === 1?1 : 1 - pow(2,-10 * x);
},
easeInOutExpo: function(x){
return x === 0?0 : x === 1?1 : x < 0.5?
pow(2,20 * x - 10)/ 2 :
(2 - pow(2,-20 * x + 10))/ 2;
},
easeInCirc: function(x){
return 1 - sqrt(1 - pow(x,2));
},
easeOutCirc: function(x){
return sqrt(1 - pow(x - 1,2));
},
easeInOutCirc: function(x){
return x < 0.5?
(1 - sqrt(1 - pow(2 * x,2)))/ 2 :
(sqrt(1 - pow(-2 * x + 2,2))+ 1)/ 2;
},
easeInElastic: function(x){
return x === 0?0 : x === 1?1 :
-pow(2,10 * x - 10)* sin((x * 10 - 10.75)* c4);
},
easeOutElastic: function(x){
return x === 0?0 : x === 1?1 :
pow(2,-10 * x)* sin((x * 10 - 0.75)* c4)+ 1;
},
easeInOutElastic: function(x){
return x === 0?0 : x === 1?1 : x < 0.5?
-(pow(2,20 * x - 10)* sin((20 * x - 11.125)* c5))/ 2 :
pow(2,-20 * x + 10)* sin((20 * x - 11.125)* c5)/ 2 + 1;
},
easeInBack: function(x){
return c3 * x * x * x - c1 * x * x;
},
easeOutBack: function(x){
return 1 + c3 * pow(x - 1,3)+ c1 * pow(x - 1,2);
},
easeInOutBack: function(x){
return x < 0.5?
(pow(2 * x,2)*((c2 + 1)* 2 * x - c2))/ 2 :
(pow(2 * x - 2,2)*((c2 + 1)*(x * 2 - 2)+ c2)+ 2)/ 2;
},
easeInBounce: function(x){
return 1 - bounceOut(1 - x);
},
easeOutBounce: bounceOut,
easeInOutBounce: function(x){
return x < 0.5?
(1 - bounceOut(1 - 2 * x))/ 2 :
(1 + bounceOut(2 * x - 1))/ 2;
}
});
});