iOS那些简单的动画(不定期更新)

字数669 阅读1118 评论16 喜欢59

关于 Core Animation

Core Animation是一组非常强大的动画处理API,使用它能做出很多优雅的动画效果。能用的动画类有4个子类:CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup

开发步骤:

  1. 初始化一个动画对象(CAAnimation)并设置一些动画相关属性.

  2. 添加动画对象到层(CALayer)中,开始执行动画.

CALayer中很多属性都可以通过CAAnimation实现动画效果, 包括opacity, position, transform, bounds, contents等,具体可以在API文档中查找

通过调用CALayer的addAnimation:forKey:增加动画到层(CALayer)中,这样就能触发动画了.通过调用removeAnimationForKey:可以停止层中的动画.

注:Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.

创建动画时你可能用到的属性

属性 解读
Autoreverses 设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到开始的值,过渡平滑
Duration 设定开始值到结束值花费的时间。期间会被速度的属性所影响
RemovedOnCompletion 这个属性默认为 YES,在指定的时间段完成后,动画就自动的从层上移除了。
FillMode 这个属性一般和 RemovedOnCompletion 配合使用,保持动画状态。其中kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.此时将RemovedOnCompletion设为NO
Speed 默认的值为 1.0.如果你改变这个值为 2.0,动画会用 2 倍的速度播放。这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟即一半的持续时间。
RepeatCount 默认的是 0,动画只会播放一次。如果指定一个无限大的重复次数,使用 MAXFLOAT 。这个不应该和 repeatDration 属性一块使用
RepeatDuration 这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间用完。同上它不应该和 repeatCount 一起使用
FromValue 设置动画的初始值
ToValue 设置动画的到达值
TimingFunction 控制动画运行的节奏. kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉 kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开 kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地 kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。
BeginTime 可以用来设置动画延迟执行时间,若想延迟1s,就设置为CACurrentMediaTime()+1,CACurrentMediaTime()为图层的当前时间 

巧妙的运用这些可以属性实现很棒的动画效果,比如下面:用CABasicAnimation实现的动画

CABasicAnimation动画

简单的呼吸和摇摆动画

animation.gif

简单的代码

 1.呼吸动画
CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@"opacity"];
animation.fromValue = [NSNumber numberWithFloat:1.0f];
animation.toValue = [NSNumber numberWithFloat:0.0f];
animation.autoreverses = YES; //回退动画(动画可逆,即循环)
animation.duration = 1.0f;
animation.repeatCount = MAXFLOAT;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;//removedOnCompletion,fillMode配合使用保持动画完成效果
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[self.alphaTagButton.layer addAnimation:animation forKey:@"aAlpha"]; 2.摇摆动画
//设置旋转原点
self.sharkTagButton.layer.anchorPoint = CGPointMake(0.5, 0);
CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//角度转弧度(这里用1,-1简单处理一下)
rotationAnimation.toValue = [NSNumber numberWithFloat:1];
rotationAnimation.fromValue = [NSNumber numberWithFloat:-1];
rotationAnimation.duration = 1.0f;
rotationAnimation.repeatCount = MAXFLOAT;
rotationAnimation.removedOnCompletion = NO;
rotationAnimation.autoreverses = YES;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
rotationAnimation.fillMode = kCAFillModeForwards;
[self.sharkTagButton.layer addAnimation:rotationAnimation forKey:@"revItUpAnimation"];

陀螺仪&加速仪的动画

ps:好吧 这个属于乱入,和上面的摇摆动画差不多的效果,只是这个是手动的 哈哈

3、陀螺仪&加速仪的动画
self.motionManager = [[CMMotionManager alloc] init];
self.motionManager.deviceMotionUpdateInterval = 1.0f/100.0f; //1秒100次
self.sharkTagButton.layer.anchorPoint = CGPointMake(0.5, 0);
[self.motionManager startDeviceMotionUpdatesToQueue:[NSOperationQueue currentQueue] withHandler:^(CMDeviceMotion *motion, NSError *error) {
if(fabs(motion.attitude.roll)<1.0f)
{
[UIView animateWithDuration:0.6 animations:^{
self.sharkTagButton.layer.transform = CATransform3DMakeRotation(-(motion.attitude.roll), 0, 0, 1);
}];
}else if (fabs(motion.attitude.roll)<1.5f)
{
[UIView animateWithDuration:0.6 animations:^{
int s;
if (motion.attitude.roll>0)
{
s=-1;
}else
{
s = 1;
}
self.sharkTagButton.layer.transform = CATransform3DMakeRotation(s*M_PI_2, 0, 0, 1);
}];
}
if ((motion.attitude.pitch)<0)
{
[UIView animateWithDuration:0.6 animations:^{
self.sharkTagButton.layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);
}];
} }];

Demo地址:
https://github.com/yongliangP/CABasicAnimationDemo



CATransition之简单的转场动画

CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。

属性 解读 
type 动画过渡类型
subtype 动画过渡方向 
  • 常用动画类型:
type的值 解读 对应常量
fade 淡入淡出 kCATransitionFade
push 推挤 kCATransitionPush
reveal 揭开 kCATransitionReveal
moveIn 覆盖 kCATransitionMoveIn
cube 立方体 私有API
suckEffect 吮吸 私有API
oglFlip 翻转 私有API
rippleEffect 波纹 私有API
pageCurl 反翻页 私有API
cameraIrisHollowOpen 开镜头 私有API
cameraIrisHollowClose 关镜头 私有API

注:私有API只能通过字符串使用哈


  • 过渡方向参数:
subtype的值 解读 
kCATransitionFromRight 从右转场
kCATransitionFromLeft 从左转场
kCATransitionFromBottom 从下转场
kCATransitionFromTop 从上转场

简单的CATransition动画

CATransitionDemo2.gif
-(void)animationWithType:(NSString*)type
{ //- 创建一个转场动画:
CATransition *transition = [CATransition animation];
transition.repeatCount = 5; // - 确定动画类型:
transition.type = type; // - 确定子类型(方向等)
transition.subtype = kCATransitionFromLeft; // - 确定动画时间
transition.duration = 1; // - 添加动画
[self.imageView.layer addAnimation:transition forKey:nil]; }

使用时只用传你的想要的动画类型就好,私有API只能通过字符串使用哈。

[self animationWithType:self.dataArray[indexPath.row]];

DEMO地址:https://github.com/yongliangP/CATransitionDemo


---20160908更新


CAKeyframeAnimation

先看图,就是那个在跑的小圆球,为了方便,把动画集成在了一个Demo里了

ScreenShotDemo2.gif
  • 1 .简单介绍

    CAKeyframeAnimation是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值,是一种更灵活的动画方式。

  • 2 .属性介绍

属性 解读 
values NSArray对象,里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
path 可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略
keyTimes 可以为对应的关键帧指定对应的时间点,其取值范围为[0,1],keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
  • 3 .实现

    • 3.1 values方式实现
-(void)setUpCAKeyframeAnimationUseValues
{ CAKeyframeAnimation *animation = [CAKeyframeAnimation animation]; animation.keyPath = @"position"; NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50, 50)]; NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, 50)]; NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, kWindowHeight-50)]; NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(50, kWindowHeight-50)]; NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 50)]; animation.values = @[value1,value2,value3,value4,value5];
animation.repeatCount = MAXFLOAT; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; animation.duration = 6.0f; animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [self.keyButton.layer addAnimation:animation forKey:@"values"]; }
    • 3.2 path方式实现
-(void)setUpCAKeyframeAnimationUsePath
{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation]; animation.keyPath = @"position"; CGMutablePathRef path = CGPathCreateMutable(); //矩形线路
CGPathAddRect(path, NULL, CGRectMake(50,50, kWindowWidth - 100,kWindowHeight - 100)); animation.path=path; CGPathRelease(path); animation.repeatCount = MAXFLOAT; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; animation.duration = 10.0f; animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [self.keyButton.layer addAnimation:animation forKey:@"path"]; }
    • 3.3 keyTimes演示
-(void)setUpCAKeyframeAnimationUsekeyTimes
{ CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
// animation.keyPath = @"transform.translation.x";
animation.keyPath = @"position.x";
animation.values = @[@0, @20, @-20, @20, @0];
animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];
animation.duration = 0.5;
animation.additive = YES;
[self.sharkTagButton.layer addAnimation:animation forKey:@"keyTimes"]; }

附:关于keyPath你可能用到的属性

属性 解读 
transform.rotation.x 围绕x轴翻转。y,z同理 参数:角度
transform.rotation 默认围绕z轴
transform.scale.x x方向缩放。y,z同理
transform.scale 所有方向缩放
transform.translation.x x轴方向移动,参数:x轴上的坐标。y,z同理
transform.translation 移动到的点
zPosition 平面的位置
opacity 透明度 
backgroundColor 背景颜色 参数:颜色 (id)[[UIColor redColor] CGColor]
cornerRadius layer圆角
borderWidth 边框宽度
bounds 大小 参数:CGRect
contents 内容 参数:CGImage
contentsRect 可视内容 参数:CGRect 值是0~1之间的小数
position 位置,效果和transform.rotation差不多
shadowColor 阴影颜色
shadowOffset 阴影偏移
shadowOpacity 阴影透明度
shadowRadius 阴影角度

照例放Demo
Demo地址:
https://github.com/yongliangP/CABasicAnimationDemo

作者:iceMaple

原文链接:http://www.jianshu.com/p/a098f6e3617f

IOS-简单动画的更多相关文章

  1. IOS 简单动画 首尾式动画

    首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...

  2. iOS简单动画

    知识架构 CALayer 图层类 CABasicAnimation 基础动画 CAKeyFrameAnimation 帧动画 CATransition 转场动画 CAAnimationGroup 动画 ...

  3. iOS 简单动画 序列帧动画

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ NSLog(@"旭宝爱吃 ...

  4. iOS 简单动画 block动画

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ UIView * view = [ ...

  5. iOS简单动画效果:闪烁、移动、旋转、路径、组合

    #define kDegreesToRadian(x) (M_PI * (x) / 180.0) #define kRadianToDegrees(radian) (radian*180.0)/(M_ ...

  6. iOS CAReplicatorLayer 简单动画

    代码地址如下:http://www.demodashi.com/demo/11601.html 写在最前面,最近在看学习的时候,偶然间发现一个没有用过的Layer,于是抽空研究了下,本来应该能提前记录 ...

  7. iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

    本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37  segmentfault-博客原文  http://segm ...

  8. IOS 核心动画之CAKeyframeAnimation - iBaby

    - IOS 核心动画之CAKeyframeAnimation - 简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation ...

  9. Swift 实现iOS Animation动画教程

    这是一篇翻译文章.原文出处:http://www.raywenderlich.com/95910/uiview-animation-swift-tutorial 动画( animation)是iOS用 ...

  10. iOS 开发--动画

    在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的.我们总是追求更为酷炫的实现,如果足够仔细 ...

随机推荐

  1. VUE 2.0在IE中打开页面空白的原因及解决方法

    前言 因为工作的需要,学习Vue2.0也有一段时间,最近在用Vue2.0的官方脚手架工具构建的项目,chrome中跑一直没有问题,但ie打开出现了bug: 问题 ie打开vue2.0项目空白,控制台报 ...

  2. PL/SQL Developer 登录 Oracle 12c和Win10下安装Oracle 11g

    安装了Oracle 12c 后使用PL/SQL Developer怎么也不能连接到Oracle 12c.网上找一下,按照fcflying所说的操作成功了,所以做个笔记: 1)安装Oracle 12c ...

  3. PL/SQL编程—存储过程

    SQL> create or replace procedure sp_pro3(name_in varchar2,id_in varchar2) is begin update mytest ...

  4. 初探Nginx服务器的整体架构

    高度模块化的设计是 Nginx 的架构基础.Nginx 服务器被分解为多个模块,每个模块就是一个功能模块,只负责自身的功能,模块之间严格遵循“高内聚,低耦合”的原则. 核心模块 核心模块是 Nginx ...

  5. 4. Median of Two Sorted Arrays(2个有序数组的中位数)

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  6. ACM-ICPC 2018 沈阳赛区网络预赛 G. Spare Tire (容斥原理)

    可推出$a_n = n^2+n, $ 设\(S_n = \sum_{i=1}^{n} a_i\) 则 \(S_n = \frac{n(n+1)(2n+1)}{6} + \frac{n(n+1)}{2} ...

  7. HCNP学习笔记之子网划分 VLSM CIDR

    子网划分.VLSM可变长子网掩码.CIDR无类域间路由是学习网络知识或者说是学习路由知识所必备的,但很多朋友说这三者理论性太强了,不好掌握.本文将结合实例讲解子网划分的方法并对VLSM和CIDR进行简 ...

  8. JS动态事件绑定问题

    今天搞一个连环套的动态选项展示,需要给下拉框动态绑定事件,谁知绑定中出现问题,总是执行第一次绑定的时间而后续绑定的事件没有被触发. //重写增加行方法 function initMainItem(gr ...

  9. 201453131《Java程序设计》实验三实验报告

    实验三 敏捷开发与XP实践 实验内容 •下载并学会使用git上传代码: •与同学结对,相互下载并更改对方代码,并上传: 实验步骤 下载并用git上传代码: •1.下载并安装好git,在cmd中输入gi ...

  10. Ansible Playbooks 常用模块

    官网链接:https://docs.ansible.com/ansible/latest/modules/list_of_all_modules.html ansible python module ...