iOS开发UI篇—核心动画(转场动画和组动画)

一、转场动画简单介绍

CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点

UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果

属性解析:

type:动画过渡类型

subtype:动画过渡方向

startProgress:动画起点(在整体动画的百分比)

endProgress:动画终点(在整体动画的百分比)

二、转场动画代码示例

1.界面搭建

2.实现代码

#import "BWViewController.h"
@interface YYViewController ()
@property(nonatomic,assign) int index;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
- (IBAction)preOnClick:(UIButton *)sender;
- (IBAction)nextOnClick:(UIButton *)sender; @end
@implementation BWViewController
- (void)viewDidLoad
{[super viewDidLoad];self.index=1;
}
- (IBAction)preOnClick:(UIButton *)sender {      self.index--; 31 if (self.index<1) { 32 self.index=7; 33  } 34 self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]]; 35 36 //创建核心动画 37 CATransition *ca=[CATransition animation]; 38 //告诉要执行什么动画 39 //设置过度效果 40 ca.type=@"cube"; 41 //设置动画的过度方向(向左) 42 ca.subtype=kCATransitionFromLeft; 43 //设置动画的时间 44 ca.duration=2.0; 45 //添加动画 46  [self.iconView.layer addAnimation:ca forKey:nil]; 47 } 48 49 //下一张 50 - (IBAction)nextOnClick:(UIButton *)sender { 51 self.index++; 52 if (self.index>7) { 53 self.index=1; 54  } 55 self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]]; 56 57 //1.创建核心动画 58 CATransition *ca=[CATransition animation]; 59 60 //1.1告诉要执行什么动画 61 //1.2设置过度效果 62 ca.type=@"cube"; 63 //1.3设置动画的过度方向(向右) 64 ca.subtype=kCATransitionFromRight; 65 //1.4设置动画的时间 66 ca.duration=2.0; 67 //1.5设置动画的起点 68 ca.startProgress=0.5; 69 //1.6设置动画的终点 70 // ca.endProgress=0.5;//2.添加动画[self.iconView.layer addAnimation:ca forKey:nil];
}
@end

点击上一张,或者下一张的时候,展示对应的动画效果。

三、组动画简单说明

CAAnimation的子类,可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行

属性解析:

animations:用来保存一组动画对象的NSArray

默认情况下,一组动画对象是同时运行的,也可以通过设置动画对象的beginTime属性来更改动画的开始时间

四、分组动画代码示例

代码:

 1 #import "YYViewController.h"  2  3 @interface YYViewController ()  4 @property (weak, nonatomic) IBOutlet UIView *iconView;  5  6 @end  7  8 @implementation NJViewController  9 10 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 11 { 12 13 // 平移动画 14 CABasicAnimation *a1 = [CABasicAnimation animation]; 15 a1.keyPath = @"transform.translation.y"; 16 a1.toValue = @(100); 17 // 缩放动画 18 CABasicAnimation *a2 = [CABasicAnimation animation]; 19 a2.keyPath = @"transform.scale"; 20 a2.toValue = @(0.0); 21 // 旋转动画 22 CABasicAnimation *a3 = [CABasicAnimation animation]; 23 a3.keyPath = @"transform.rotation"; 24 a3.toValue = @(M_PI_2); 25 26 // 组动画 27 CAAnimationGroup *groupAnima = [CAAnimationGroup animation]; 28 29 groupAnima.animations = @[a1, a2, a3]; 30 31 //设置组动画的时间 32 groupAnima.duration = 2; 33 groupAnima.fillMode = kCAFillModeForwards; 34 groupAnima.removedOnCompletion = NO; 35 36  [self.iconView.layer addAnimation:groupAnima forKey:nil]; 37 } 38 39 @end

说明:平移-旋转-缩放作为一组动画一起执行。

执行效果:

iOS开发之核心转场动画相关推荐

  1. iOS开发 tabbar自定义转场动画

    1.小记 关于自定义转场动画,只要你理清他的"套路",你就可以随心所欲地自定义了. 大体思路就是:遵守对应的代理协议,然后设置对应的代理,实现代理方法,这个代理方法要返回的值就是你 ...

  2. iOS 开发之玩转专场动画

    有空了再造个轮子,先放个链接 WWDC 2013 Session笔记 - iOS7中的ViewController切换 几句代码快速集成自定义转场效果+ 全手势驱动 TransitionAnimati ...

  3. ios开发 方形到圆的动画_iOS利用UIBezierPath + CAAnimation实现路径动画效果

    前言 上次给大家介绍了iOS利用UIBezierPath + CAAnimation实现路径动画效果的相关内容,今天实现一个根据心跳路径实现一个路径动画,让某一视图沿着路径进行运动.. 效果图如下: ...

  4. (0073)iOS开发之核心动画高级技巧

    核心动画高级技巧丛书 https://zsisme.gitbooks.io/ios-/content/chapter6/careplicatorLayer.html

  5. ios开发 方形到圆的动画_画个圆动画,的两种实现。iOS 动画由很浅,入浅,当然是 Swift...

    方法一,使用 CAShapeLayer 和 UIBezierPath 加上 CABasicAnimation 有一个动画属性 strokeEnd 就算完 方法二,复杂一些.频繁调用 CALayer 的 ...

  6. IOS 开发-- 常用-- 核心代码

    网络请求 (包含block 和 delegate) 数据持久化技术 手势处理' XML数据解析 多线程实现 核心动画编程 地图定位功能 CoreData数据持久化技术 本地通知和推送通知 常用宏定义 ...

  7. ios开发 方形到圆的动画_3Blue1Brown 动画制作教程(1)--制作第一个自己的动画

    制作第一个自己的动画 前一篇详细介绍了 3Blue1Brown 的动画引擎在 Windows 10 64 位系统上,基于 Anaconda的配置方法,并且详细描述了在配置 3Blue1Brown 提供 ...

  8. ios开发 方形到圆的动画_ios – cornerRadius上的CGAffineTransformMakeScale动画圆形UIButton...

    尝试将动画部分放在控制器类中而不是在子类按钮类中. //in customButton.h file #import @interface customButton : UIButton - (id) ...

  9. ios开发 方形到圆的动画_使用UIBezierPath画个圆动画

    UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般U ...

最新文章

  1. 像“打游戏”一样用Numpy,试试?
  2. 难死金庸的考题(高中难度)
  3. java中Mark接口_JVM源码分析之Java对象头实现
  4. spring jms 消息_Spring JMS,消息自动转换,JMS模板
  5. OpenShift Express Web管理控制台:入门
  6. swfit-学习笔记(数组的使用)
  7. 使用CXF发布WebService服务简单实例
  8. 分治算法-最大子数组问题
  9. WordPress 5.0禁用古滕堡编辑器的方法
  10. asp.net支持多文件上传的服务器控件
  11. C#操作Win7/Win8的库、收藏夹
  12. 系统集成项目管理工程师知识点集锦
  13. 计算机三级权限管理方法,Serv―U 三级用户权限机制及配置一例
  14. ps一点等于多少厘米_ps像素和厘米换算(ps100像素等于多少厘米)
  15. Cisco ASA 的telnet设置
  16. 练习java文档ZoneId
  17. MAVEN5分钟入门
  18. 高德地图可视化2.0封装(飞线,圆点,热力图)
  19. WPS如何快速统计姓名个数
  20. AI语音机器人来袭,改变传统电销模式

热门文章

  1. 获取HTML查询的值
  2. 后台管理系统导出数据列表返回二进制数据,下载后为null
  3. Linux命令之反转文本rev
  4. 证考网好不好?用这些人背后的心酸史告诉你!
  5. JavaScript中的 inludes 和 indexOf 方法 | 判断字符串或数组中是否存在对应的元素| 相同点与不同点 | 代码详解
  6. dalek-cryptography/zkp——基于merlin的Schnorr零知识证明
  7. java中xsl用法_XSL-FO 简单使用方法(java xsl-fo xml)
  8. 怎样用迅捷PDF转换器删除PDF中的图片
  9. 2022什么蓝牙耳机好用?适合618入手的无线蓝牙耳机推荐
  10. 关于 J2Objc 编译静态库的一些问题记录