寫在前面
弄了下個人站...防止內(nèi)容再次被鎖定...所有東西都在這里面
welcome~
個人博客
先來看看效果吧
動畫效果.gif
整個核心動畫就不多做介紹了，隨便一搜就能有很多很詳細的解釋蝌蹂，主要使用以下四種
CABasicAnimation //經(jīng)典動畫
CAKeyframeAnimation //關(guān)鍵幀動畫
CATransition //轉(zhuǎn)場動畫
CAAnimationGroup //組動畫
分析下本次demo的動畫構(gòu)成
主要動畫是對音頻控制面板的操作龟糕。
- 分解
- 看做兩個view 一個是播放面板的小圓 一個是整個控制面板
- 播放面板的曲線運動 使用核心動畫中的
CAKeyframeAnimation - 播放面板的變大縮小洗出、控制面板消失出現(xiàn) 使用
CABasicAnimation并加入組動畫序列CAAnimationGroup中 - 歌曲信息面板的消失和出現(xiàn)
bounds動畫
對播放面板進行變大和變小静檬，下面是變小宽档，變大同理尉姨。
//startView變小
- (void)startViewChangeSmaller {
//設(shè)置一組動畫
//變小
CABasicAnimation *animation1 = [[CABasicAnimation alloc] init];
animation1.keyPath = @"bounds";
animation1.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, kStartRadius*2, kStartRadius*2)];
//變圓
CABasicAnimation *animation2 = [[CABasicAnimation alloc] init];
animation2.keyPath = @"cornerRadius";
animation2.toValue = [NSNumber numberWithFloat:kStartRadius];
//加入組動畫
CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
group.animations = @[animation1,animation2];
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
group.duration = kAnimationDuration;
group.delegate = self;
[self.startView.layer addAnimation:group forKey:nil];
self.layer.masksToBounds = YES;
[self performSelector:@selector(startViewBackAnimation) withObject:nil afterDelay:kAnimationDuration];
}
曲線動畫
這里我們使用的是貝塞爾曲線 先說代碼
//通過曲線路徑將startView移到中間
- (void)startViewToCenter {
//設(shè)置貝塞爾曲線路徑動畫
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:self.startView.center];
[path addCurveToPoint:CGPointMake(self.frame.size.width/2, self.frame.size.height/2 ) controlPoint1:CGPointMake(self.frame.size.width - kStartRadius, 0 ) controlPoint2:CGPointMake(self.frame.size.width * 1.3, self.frame.size.height/2)];
CAKeyframeAnimation *anmiation0 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
anmiation0.path = path.CGPath;
anmiation0.duration = kAnimationDuration;
anmiation0.removedOnCompletion = NO;
anmiation0.fillMode = kCAFillModeForwards;
[self.startView.layer addAnimation:anmiation0 forKey:nil];
[self performSelector:@selector(startViewChangeAnimation) withObject:nil afterDelay:1];
}
這里就要提到貝塞爾曲線的控制點了，這里有個簡單的方法去定義曲線吗冤。
- 打開PS 或者其他制圖軟件
- 使用鋼筆畫一條線又厉，通過拖動控制點（錨點）就能更改成曲線的樣子
-
二階的貝塞爾曲線是有2個控制點
二階貝塞爾曲線控制點.png -
切換鋼筆工具為錨點選擇工具，我們來拖動錨點椎瘟，讓曲線變成你想要的樣子
選擇錨點工具拖動錨點變換曲線.png - 知道控制點的大概位置這樣我們就能定義控制點坐標了覆致。
最后的小貼士：view超出superview的范圍了怎么辦？
很簡單給當前view添加一個響應(yīng)函數(shù)
//響應(yīng)超出view的事件
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
return YES;
}
再試試看 超出部分的button也可以點擊了肺蔚！
