IOS FACEBOOK POP動畫詳解
POP框架介紹
POP 的架構(gòu)
架構(gòu)知識了解下就行
POP 目前由四部分組成:1. Animations;2. Engine执解;3. Utility挤庇;4. WebCore赏壹。
POP 動畫極為流暢模狭,其秘密就在于這個 Engine 中的POPAnimator 里,POP 通過 ==CADisplayLink== 高達(dá) 60 FPS 的特性读虏,打造了一個游戲級的動畫引擎。
CADisplayLink 是類似 NSTimer 的定時器袁滥,不同之處在于盖桥,NSTimer 用于我們定義任務(wù)的執(zhí)行周期、資料的更新周期题翻,他的執(zhí)行受到 CPU 的阻塞影響揩徊,而 CADisplayLink 則用于定義畫面的重繪、動畫的演變嵌赠,他的執(zhí)行基于 frames 的間隔塑荒。
通過 CADisplayLink,Apple 允許你將 App 的重繪速度設(shè)定到和屏幕刷新頻率一致姜挺,由此你可以獲得非常流暢的交互動畫齿税,這項(xiàng)技術(shù)的應(yīng)用在游戲中非常常見,著名的 Cocos-2D 也應(yīng)用了這個重要的技術(shù)炊豪。
WebCore 里包含了一些從 Apple 的開源的網(wǎng)頁渲染引擎里拿出的源文件凌箕,與 Utility 里的組件一并,提供了 POP 的各項(xiàng)復(fù)雜計(jì)算的基本支持词渤。
由此通過 Engine牵舱、Utility、WebCore 三個基石缺虐,打造了Animations芜壁。
==POPAnimation 有著和 CALayer 非常相似的 API。用法基本上相同==
基本動畫
1.Spring Animation 彈性效果 (
- Bounciness 反彈-影響動畫作用的參數(shù)的變化幅度
- Speed 速度
- Tension 拉力-影響回彈力度以及速度
- Friction 摩擦力-如果開啟志笼,動畫會不斷重復(fù)沿盅,幅度逐漸削弱,直到停止纫溃。
- Mass 質(zhì)量-細(xì)微的影響動畫的回彈力度以及速度
2.Decay Animation 衰減效果 (用于用戶的交互較多)
3.Property Animation & Basic Animation
4.POPCustomAnimation
使用demo
POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(2.0, 2.0)];
anim.springBounciness = 4.0;
anim.springSpeed = 12.0;
anim.completionBlock = ^(POPAnimation *anim, BOOL finished) {
if (finished) {NSLog(@"Animation finished!");}};
[self.popCircle.layer pop_addAnimation:anim forKey:@"Move"];
//completionBlock 提供了一個 Callback腰涧,動畫的執(zhí)行過程會不斷調(diào)用這個 block,finished 這個布爾變量可以用來做動畫完成與否的判斷
animationWithPropertyNamed 后面跟屬性紊浩,具體屬性可以點(diǎn)進(jìn)pop框架里看下POPAnimatableProperty這個類窖铡。使用還是很簡單疗锐,
- 實(shí)例化動畫類
- 設(shè)計(jì)相關(guān)動畫屬性
- 使用 pop_addAnimation 添加動畫
擴(kuò)展
1.組動畫
實(shí)例化動畫類 添加即可 動畫效果會同時進(jìn)行
POPSpringAnimation *Annimation1 = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
Annimation1.springSpeed = 40.0f;
Annimation1.springBounciness = 30.0f;
Annimation1.fromValue = [NSValue valueWithCGPoint:CGPointMake(0.3, 0.3)];
Annimation1.toValue = [NSValue valueWithCGPoint:CGPointMake(1, 1)];
POPSpringAnimation *Annimation2 = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];
Annimation2.springSpeed = 40.0f;
Annimation1.springBounciness = 30.0f;
Annimation2.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
[_Subview pop_addAnimation:Annimation1 forKey:@"Scale"];
[_Subview pop_addAnimation:Annimation2 forKey:@"Move"];
2.連續(xù)動畫 原理比較簡單就不說了,直接上代碼 ```Objectivec anim.completionBlock = ^(POPAnimation *anim, BOOL finished) {
if (finished) {
NSLog(@"Animation finished!");
//加入新的動畫
}};
3.約束動畫 約束用的masonry ```objectivec -(void)TipNumViewForword:(ForwordType)Type{
if(Type == UpForword){
_BtnTipTop = -48.0f;
}
if(Type == DownForword){
_BtnTipTop = 0.0f;
}
[self.view setNeedsUpdateConstraints];
[self.view updateConstraintsIfNeeded];
}
-(void)updateViewConstraints
{
[UIView animateWithDuration:1.0
delay:0
usingSpringWithDamping:0.7
initialSpringVelocity:20.0
options:0
animations:^{
[_BtnAlertTip mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.view.mas_top).with.offset(_BtnTipTop);//_BtnTipTop 全局 屬性 cgFloat類型
make.left.right.mas_equalTo(self.view);
make.height.mas_equalTo(48.0f);
}];
} completion:NULL];
[super updateViewConstraints];
}4.形變動畫
5.UIView動畫
[UIView animateWithDuration:1.0
delay:0
usingSpringWithDamping:0.7
initialSpringVelocity:20.0
options:0
animations:^{
} completion:NULL];
usingSpringWithDamping:彈簧動畫的阻尼值费彼,也就是相當(dāng)于摩擦力的大小滑臊,該屬性的值從0.0到1.0之間,越靠近0箍铲,阻尼越小雇卷,彈動的幅度越大,反之阻尼越大颠猴,彈動的幅度越小关划,如果大道一定程度,會出現(xiàn)彈不動的情況翘瓮。
initialSpringVelocity:彈簧動畫的速率贮折,或者說是動力。值越小彈簧的動力越小资盅,彈簧拉伸的幅度越小调榄,反之動力越大,彈簧拉伸的幅度越大呵扛。這里需要注意的是每庆,如果設(shè)置為0,表示忽略該屬性择份,由動畫持續(xù)時間和阻尼計(jì)算動畫的效果扣孟。
實(shí)例代碼
常用動畫效果POP-HandApp
這個實(shí)例工程 寫了個關(guān)于更新約束方面的引用不過采用的是 Ios7后 添加的uiview 動畫函數(shù)
[UIView animateWithDuration:0.5
delay:0
usingSpringWithDamping:0.7
initialSpringVelocity:0.7
options:0
animations:^{
[self.contentView layoutIfNeeded];
} completion:NULL];
##參考文檔
[Pop–實(shí)現(xiàn)任意iOS對象的任意屬性的動態(tài)變化](https://segmentfault.com/a/1190000003706209)
[從Core Animation到Facebook‘s Pop(1)](http://www.cocoachina.com/design/20141222/10720.html) `-- 寫了 CoreAnimation 動畫分解過程 pop部分沒有介紹`
[Facebook Pop 使用指南](http://www.cocoachina.com/ios/20140527/8565.html)
[Facebook POP 進(jìn)階指南](http://www.cocoachina.com/ios/20140704/9034.html)
`很有用有demo`
--CAAnimation
[iOS開發(fā)UI篇—核心動畫(基礎(chǔ)動畫)](http://www.cnblogs.com/wendingding/p/3801157.html)
(平移,縮放,旋轉(zhuǎn))
[iOS開發(fā)UI篇—核心動畫(關(guān)鍵幀動畫)](http://www.cnblogs.com/wendingding/p/3801330.html)
>
(跟CABasicAnimation的區(qū)別是:CABasicAnimation只能從一個數(shù)值(fromValue)變到另一個 數(shù)值(toValue),而CAKeyframeAnimation會使用一個NSArray保存這些數(shù)值)
[iOS開發(fā)UI篇—核心動畫(轉(zhuǎn)場動畫和組動畫)](http://www.cnblogs.com/wendingding/p/3801454.html) `--動畫組合`
[iOS UIView Animation](http://www.devtalking.com/articles/uiview-animation-practice/) `--寫的比較詳細(xì)`
##三方庫
pop 簡化使用 第三方庫 個人感覺用處不是太大荣赶,可以看下
[POP-MCAnimate](https://github.com/matthewcheok/POP-MCAnimate)