iOS中 Animation 动画大全 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博!
iOS开发者交流QQ群: 446310206
1.iOS中我们能看到的控件都是UIView的子类,比如UIButton UILabel UITextField UIImageView等等
2.UIView能够在屏幕的显示是因为在创建它的时候内部自动添加一个CALayer图层,通过这个图层在屏幕上显示的时候会调用一个drawRect: 的方法,完成绘图,才能在屏幕上显示
3.CALayer 本身就具有显示功能,但是它不能响应用户的交互事件,如果只是单纯的显示一个图形,此时你可以使用CALayer创建或者是使用UIView创建,但是如果这个图形想响应用户交互事件,必须使用UIView或者子类
动画知识框图如下:
#import "ViewController.h" #import "UITextField+Shake.h" @interface ViewController () @property (retain, nonatomic) IBOutlet UIImageView *balloon; @property (retain, nonatomic) IBOutlet UITextField *TF; @property (retain, nonatomic) IBOutlet UIButton *bounces; @property (retain, nonatomic) IBOutlet UIView *animationView; @property (retain, nonatomic) IBOutlet UIImageView *cloud; @end<span style="font-family: 'STHeiti Light';">@implementation ViewController</span>
- (void)viewDidLoad { [super viewDidLoad]; //取到当前视图控制器自带view的图层 CALayer *layer = self.view.layer; // UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; // button.layer //button的图层 //layer 的color必须是CGColor self.animationView.layer.backgroundColor = [UIColor greenColor].CGColor; }
//给TF创建一个类目:
UITextField+Shake.h #import <UIKit/UIKit.h> @interface UITextField (Shake) - (void)shake; @end UITextField+Shake.m #import "UITextField+Shake.h" @implementation UITextField (Shake) //震动的方法 - (void)shake{ CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position.x"]; keyFrame.values = @[@(self.center.x + 10),@(self.center.x),@(self.center.x - 10)]; keyFrame.repeatCount = 10; keyFrame.duration = 0.03; [self.layer addAnimation:keyFrame forKey:nil]; } @end
开始动画按钮点击事件
- (IBAction)handleAnimation:(UIButton *)sender { //UIView的属性动画 [self handlePropertyAnimation]; //UIView的属性动画 Block形式 [self handlePrepertyAnimationBlock]; //UIView的过渡动画 [self handleTrabsitionAnimation]; //CALayer动画 [self handleCALayer]; //CALayer 的基础动画 [self handleBasicAnimation]; //CALayer的关键帧动画 [self handleKeyFrameAnimation]; //UITextField 调用输入震动框方法 [self.TF shake]; //CALayer的过渡动画 [self handleLayerCATransactionAnimation]; //CAAinmationGroup 分组动画 [self handleAnimatonGroup]; }
每日更新关注:http://weibo.com/hanjunqiang 新浪微博!
//UIView的属性动画 可动画的属性 : frame center bounds alpha backgroundColor transfrom
//修改属性做动画,动画结束后属性修改的结果是真实的作用到动画的视图上,不能恢复到之前的样子
- (void)handlePropertyAnimation{ //iOS4.0之前必须把要修改的可动画属性写在begin 和 commit 之间 //开始动画 [UIView beginAnimations:nil context:nil]; //指定代理 动画的代理不需要遵循协议,因为此代理就没有制定协议 [UIView setAnimationDelegate:self]; //设置动画的持续时间 [UIView setAnimationDuration:3.0]; //设置动画的重复次数 给重复效果旋转效果立即消失 [UIView setAnimationRepeatCount:3.0]; //设置动画的反转效果 [UIView setAnimationRepeatAutoreverses:YES]; //设置动画的变化速度 [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; //如果要实现这个方法必须设置代理,此方法在动画结束后触发 [UIView setAnimationDidStopSelector:@selector(makeAnimationBack)]; //修改属性做动画 //1.center 修改中心点 CGPoint center = self.animationView.center; center.y += 10; self.animationView.center =center; //2.修改透明度 alpha self.animationView.alpha = 0.0; //3.变形 tranform //<#CGAffineTransform t#> 之前形变量 //旋转的角度180/4 self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, M_PI_4); self.animationView.transform = CGAffineTransformScale(self.animationView.transform, 0.5, 0.5); //提交动画 [UIView commitAnimations]; }
//恢复到视图之前的状态
- (void)makeAnimationBack{ // self.animationView.center = self.view.center; self.animationView.alpha = 1.0; //恢复到tranform最初状态,最初状态就在CGAffineTransformIdentity记录 self.animationView.transform = CGAffineTransformIdentity; } //UIView的属性动画 Block形式 - (void)handlePrepertyAnimationBlock{ //iOS4.0之后使用block的形式做动画 __block typeof(self)weakSelf = self; //1.block 的第一种形式 //01.动画的持续时间 // [UIView animateWithDuration:2 animations:^{ // //1.修改中心点 // CGPoint center = weakSelf.animationView.center; // center.y += 50; // weakSelf.animationView.center = center; // //2.透明度 // weakSelf.animationView.alpha = 0.0; // //3.变形 // weakSelf.animationView.transform = CGAffineTransformRotate(weakSelf.animationView.transform, M_PI_4); //}]; //2.block的第二种形式 [UIView animateWithDuration:2 animations:^{ //1.获得中心点 CGPoint center = weakSelf.animationView.center; //改变中心点 center.y += 50; weakSelf.animationView.center =center; //2.透明度 weakSelf.animationView.alpha = 0.0; //3.形变修改transform weakSelf.animationView.transform = CGAffineTransformScale(weakSelf.animationView.transform, 0.5, 0.2); } completion:^(BOOL finished) { //返回动画之前的状态 [weakSelf makeAnimationBack]; }]; //3.block的第三种形式 //01:持续时间 //02:动画执行的延迟时间 //03:设置动画的特效 //04:修好的动画属性 //05:动画执行结束后的block块 [UIView animateWithDuration:3 delay:1 options:UIViewAnimationOptionAllowAnimatedContent animations:^{ //1.获得中心点 CGPoint center = weakSelf.animationView.center; //改变中心点 center.y += 50; weakSelf.animationView.center =center; //2.透明度 weakSelf.animationView.alpha = 0.0; //3.形变修改transform weakSelf.animationView.transform = CGAffineTransformScale(weakSelf.animationView.transform, 0.5, 0.2); } completion:^(BOOL finished) { //返回动画之前的状态 [weakSelf makeAnimationBack]; }]; //block的第四种形式 //参数1:动画持续时间 //参数2:动画的延迟时间 //参数3:设置弹簧的强度 范围(0.0~1.0) //参数4:设置弹簧的速度 //参数5:动画效果 //参数6:改变动画的属性写在这里 //参数7:结束动画的时候调用的block [UIView animateWithDuration:2 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:500 options:UIViewAnimationOptionCurveEaseInOut animations:^{ CGPoint center = weakSelf.bounces.center; center.y += 10; weakSelf.bounces.center = center; //transform weakSelf.bounces.transform = CGAffineTransformScale(weakSelf.bounces.transform, 1.2, 1.2); } completion:^(BOOL finished) { CGPoint center = weakSelf.bounces.center; center.y -= 10; weakSelf.bounces.center = center; weakSelf.bounces.transform = CGAffineTransformIdentity; }]; }
每日更新关注:http://weibo.com/hanjunqiang 新浪微博!
//UIView的过渡动画
- (void)handleTrabsitionAnimation{ __block typeof(self)weakSelf = self; //01:对哪个视图添加过渡动画 //02:动画时常 //03:动画效果 [UIView transitionWithView:self.animationView duration:2 options:UIViewAnimationOptionAllowAnimatedContent animations:^{ weakSelf.animationView.transform = CGAffineTransformRotate(weakSelf.animationView.transform, M_PI_4); } completion:nil]; }
//CALayer动画,修改layer层的属性做动画并没有真实的作用到这个视图上,动画知识一种假象
- (void)handleCALayer{ //CALyer 动画就是对layer做动画 //边框的宽 self.animationView.layer.borderWidth = 10.0; //边框颜色 self.animationView.layer.borderColor = [UIColor redColor].CGColor; //切圆角 // self.animationView.layer.cornerRadius = 100; //取出layer多余的部分 // self.animationView.layer.masksToBounds = YES; //减掉layer多出的部分 // self.animationView.clipsToBounds = YES; //背景图片 self.animationView.layer.contents = (id)[UIImage imageNamed:@"WDGJ785Q{`CKL4J}1{_4{(Y.jpg"].CGImage; //视图一创建出来的时候 锚点 基准点 中心点三个点是重合的 //锚点 anchorPoint 决定layer层上的哪个点是position 锚点默认是(0.5,0.5),跟视图的中心点重合 self.animationView.layer.anchorPoint = CGPointMake(0.5, 0); self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, M_PI_4); //基准点 Position 决定当前视图的layer,在父视图的位置,它以父视图的坐标系为准 self.animationView.layer.position = CGPointMake(160, 184); }
//CALayer 的动画基类:CAAnimation
//CABasicAnimation 基础动画
- (void)handleBasicAnimation{ //CA动画是根据KVC的原理,就修改layer的属性,以达到做动画的效果 CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position.x"]; basic.fromValue = @(-80); basic.toValue = @(400); //设置动画持续的时间 basic.duration = 5.0; //设置动画重复的次数 basic.repeatCount = 1000; [self.cloud.layer addAnimation:basic forKey:nil]; }
//CAKeyFrameAnimation 关键帧动画
- (void)handleKeyFrameAnimation{ CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"]; CGPoint point1 = self.cloud.center; CGPoint point2 = CGPointMake(160, 100); CGPoint point3 = CGPointMake(270, self.cloud.center.y); //把一组要播放的动画需求的数值,按顺序放到数组中,此时动画执行的效果,就会按照数组中数据的顺序发生变化; //转化point结构体类型 转化成对象类型 NSValue *value1 = [NSValue valueWithCGPoint:point1]; NSValue *value2 = [NSValue valueWithCGPoint:point2]; NSValue *value3 = [NSValue valueWithCGPoint:point3]; keyFrame.repeatCount = 1000; keyFrame.duration = 15.0; keyFrame.values = @[value1,value2,value3,value1]; [self.cloud.layer addAnimation:keyFrame forKey:nil]; }
//CATransition CALayer 的过度动画
- (void)handleLayerCATransactionAnimation{ /* 各种动画效果 其中除了'fade', `moveIn', `push' , `reveal' ,其他属于似有的API(我是这么认为的,可以点进去看下注释). * ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用. * @"cube" 立方体翻滚效果 * @"moveIn" 新视图移到旧视图上面 * @"reveal" 显露效果(将旧视图移开,显示下面的新视图) * @"fade" 交叉淡化过渡(不支持过渡方向) (默认为此效果) * @"pageCurl" 向上翻一页 * @"pageUnCurl" 向下翻一页 * @"suckEffect" 收缩效果,类似系统最小化窗口时的神奇效果(不支持过渡方向) * @"rippleEffect" 滴水效果,(不支持过渡方向) * @"oglFlip" 上下左右翻转效果 * @"rotate" 旋转效果 * @"push" * @"cameraIrisHollowOpen" 相机镜头打开效果(不支持过渡方向) * @"cameraIrisHollowClose" 相机镜头关上效果(不支持过渡方向) */ //创建过渡动画对象 CATransition *transition = [CATransition animation]; //配置动画过渡的样式 transition.type = @"cameraIrisHollowClose"; //将过渡动画添加到layer上 [self.view.layer addAnimation:transition forKey:nil]; }
//CAAinmationGroup 分组动画
- (void)handleAnimatonGroup{ //1.创建第一个关键帧动画,给热气球一个运动轨迹 CAKeyframeAnimation *keyframePath = [CAKeyframeAnimation animationWithKeyPath:@"position"]; //贝塞尔曲线 //1.指定贝塞尔曲线的半径 CGFloat radius = [UIScreen mainScreen].bounds.size.height / 2.0; //01:圆心 //02:半径 //03:开始的角度 //04:结束的角度 //05:旋转方向 (YES表示顺时针 NO表示逆时针) UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, radius) radius:radius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES]; //将贝塞尔曲线作为运动轨迹 keyframePath.path = path.CGPath; //2.创建第二组关键帧动画,让热气球在运动的时候 由小--->大--->小 ; CAKeyframeAnimation *keyFrameScale = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"]; //通过一组数据修改热气球的大小 keyFrameScale.values = @[@1.0,@1.2,@1.4,@1.6,@1.8,@1.6,@1.4,@1.2,@1.0]; //创建动画分组对象 CAAnimationGroup *group = [CAAnimationGroup animation]; //将两个动画效果添加到分组动画中 group.animations = @[keyframePath,keyFrameScale]; group.duration = 8; group.repeatCount = 1000; [self.balloon.layer addAnimation:group forKey:nil]; }
最终效果:
每日更新关注:http://weibo.com/hanjunqiang 新浪微博!
iOS开发者交流QQ群: 446310206
iOS中 Animation 动画大全 韩俊强的博客的更多相关文章
- iOS中 流媒体播放和下载 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 iOS中关于流媒体的简介:介于下载本地播放与实时流媒体之间的一种播放形式,下载本地播放必须全部将文件下载完成后才能播 ...
- iOS中 扫描二维码/生成二维码详解 韩俊强的博客
最近大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang 新浪微博 指示根视图: se ...
- iOS中 扫描二维码/生成二维码具体解释 韩俊强的博客
近期大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang 新浪微博 指示根视图: se ...
- iOS中 HTTP/Socket/TCP/IP通信协议具体解释 韩俊强的博客
简介: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 // 3. 会话层 // 4. 传输层 // 5. 网络层 // 6. 数据链接层 / ...
- iOS中 HTTP/Socket/TCP/IP通信协议详解 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 简单介绍: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 ...
- iOS中 Realm的学习与使用 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博! 有问题或技术交流可以咨询!欢迎加入! 这篇直接搬了一份官方文档过来看的 由于之前没用markdown搞的乱七八糟的 ...
- iOS中 本地通知/本地通知详解 韩俊强的博客
布局如下:(重点讲本地通知) iOS开发者交流QQ群: 446310206 每日更新关注:http://weibo.com/hanjunqiang 新浪微博 Notification是智能手机应用编 ...
- iOS中崩溃调试的使用和技巧总结 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 在iOS开发调试过程中以及上线之后,程序经常会出现崩溃的问题.简单的崩溃还好说,复杂的崩溃就需要我们通过解析Cras ...
- iOS中 按钮和标题完美各种排列/完美教程 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博! 前言:最近常常用到按钮和相应标题的组合,当按钮设置图片加标题时,触发范围较小,不易触发,最重要的是还要调试偏移量, ...
随机推荐
- Elasticsearch 学习(一):入门
一.概念 Elasticsearch 是一个实时分布式搜索和分析引擎.它用于全文搜索.结构化搜索.分析以及将这三者混合使用. 维基百科.英国卫报.StackOverflow.Github 等公司都在使 ...
- linux 删除命令
rm * 文件名rm -r */ 文件夹rm -rf * 文件夹或文件名 -r 代表文件夹之下的都删除掉 -f 代表暴力删除,无需确认直接删完
- Linux pip安装使用
pip安装使用详解 pip类似RedHat里面的yum,安装Python包非常方便.本节详细介绍pip的安装.以及使用方法. 1.pip下载安装 1.1 pip下载 1 # wget " ...
- 微信小程序 发现之旅(一)—— 项目搭建与页面跳转
开发微信小程序需要注册一个小程序账号,具体流程可以参照官方教程: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 开通账户之后,在 “开发设置 ...
- C++框架_之Qt的开始部分_概述_安装_创建项目_快捷键等一系列注意细节
C++框架_之Qt的开始部分_概述_安装_创建项目_快捷键等一系列注意细节 1.Qt概述 1.1 什么是Qt Qt是一个跨平台的C++图形用户界面应用程序框架.它为应用程序开发者提供建立艺术级图形界面 ...
- 【python标准库模块二】random模块学习
random模块是用来生成随机数的模块 导入random模块 import random 生成一个0~1的随机数,浮点数 #随机生成一个0~1的随机数 print(random.random()) 生 ...
- mysql substr() 函数
mysql substr() 函数 用法:substr(string string,num start,num length); string为字符串:start为起始位置:length为长度. 注意 ...
- Docker部署Zabbix+Grafana监控
Docker部署Zabbix+Grafana监控 环境 centos 7 ; Docker 17.12.0-ce ; docker-compose version 1.20.1 2018-4-1 当前 ...
- mysql 数据类型别名参考
To facilitate the use of code written for SQL implementations from other vendors, MySQL maps data ty ...
- CDH 5.x 集群安装及卸载
上次写了CDH安装测试总结,由于那个博客篇幅略长, 但是主要集中在第二章,所以单独把CDH安装.卸载这块的内容拉出来在一篇记录一下. 一.搭建远程yum源 1.启动http服务: service ht ...