IOS-简单动画
iOS那些简单的动画(不定期更新)
关于 Core Animation
Core Animation是一组非常强大的动画处理API,使用它能做出很多优雅的动画效果。能用的动画类有4个子类:CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup
开发步骤:
初始化一个动画对象(CAAnimation)并设置一些动画相关属性.
添加动画对象到层(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动画
简单的呼吸和摇摆动画
简单的代码
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动画
-(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里了
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-简单动画的更多相关文章
- IOS 简单动画 首尾式动画
首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...
- iOS简单动画
知识架构 CALayer 图层类 CABasicAnimation 基础动画 CAKeyFrameAnimation 帧动画 CATransition 转场动画 CAAnimationGroup 动画 ...
- iOS 简单动画 序列帧动画
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ NSLog(@"旭宝爱吃 ...
- iOS 简单动画 block动画
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ UIView * view = [ ...
- iOS简单动画效果:闪烁、移动、旋转、路径、组合
#define kDegreesToRadian(x) (M_PI * (x) / 180.0) #define kRadianToDegrees(radian) (radian*180.0)/(M_ ...
- iOS CAReplicatorLayer 简单动画
代码地址如下:http://www.demodashi.com/demo/11601.html 写在最前面,最近在看学习的时候,偶然间发现一个没有用过的Layer,于是抽空研究了下,本来应该能提前记录 ...
- iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题
本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37 segmentfault-博客原文 http://segm ...
- IOS 核心动画之CAKeyframeAnimation - iBaby
- IOS 核心动画之CAKeyframeAnimation - 简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation ...
- Swift 实现iOS Animation动画教程
这是一篇翻译文章.原文出处:http://www.raywenderlich.com/95910/uiview-animation-swift-tutorial 动画( animation)是iOS用 ...
- iOS 开发--动画
在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的.我们总是追求更为酷炫的实现,如果足够仔细 ...
随机推荐
- VUE 2.0在IE中打开页面空白的原因及解决方法
前言 因为工作的需要,学习Vue2.0也有一段时间,最近在用Vue2.0的官方脚手架工具构建的项目,chrome中跑一直没有问题,但ie打开出现了bug: 问题 ie打开vue2.0项目空白,控制台报 ...
- PL/SQL Developer 登录 Oracle 12c和Win10下安装Oracle 11g
安装了Oracle 12c 后使用PL/SQL Developer怎么也不能连接到Oracle 12c.网上找一下,按照fcflying所说的操作成功了,所以做个笔记: 1)安装Oracle 12c ...
- PL/SQL编程—存储过程
SQL> create or replace procedure sp_pro3(name_in varchar2,id_in varchar2) is begin update mytest ...
- 初探Nginx服务器的整体架构
高度模块化的设计是 Nginx 的架构基础.Nginx 服务器被分解为多个模块,每个模块就是一个功能模块,只负责自身的功能,模块之间严格遵循“高内聚,低耦合”的原则. 核心模块 核心模块是 Nginx ...
- 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 ...
- 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} ...
- HCNP学习笔记之子网划分 VLSM CIDR
子网划分.VLSM可变长子网掩码.CIDR无类域间路由是学习网络知识或者说是学习路由知识所必备的,但很多朋友说这三者理论性太强了,不好掌握.本文将结合实例讲解子网划分的方法并对VLSM和CIDR进行简 ...
- JS动态事件绑定问题
今天搞一个连环套的动态选项展示,需要给下拉框动态绑定事件,谁知绑定中出现问题,总是执行第一次绑定的时间而后续绑定的事件没有被触发. //重写增加行方法 function initMainItem(gr ...
- 201453131《Java程序设计》实验三实验报告
实验三 敏捷开发与XP实践 实验内容 •下载并学会使用git上传代码: •与同学结对,相互下载并更改对方代码,并上传: 实验步骤 下载并用git上传代码: •1.下载并安装好git,在cmd中输入gi ...
- Ansible Playbooks 常用模块
官网链接:https://docs.ansible.com/ansible/latest/modules/list_of_all_modules.html ansible python module ...