写在前面
弄了下个人站...防止内容再次被锁定...所有东西都在这里面
welcome~
个人博客
先来看看效果吧
动画效果.gif
整个核心动画就不多做介绍了，随便一搜就能有很多很详细的解释，主要使用以下四种
CABasicAnimation //经典动画
CAKeyframeAnimation //关键帧动画
CATransition //转场动画
CAAnimationGroup //组动画
分析下本次demo的动画构成
主要动画是对音频控制面板的操作。
- 分解
- 看做两个view 一个是播放面板的小圆 一个是整个控制面板
- 播放面板的曲线运动 使用核心动画中的
CAKeyframeAnimation - 播放面板的变大缩小、控制面板消失出现 使用
CABasicAnimation并加入组动画序列CAAnimationGroup中 - 歌曲信息面板的消失和出现
bounds动画
对播放面板进行变大和变小，下面是变小，变大同理。
//startView变小
- (void)startViewChangeSmaller {
//设置一组动画
//变小
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 {
//设置贝塞尔曲线路径动画
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添加一个响应函数
//响应超出view的事件
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
return YES;
}
再试试看 超出部分的button也可以点击了！
