前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Objective-C 使用核心动画CAAnimation实现动画先来看看效果吧Demo地址

Objective-C 使用核心动画CAAnimation实现动画先来看看效果吧Demo地址

作者头像
gwk_iOS
发布2018-08-23 11:00:08
8870
发布2018-08-23 11:00:08
举报
文章被收录于专栏:coding...coding...

写在前面 弄了下个人站...防止内容再次被锁定...所有东西都在这里面 welcome~ 个人博客

先来看看效果吧

动画效果.gif

整个核心动画就不多做介绍了,随便一搜就能有很多很详细的解释,主要使用以下四种

代码语言:javascript
复制
CABasicAnimation          //经典动画
CAKeyframeAnimation       //关键帧动画
CATransition              //转场动画
CAAnimationGroup          //组动画

分析下本次demo的动画构成

主要动画是对音频控制面板的操作。

  • 分解
    • 看做两个view 一个是播放面板的小圆 一个是整个控制面板
    • 播放面板的曲线运动 使用核心动画中的 CAKeyframeAnimation
    • 播放面板的变大缩小、控制面板消失出现 使用CABasicAnimation并加入组动画序列CAAnimationGroup
    • 歌曲信息面板的消失和出现

bounds动画 对播放面板进行变大和变小,下面是变小,变大同理。

代码语言:javascript
复制
//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];
}

曲线动画 这里我们使用的是贝塞尔曲线 先说代码

代码语言:javascript
复制
//通过曲线路径将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添加一个响应函数

代码语言:javascript
复制
//响应超出view的事件
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    return YES;
}

再试试看 超出部分的button也可以点击了!

Demo地址

https://github.com/gongxiaokai/CAAnimationDemo

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.12.20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 先来看看效果吧
    • 分析下本次demo的动画构成
      • 最后的小贴士:view超出superview的范围了怎么办?
  • Demo地址
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档