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必须是CGColorself.animationView.layer.backgroundColor = [UIColor greenColor].CGColor;
}

//给TF创建一个类目:

UITextField+Shake.h
#import <UIKit/UIKit.h>
@interface UITextField (Shake)
- (void)shake;
@endUITextField+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.修改透明度 alphaself.animationView.alpha = 0.0;//3.变形 tranform//<#CGAffineTransform t#> 之前形变量//旋转的角度180/4self.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.形变修改transformweakSelf.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.形变修改transformweakSelf.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;//transformweakSelf.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




本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/287211.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

IROS 2017上，这些厂商将会给我们展示什么样的黑科技？

IROS 2017上，这些厂商将会给我们展示什么样的黑科技？

相比起大多数AI学术会议&#xff0c;机器人领域最具影响力的学术会议IROS要“好看”得多。在这个学术会议上不仅会有AI和机器人领域最新的研究成果的论文展示&#xff0c;更有不少来自于科研机构和机器人领域公司机器人&#xff0c;向我们展示着展示机器之美。 比如&#xff0c…
阅读更多...
《看聊天记录都学不会C#？太菜了吧》（3）变量：我大哥呢？$：小弟我罩着你！

《看聊天记录都学不会C#？太菜了吧》（3）变量：我大哥呢？$：小弟我罩着你！

本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖了新手在学习中的一般问题。此系列将会持续更新&#xff0c;包括别的语言以及实战都将使用对话的方式进行教学&#xff0c;基础编程语言教学适用于零基础小白&#xff0c;之后实战课程也将会逐步更新。 若…
阅读更多...
linux block设备,Linux I/O Block--块设备的表示

linux block设备,Linux I/O Block--块设备的表示

块设备的分区信息由struct hd_struct结构描述&#xff0c;其中最重要的信息就是分区的起始扇区号和分区的大小。所有分区信息都一起保存在gendisk的part_tbl结构中&#xff0c;同时每个分区的block_device也可以通过bd_part来查询对应的分区信息。下图描述了block_device,gendi…
阅读更多...
【抢鲜版】ArcGIS 10.7手把手经典图文安装教程（附安装包下载地址）

【抢鲜版】ArcGIS 10.7手把手经典图文安装教程（附安装包下载地址）

软件更新真是个快，ArcGIS10.7已经亮相了！回头想想，作者追随ArcGIS已经有11个年头了（从ArcGIS 9.2到ArcGIS10.7，每个版本都抢鲜使用，先睹为快），本文演示10.7完美安装过程（附下载地址），亲测可用！ 目 录 一、系统环境要求 二、软件安装过程 三、软件下载地址 一、…
阅读更多...
Android之解决ViewPager2+PhotoView滑动图片花屏问题

Android之解决ViewPager2+PhotoView滑动图片花屏问题

1 问题 用ViewPager2和开源框架PhotoView(com.github.chrisbanes.photoview.PhotoView)组合实现滑动预览图片， 但是部分机型出现花屏效果 2 原因 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas…
阅读更多...
请来围观：WPF开发的微信客户端！！！

请来围观：WPF开发的微信客户端！！！

本文经原作者授权以原创方式二次分享&#xff0c;欢迎转载、分享。原文作者&#xff1a;眾尋原文链接&#xff1a;https://www.cnblogs.com/ZXdeveloper/p/6058206.html公司的同事离职了&#xff0c;接下来的日子可能会忙碌&#xff0c;能完善DEMO的时间也会少了&#xff0c;因…
阅读更多...
C#字符串、字节数组和内存流间的相互转换 - IT浪潮之巅

C#字符串、字节数组和内存流间的相互转换 - IT浪潮之巅

定义string变量为str,内存流变量为ms,比特数组为bt 1.字符串>比特数组 (1)byte[] btSystem.Text.Encoding.Default.GetBytes("字符串");(2)byte[] btConvert.FromBase64String("字符串"); 补充&#xff1a; System.Text.Encoding.Unicode.GetBytes(str)…
阅读更多...
ios-新浪微博-下拉刷新获取最新的消息(解决消息重复的问题)（五）

ios-新浪微博-下拉刷新获取最新的消息(解决消息重复的问题)（五）

2019独角兽企业重金招聘Python工程师标准>>> 第一步 在上一篇博文的基础上&#xff0c;利用新浪提供的since_id进行判断&#xff0c;在刷新监听的方法中&#xff0c;引入下面的代码 结果如下图 转载于:https://my.oschina.net/iOSliuhui/blog/520495
阅读更多...
sqlserver快速查找所有存储过程中是否包含某字符

sqlserver快速查找所有存储过程中是否包含某字符

--将text替换成你要查找的内容 select name from sysobjects o, syscomments s where o.id s.id and text like %text% and o.xtype P --将text替换成你要查找的内容 SELECT ROUTINE_NAME, ROUTINE_DEFINITION FROM INFORMATION_SCHEMA.ROUTINES WHERE ROUTINE_DEFINITION LI…
阅读更多...
《看聊天记录都学不会Python到游戏实战？太菜了吧》（7）我用函数写了个特洛伊木马

《看聊天记录都学不会Python到游戏实战？太菜了吧》（7）我用函数写了个特洛伊木马

本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖了新手在学习中的一般问题。此系列将会持续更新&#xff0c;包括别的语言以及实战都将使用对话的方式进行教学&#xff0c;基础编程语言教学适用于零基础小白&#xff0c;之后实战课程也将会逐步更新。 若…
阅读更多...
【经典回放】多种语言系列数据结构算法：队列（C版）

【经典回放】多种语言系列数据结构算法：队列（C版）

一、队列ADT以及C语言实现 1 队列的原理以及ADT分析 队列是说：把一些数据按先进先出来组织，如同日常生活中的排队过程。 队列最主要的操作是 <1> 数据加入队列；<2> 从队列中取出数据； 加入队列只能加入到队列尾巴上，而从队列中取出数据、则只能是取出队列…
阅读更多...
linux修改windows注册表,妙招：让修改的注册表立即生效的几种方法

linux修改windows注册表,妙招：让修改的注册表立即生效的几种方法

建站学院(LieHuo.Net)Windows文档Windows操作系统是全球最广泛&#xff0c;使用者最多的软件&#xff0c;熟悉Windows软件成了电脑操作者必不可少的功课&#xff0c;注册表作为“Windows的神经系统”非常重要&#xff0c;相信很多朋友都非常熟悉注册&#xff0c;在开始&#xf…
阅读更多...
Android之通过用户名和密码连接指定wifi热点(兼容Android9.0和Android10.0和addNetwork(wifiNewConfiguration)返回-1问题)

Android之通过用户名和密码连接指定wifi热点(兼容Android9.0和Android10.0和addNetwork(wifiNewConfiguration)返回-1问题)

1 需求 通过用户名和密码连接指定wifi热点，网上的代码乱七八糟，没几个可以用，我这边整理了下，测试了华为Android9.0和小米Android9.0和10.0和OPPO Android9.0 都没问题，直接回调结果就行。 2 问题 在Android10.0手机上 mWifiManager.addNetwork(wifiNewConfiguration);…
阅读更多...
hdu 4530(数学)

hdu 4530(数学)

小Q系列故事——大笨钟 Time Limit: 600/200 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Submission(s): 1458 Accepted Submission(s): 734 Problem Description饱尝情感苦恼的小Q本打算隐居一段时间&#xff0c;但仅仅在3月25号一天没有出现&am…
阅读更多...
WPF怎么做新手引导界面？

WPF怎么做新手引导界面？

本文经原作者授权以原创方式二次分享&#xff0c;欢迎转载、分享。原文作者&#xff1a;眾尋原文链接&#xff1a;https://www.cnblogs.com/ZXdeveloper/p/8391864.html这两天不忙&#xff0c;所以&#xff0c;做了一个简易的新手引导小Demo。因为&#xff0c;不是项目上应用&a…
阅读更多...
最全js表单验证

最全js表单验证

/***************************************************************** 表单校验工具类 (linjq) *****************************************************************//** * 判断整数num是否等于0 * * param num * return * author jiqinlin */function isIntEqZero(num){ r…
阅读更多...
《看聊天记录都学不会C语言？太菜了吧》（19）巩固开始，数字1、2、3、4能够组成多少个 3 位数的不同的排列

《看聊天记录都学不会C语言？太菜了吧》（19）巩固开始，数字1、2、3、4能够组成多少个 3 位数的不同的排列

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…
阅读更多...
阿里云MaxCompute香港开服 将引入更多人工智能服务

阿里云MaxCompute香港开服 将引入更多人工智能服务

9月18日&#xff0c;阿里云宣布大数据计算服务MaxCompute在香港正式开服。通过MaxCompute强大的计算能力&#xff0c;阿里云将为香港市场提供更多的人工智能产品&#xff0c;助力当地企业智能化升级。据了解&#xff0c;MaxCompute向用户提供了完善的数据导入方案以及多种经典的…
阅读更多...
【经典回放】多种语言系列数据结构算法：串（C版）

【经典回放】多种语言系列数据结构算法：串（C版）

我们这里说的串、就是标准的C语言的串，这点，和我们教材中另行定义的串并不一致。我们这里强调仅仅是按C语言的标准处理串，是因为你会按C语言的标准构造串、而不是按其它的模式定义的。在我们的教材上，串相当与一个： struct ElemType {char *str; }; 构造的顺序表、或者是…
阅读更多...
Android之解决开启热点后跳转页面不稳定问题

Android之解决开启热点后跳转页面不稳定问题

1 问题 在Android8.0版本以后，开启热点我们采用的下面这种方式，但是跳转页面后热点会断开，手机不能互相传文件了 权限说明：Android8.0需要位置权限和GPS权限，同时手机热点还不能是开启状态。 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {try {mWifiManag…
阅读更多...
最新文章

Copyright @ 2022~2023