iOS開發(fā)之POP動畫基礎1

簡介:
pop動畫引擎是Facebook公司開源的,主要實現(xiàn)了真實物理系的動畫效果(彈簧效果與衰減效果)
1唯咬、pop動畫引擎的動畫效果非常流程,其最主要原因是底層使用了CADisplayLink來刷新畏浆,每秒達到了60幀胆胰,和游戲引擎相當。
2刻获、pop動畫與CALayer動畫的區(qū)別:CALayer動畫是有中間狀態(tài)的蜀涨,在展示過程中實際上有另一layer層在展示動畫,當在執(zhí)行動畫過程中突然移除掉動畫效果,會直接到指定的最終狀態(tài)勉盅,容易引起不流程的體驗佑颇。
pop動畫是沒有中間狀態(tài)的,在執(zhí)行動畫的過程中草娜,如果中途移除掉動畫效果挑胸,那么layer會停留在當前位置。

實現(xiàn)衰減效果:
1)衰減動畫由POPDecayAnimation來實現(xiàn)
2)需要精確計算停止運動瞬間的加速度才能夠用衰減動畫做出真是的效果
目標效果:拖拽一個圓形小球宰闰,停止拖拽的瞬間小球繼續(xù)向前慢慢移動減速停止茬贵。
代碼實現(xiàn):

#pragma mark -創(chuàng)建一個圓形的小球
- (void)createBtn{
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.bounds = CGRectMake(0, 0, 100, 100);
    btn.center = self.view.center;
    btn.layer.cornerRadius = 50;
    btn.layer.masksToBounds = YES;
    btn.backgroundColor = [UIColor redColor];
    //添加到view中
    [self.view addSubview:btn];
    //為btn添加拖拽手勢
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(btnPanGes:)];
    [btn addGestureRecognizer:pan];
}

#pragma mark - 拖拽事件
- (void)btnPanGes:(UIPanGestureRecognizer *)recognizer{
    //獲取拖拽的變化量
    CGPoint trans = [recognizer translationInView:recognizer.view];
    //動態(tài)改變被拖拽的目標的frame值
    recognizer.view.center = CGPointMake(trans.x+recognizer.view.center.x, trans.y+recognizer.view.center.y);
    //清空偏移量
    [recognizer setTranslation:CGPointZero inView:self.view];
    //當停止拖拽的那一瞬間計算加速度并添加衰減動畫
    if (recognizer.state == UIGestureRecognizerStateEnded) {
        //獲取此時的加速度
        CGPoint vo = [recognizer velocityInView:self.view];
        //創(chuàng)建衰減動畫
        POPDecayAnimation *decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];
        decay.velocity = [NSValue valueWithCGPoint:vo];
        [recognizer.view.layer pop_addAnimation:decay forKey:nil];
    }
}

實現(xiàn)彈簧效果
1)彈簧效果通過POPSpringAnimation來實現(xiàn)
2)可以通過設置彈性系數(shù)和速度來設置效果
實現(xiàn)目標:一個紅色的視圖像彈簧般變大
代碼實現(xiàn):

- (void)createView{
    UIView *showView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];
    showView.backgroundColor = [UIColor redColor];
    showView.center = self.view.center;
    //添加到主視圖
    [self.view addSubview:showView];
    //添加彈簧動畫,對bounds屬性做動畫效果
    POPSpringAnimation *spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
    spring.springBounciness = 20;//設置彈性系數(shù),數(shù)值越大移袍,震動幅度越大
    spring.springSpeed = 0;//設置速度解藻,速度越快,動畫效果越快結束
    spring.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)];
    [showView.layer pop_addAnimation:spring forKey:nil];
}

自定義動畫:
POP默認支持的三種動畫都繼承自POPPropertyAnimation中定義了一個叫property的屬性( 之前沒有用到它是因為POP根據(jù)不同的默認動畫屬性幫你生成了默認的property) 而這個property則是用來驅動POP的動畫效果中的重要一環(huán)葡盗。

POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"prop" initializer:^(POPMutableAnimatableProperty *prop) {
    prop.readBlock = ^(id obj, CGFloat values[]) {
        
    };
    prop.writeBlock = ^(id obj, const CGFloat values[]) {
        
    };
    prop.threshold = 0.01;
}];

其組成就是一個readBlock一個writeBlock和一個threashold
readBlock告訴POP當前的屬性值
writeBlock中修改變化后的屬性值
threashold決定了動畫變化間隔的閾值 值越大writeBlock的調用次數(shù)越少

POPAnimatableProperty其實是POP中一個比較重要的東西 像上面提到的POP自帶的動畫屬性 查看源代碼可以看到也只是POP自動幫你設置好了POPAnimatableProperty而已 其作用就是當動畫的某個時間片被觸發(fā)時 告訴系統(tǒng)如何根據(jù)當前時間片做出變化

自定義屬性實現(xiàn)目標:類似秒表的動畫
代碼:

- (void)animatableProp{
    UILabel *lab = [[UILabel alloc]init];
    lab.frame = CGRectMake(0, 0, 100,50);
    lab.font = [UIFont systemFontOfSize:30];
    [self.view addSubview:lab];
    lab.center = self.view.center;
    POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"countDown" initializer:^(POPMutableAnimatableProperty *prop) {
        prop.writeBlock = ^(id obj,const CGFloat values[]){
            UILabel *label = (UILabel*)obj;
            label.text = [NSString stringWithFormat:@"%d:%d:%d",(int)values[0]/60,(int)values[0]%60,(int)(values[0]*100)%100];
        };
    }];
    //秒表采用線性事件函數(shù)
    POPBasicAnimation *basic = [POPBasicAnimation linearAnimation];
    basic.property = prop;//采用自定義屬性
    basic.fromValue = @(0);//從0開始
    basic.toValue = @(3*60);//180秒
    basic.duration = 3*60;//持續(xù)3分鐘
    [lab pop_addAnimation:basic forKey:nil];
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(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
  • 文/不壞的土叔 我叫張陵奔誓,是天一觀的道長。 經常有香客問我搔涝,道長厨喂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任庄呈,我火速辦了婚禮蜕煌,結果婚禮上,老公的妹妹穿的比我還像新娘诬留。我一直安慰自己斜纪,他們只是感情好贫母,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著盒刚,像睡著了一般腺劣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上因块,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天橘原,我揣著相機與錄音,去河邊找鬼涡上。 笑死趾断,一個胖子當著我的面吹牛,可吹牛的內容都是我干的吩愧。 我是一名探鬼主播芋酌,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼雁佳!你這毒婦竟也來了脐帝?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤糖权,失蹤者是張志新(化名)和其女友劉穎堵腹,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體温兼,經...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年武契,在試婚紗的時候發(fā)現(xiàn)自己被綠了募判。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡咒唆,死狀恐怖届垫,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情全释,我是刑警寧澤装处,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站浸船,受9級特大地震影響妄迁,放射性物質發(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

推薦閱讀更多精彩內容