码迷,mamicode.com
首页 > 移动开发 > 详细

iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果

时间:2016-10-30 00:50:52      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:code   利用   添加   out   地址   view   使用   href   ati   

先说下基本动画部分

基本动画部分比较简单, 但能实现的动画效果也很局限

使用方法大致为:

#1. 创建原始UI或者画面

#2. 创建CABasicAnimation实例, 并设置keypart/duration/fromValue/toValue

#3. 设置动画最终停留的位置

#4. 将配置好的动画添加到layer层中

举个例子, 比如实现一个圆形从上往下移动, 上代码:

 1 //设置原始画面
 2     UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
 3     showView.layer.masksToBounds   = YES;
 4     showView.layer.cornerRadius    = 50.f;
 5     showView.layer.backgroundColor = [UIColor redColor].CGColor;
6 [self.view addSubview:showView]; 7 8 //创建基本动画 9 CABasicAnimation *basicAnimation = [CABasicAnimation animation]; 10 11 //设置属性 12 basicAnimation.keyPath = @"position"; 13 basicAnimation.duration = 4.0f; 14 basicAnimation.fromValue = [NSValue valueWithCGPoint:showView.center]; 15 basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(50, 300)]; 16 17 //设置动画结束位置 18 showView.center = CGPointMake(50, 300); 19 20 //添加动画到layer层 21 [showView.layer addAnimation:basicAnimation forKey:nil];

 

接下来说下关键帧动画

其实跟基本动画差不多, 只是能设置多个动画路径  使用方法也类似, 大致为

#1. 创建原始UI或者画面

#2. 创建CAKeyframeAnimation实例, 并设置keypart/duration/values 相比基本动画只能设置开始和结束点, 关键帧动画能添加多个动画路径点

#3. 设置动画最终停留的位置

#4. 将配置好的动画添加到layer层中

举个例子, 红色圆形左右晃动往下坠落 上代码:

 1 //设置原始画面
 2     UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
 3     showView.layer.masksToBounds   = YES;
 4     showView.layer.cornerRadius    = 50.f;
 5     showView.layer.backgroundColor = [UIColor redColor].CGColor;
 6     
 7     [self.view addSubview:showView];
 8     
 9     //创建关键帧动画
10     CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
11     
12     //设置动画属性
13     keyFrameAnimation.keyPath              = @"position";
14     keyFrameAnimation.duration             = 4.0f;
15     
16     keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
17                                  [NSValue valueWithCGPoint:CGPointMake(100, 100)],
18                                  [NSValue valueWithCGPoint:CGPointMake(50, 150)],
19                                  [NSValue valueWithCGPoint:CGPointMake(200, 200)]];
20     
21     //设置动画结束位置
22     showView.center = CGPointMake(200, 200);
23     
24     //添加动画到layer层
25     [showView.layer addAnimation:keyFrameAnimation forKey:nil];

 

最后是利用缓动函数配合关键帧动画实现比较复杂的物理性动画

先说说什么是缓动函数, 就是有高人写了一个库可以计算出模拟物理性动画(比如弹簧效果)所要的路径

Github地址: https://github.com/YouXianMing/EasingAnimation

具体有哪些动画效果可看库中的缓动函数查询表, 简单举个小球落地的效果

上代码:

 1 //设置原始画面
 2     UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
 3     showView.layer.masksToBounds   = YES;
 4     showView.layer.cornerRadius    = 50.f;
 5     showView.layer.backgroundColor = [UIColor redColor].CGColor;
 6     
 7     [self.view addSubview:showView];
 8     
 9     //创建关键帧动画
10     CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
11     
12     //设置动画属性
13     keyFrameAnimation.keyPath              = @"position";
14     keyFrameAnimation.duration             = 4.0f;
15     
    //关键处, 在这里使用的缓动函数计算点路径 16 keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center 17 toPoint:CGPointMake(50, 300) 18 func:BounceEaseOut 19 frameCount:4.0f * 30]; 20 21 //设置动画结束位置 22 showView.center = CGPointMake(50, 300); 23 24 //添加动画到layer层 25 [showView.layer addAnimation:keyFrameAnimation forKey:nil];

 

iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果

标签:code   利用   添加   out   地址   view   使用   href   ati   

原文地址:http://www.cnblogs.com/zhouxihi/p/6012135.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!