POP 動畫－牛刀小試

在iOS開發(fā)中拆讯，動畫可以說是美化App，提高App的交互效果的利器晴竞。So蛙卤，POP是FaceBook開源的一款動畫的第三方。近日稍微看了一下噩死，介紹一下簡單的入門級內(nèi)容颤难。

POP－進入你的項目

使用CocoaPod就十分簡單了。

pod 'pop', '~> 1.0'

POP－使用

POP有默認的三種動畫甜滨，和支持自定義動畫乐严。

  • POPBasicAnimation 基礎(chǔ)動畫
  • POPSpringAnimation 彈性動畫
  • POPDecayAnimation 阻尼動畫
  • POPCustomAnimation 自定義動畫

下面我們通過一步步的講解瘤袖，一步步的學習POP

POPBasicAnimation

POPBasicAnimation使用最廣泛 提供固定時間間隔的動畫(如淡入淡出效果)

入門級效果的解析衣摩，效果如下：

BaseAnimation
    POPBasicAnimation *anBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anBasic.fromValue = @(0);
    anBasic.toValue = @(view.frame.origin.x + 200);
    anBasic.beginTime = CACurrentMediaTime() + 1.0f;
    anBasic.duration = 0.4f;
    anBasic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [view.layer pop_addAnimation:anBasic forKey:@"position"];

熟悉POP的中有幾個概念。

PropertyNamed ---> kPOPLayerPositionX 表示這個動畫負責監(jiān)聽或者說動態(tài)變化的值

fromValue 表示這個動畫監(jiān)聽值的起始值

toValue 表示這個動畫監(jiān)聽值的結(jié)束值

beginTime 表示動畫的起始時間捂敌，＋1.0f表示向后延時 1s

duration 表示動畫的持續(xù)時間

timingFunction 表示動畫的效果淡入淡出等

timingFunction 包括

  • kCAMediaTimingFunctionLinear －－－ 線性動畫
  • kCAMediaTimingFunctionEaseIn －－－ 淡入
  • kCAMediaTimingFunctionEaseOut －－－ 淡出
  • kCAMediaTimingFunctionEaseInEaseOut －－－ 先淡入再淡出

了解了上面的東西基本上就能看懂那段代碼了艾扮。

大體意思就是我，我定義了一個監(jiān)聽LayerX值的動畫占婉。然后設(shè)置一下X的起始位置泡嘴，結(jié)束位置，開始時間逆济，持續(xù)時間酌予，動畫效果磺箕。然后我這個動畫基本就定義好了。

接下來抛虫，我吧這個動畫添加到View的Layer上松靡。并給他一個Key（隨意）。

經(jīng)過這個建椰，你大體能夠理解POP該怎么寫動畫效果了雕欺。簡單方便，實用經(jīng)濟棉姐。

POPSpringAnimation

彈性動畫屠列，是很多人選擇POP的原因了吧。因為他有一些像彈簧一樣的效果伞矩。

先上效果：

SpringAnimation
    POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anim.toValue = @(view.frame.origin.x + 200);
    anim.beginTime = CACurrentMediaTime() + 1.0f;
    anim.springBounciness = 15.0f;
    [view.layer pop_addAnimation:anim forKey:@"position"];

說一些SpringAnimation特有的屬性吧笛洛。

    springBounciness:4.0    //[0-20] 彈力 越大則震動幅度越大
    springSpeed     :12.0   //[0-20] 速度 越大則動畫結(jié)束越快
    dynamicsTension :0      //拉力  接下來這三個都跟物理力學模擬相關(guān) 數(shù)值調(diào)整起來也很費時 沒事不建議使用哈
    dynamicsFriction:0      //摩擦 同上
    dynamicsMass    :0      //質(zhì)量 同上

POPDecayAnimation

阻尼動畫，顧名思義扭吁，動畫就像公交慢慢踩剎車一樣撞蜂，慢慢減速的動畫。

    POPDecayAnimation *anDecay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anDecay.velocity = @(view.frame.origin.x + 200);
    anDecay.beginTime = CACurrentMediaTime();
    anDecay.deceleration = 0.998;
    [view.layer pop_addAnimation:anDecay forKey:@"position"];

效果自己可以試試侥袜，這里有一個注意點蝌诡。toValue,Duration設(shè)置將沒有什么意義。這個時候的運動值是根據(jù) velocity,deceleration計算出來的枫吧。

deceleration:0.998  //衰減系數(shù)(越小則衰減得越快)

POPAnimatablePropery

這個Propery就是監(jiān)聽的屬性值浦旱。

下面提供一個監(jiān)聽屬性表

/**
 Common CALayer property names.
 */
extern NSString * const kPOPLayerBackgroundColor;
extern NSString * const kPOPLayerBounds;
extern NSString * const kPOPLayerCornerRadius;
extern NSString * const kPOPLayerBorderWidth;
extern NSString * const kPOPLayerBorderColor;
extern NSString * const kPOPLayerOpacity;
extern NSString * const kPOPLayerPosition;
extern NSString * const kPOPLayerPositionX;
extern NSString * const kPOPLayerPositionY;
extern NSString * const kPOPLayerRotation;
extern NSString * const kPOPLayerRotationX;
extern NSString * const kPOPLayerRotationY;
extern NSString * const kPOPLayerScaleX;
extern NSString * const kPOPLayerScaleXY;
extern NSString * const kPOPLayerScaleY;
extern NSString * const kPOPLayerSize;
extern NSString * const kPOPLayerSubscaleXY;
extern NSString * const kPOPLayerSubtranslationX;
extern NSString * const kPOPLayerSubtranslationXY;
extern NSString * const kPOPLayerSubtranslationY;
extern NSString * const kPOPLayerSubtranslationZ;
extern NSString * const kPOPLayerTranslationX;
extern NSString * const kPOPLayerTranslationXY;
extern NSString * const kPOPLayerTranslationY;
extern NSString * const kPOPLayerTranslationZ;
extern NSString * const kPOPLayerZPosition;
extern NSString * const kPOPLayerShadowColor;
extern NSString * const kPOPLayerShadowOffset;
extern NSString * const kPOPLayerShadowOpacity;
extern NSString * const kPOPLayerShadowRadius;

/**
 Common CAShapeLayer property names.
 */
extern NSString * const kPOPShapeLayerStrokeStart;
extern NSString * const kPOPShapeLayerStrokeEnd;
extern NSString * const kPOPShapeLayerStrokeColor;
extern NSString * const kPOPShapeLayerFillColor;

/**
 Common NSLayoutConstraint property names.
 */
extern NSString * const kPOPLayoutConstraintConstant;


#if TARGET_OS_IPHONE

/**
 Common UIView property names.
 */
extern NSString * const kPOPViewAlpha;
extern NSString * const kPOPViewBackgroundColor;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewCenter;
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewScaleX;
extern NSString * const kPOPViewScaleXY;
extern NSString * const kPOPViewScaleY;
extern NSString * const kPOPViewSize;
extern NSString * const kPOPViewTintColor;

/**
 Common UIScrollView property names.
 */
extern NSString * const kPOPScrollViewContentOffset;
extern NSString * const kPOPScrollViewContentSize;
extern NSString * const kPOPScrollViewZoomScale;
extern NSString * const kPOPScrollViewContentInset;

/**
 Common UITableView property names.
 */
extern NSString * const kPOPTableViewContentOffset;
extern NSString * const kPOPTableViewContentSize;

/**
 Common UICollectionView property names.
 */
extern NSString * const kPOPCollectionViewContentOffset;
extern NSString * const kPOPCollectionViewContentSize;

/**
 Common UINavigationBar property names.
 */
extern NSString * const kPOPNavigationBarBarTintColor;

/**
 Common UIToolbar property names.
 */
extern NSString * const kPOPToolbarBarTintColor;

/**
 Common UITabBar property names.
 */
extern NSString * const kPOPTabBarBarTintColor;

/**
 Common UILabel property names.
 */
extern NSString * const kPOPLabelTextColor;

具體每一個屬性監(jiān)聽的代碼設(shè)置可以參考Git上面的例子。

POP Git Link

自定義POPAnimatableProperty

有些時候既有的Property可能滿足不了我們的需求九杂，這個時候我們可以自定義Property颁湖。

通過一個例子我們來講解一下。先上效果：

LabelAnimation
    UILabel *label = [[UILabel alloc]init];
    label.frame = CGRectMake(100, 200, 100, 50);
    label.textColor = [UIColor blackColor];
    [self.view addSubview:label];
    
    POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"countdown" initializer:^(POPMutableAnimatableProperty *prop) {
        prop.writeBlock = ^(id obj, const CGFloat values[]) {
            UILabel *lable = obj;
            label.text = [NSString stringWithFormat:@"%02d:%02d:%02d",(int)values[0]/60,(int)values[0]%60,(int)(values[0]*100)%100];
        };
        
        prop.threshold = 0.01f;
    }];
//
    POPBasicAnimation *anBasic = [POPBasicAnimation linearAnimation];   //秒表當然必須是線性的時間函數(shù)
    anBasic.property = prop;    //自定義屬性
    anBasic.fromValue = @(0);   //從0開始
    anBasic.toValue = @(3*60);  //180秒
    anBasic.duration = 180;    //持續(xù)3分鐘
    anBasic.beginTime = CACurrentMediaTime() + 1;    //延遲1秒開始
    [label pop_addAnimation:anBasic forKey:@"countdown"];

這個時候例隆，有些東西可以特殊解釋一下甥捺。

prop.writeBlock 這個是Animation中Value每次的變化都會調(diào)用這個回調(diào)，然后就可以在這個Block里面做一些事情镀层，效果镰禾。

values數(shù)組表示的是什么呢。在這個中Value是一個數(shù)值唱逢，就是Values[0].

然后如果Value是一個CGRect吴侦，那么values[0]，values[1]坞古，values[2]备韧，values[3] 就分別對應(yīng) CGRectMake(0, 0, 20.0, 20.0) 的 0, 0, 20.0, 20.0

總結(jié)

POP動畫基礎(chǔ)入門就是這樣，想要深入可以看Git的官方文檔痪枫。

POP的文檔還是十分完備的织堂。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末叠艳，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子易阳，更是在濱河造成了極大的恐慌虑绵，老刑警劉巖，帶你破解...
    沈念sama閱讀 211,194評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件闽烙，死亡現(xiàn)場離奇詭異翅睛，居然都是意外死亡，警方通過查閱死者的電腦和手機黑竞，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門捕发，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人很魂，你說我怎么就攤上這事扎酷。” “怎么了遏匆？”我有些...
    開封第一講書人閱讀 156,780評論 0贊 346
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵法挨，是天一觀的道長。 經(jīng)常有香客問我幅聘，道長凡纳，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,388評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任帝蒿，我火速辦了婚禮荐糜，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘葛超。我一直安慰自己暴氏，他們只是感情好，可當我...
    茶點故事閱讀 65,430評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布绣张。 她就那樣靜靜地躺著答渔，像睡著了一般。 火紅的嫁衣襯著肌膚如雪侥涵。 梳的紋絲不亂的頭發(fā)上沼撕，一...
    開封第一講書人閱讀 49,764評論 1贊 290
  • 城市分裂傳說
    那天，我揣著相機與錄音独令，去河邊找鬼端朵。 笑死好芭，一個胖子當著我的面吹牛燃箭，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播舍败，決...
    沈念sama閱讀 38,907評論 3贊 406
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼招狸，長吁一口氣：“原來是場噩夢啊……” “哼敬拓！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起裙戏，我...
    開封第一講書人閱讀 37,679評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤乘凸，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后累榜，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體营勤，經(jīng)...
    沈念sama閱讀 44,122評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年壹罚，在試婚紗的時候發(fā)現(xiàn)自己被綠了葛作。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,605評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡猖凛，死狀恐怖赂蠢，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情辨泳，我是刑警寧澤虱岂，帶...
    沈念sama閱讀 34,270評論 4贊 329
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站菠红，受9級特大地震影響第岖，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜试溯，卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一绍傲、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧耍共，春花似錦烫饼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0贊 21
  • 一樁弒父案杠纵，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至钩骇，卻和暖如春比藻，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背倘屹。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1贊 265
  • 情欲美人皮
    我被黑心中介騙來泰國打工银亲， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人纽匙。 一個月前我還...
    沈念sama閱讀 46,297評論 2贊 360
  • 代替公主和親
    正文 我出身青樓务蝠，卻偏偏與公主長得像，于是被迫代替她去往敵國和親烛缔。 傳聞我的和親對象是個殘疾皇子馏段，可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2贊 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,749評論 25贊 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫轩拨、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評論 4贊 62
  • 在iOS中隨處都可以看到絢麗的動畫效果院喜，實現(xiàn)這些動畫的過程并不復(fù)雜亡蓉，今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,469評論 6贊 30
  • 近幾年突然迷上了旅游喷舀，或許是工作的壓力砍濒，或許是婚姻的不滿意，無處可逃便只有暫時的出走硫麻。 這次隨旅行社的專列跑了一遍...
    墨竹居士閱讀 451評論 0贊 2
  • 有一點意想的就要跟上去梯影。不拒絕我三次不放棄！
    宬宬閱讀 168評論 0贊 0