iOS的几种动画使用
UIView动画
在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是UIView。
其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层
@property(nonatomic,readonly,retain) CALayer *layer;
当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示
换句话说,UIView本身不具备显示的功能,拥有显示功能的是它内部的图层。
/旋转45° PI/4
//CGAffineTransformMakeRotation(M_PI/4)
//相对于视图的最原始的状态 位置 旋转PI/4弧度
//imagebutton.transform = CGAffineTransformMakeRotation(M_PI/4);
//下面的函数是相对于当前视图的位置旋转 的弧度
imagebutton.transform = CGAffineTransformRotate(imagebutton.transform, M_PI/4);
(二)
//imagebutton.transform = CGAffineTransformMakeScale(1, 1);
/*
CGAffineTransformMakeScale(x,y);
//相对于原始视图的大小位置 发生变化
x 控制的 视图 水平 宽 x的绝对值 >1 放大 0 < x的绝对值 < 1 表示宽缩小
y 控制的 视图 竖直 高 y的绝对值 >1 放大 0 < y的绝对值 < 1 表示高缩小
x < 0 相对于 原始位置水平翻转
y < 0 相对于 原始位置竖直翻转
iOS方法类:CGAffineTransform的使用大概
CoreGraphics框架中的CGAffineTransform类可用于设定UIView的transform属性,控制视图的缩放、旋转和平移操作:
另称放射变换矩阵,可参照线性代数的矩阵实现方式0.0
这里附上的CGAffineTransform官方文档:
https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CGAffineTransform/index.html
总得来说,这个类中包含3张不同类型,分别使用如下3个方法创建数值;
1.CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)(平移:设置平移量)
2.CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)(缩放:设置缩放比例)仅通过设置缩放比例就可实现视图扑面而来和缩进频幕的效果。
3.CGAffineTransformMakeRotation(CGFloat angle)(旋转:设置旋转角度)
以上3个都是针对视图的原定最初位置的中心点为起始参照进行相应操作的,在操作结束之后可对设置量进行还原:
view.transform=CGAffineTransformIdentity;
另外还可以通过CGAffineTransformTranslate等方法对现有的transform进行进一步处理;
系统转场动画
CATransition *anima = [CATransition animation];
/*
* 动画的开始与结束的快慢,有五个预置分别为(下同):
* kCAMediaTimingFunctionLinear 线性,即匀速
* kCAMediaTimingFunctionEaseIn 先慢后快
* kCAMediaTimingFunctionEaseOut 先快后慢
* kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢
* kCAMediaTimingFunctionDefault 实际效果是动画中间比较快.
*/
[anima setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
//设置动画时间
anima.duration = 5;
//@"cube"- 立方体效果 @"suckEffect"-收缩效果,如一块布被抽走 @"oglFlip"-上下翻转效果 @"rippleEffect"-滴水效果 @"pageCurl"-向上翻一页 @"pageUnCurl"-向下翻一页 @"rotate" 旋转效果 @"cameraIrisHollowOpen" 相机镜头打开效果(不支持过渡方向) @"cameraIrisHollowClose" 相机镜头关上效果(不支持过渡方向)
//动画类型
//kCATransitionFade 新视图逐渐显示在屏幕上,旧视图逐渐淡化出视野
//kCATransitionMoveIn 新视图移动到旧视图上面,好像盖在上面
//kCATransitionPush 新视图将旧视图退出去
//kCATransitionReveal 将旧视图移开显示下面的新视图
anima.subtype = kCATransitionFromLeft;
anima.type = @"cameraIrisHollowOpen";//rotate
//anima.type = @"suckEffect";
//各种动画方向
/* 当type为@"rotate"(旋转)的时候,它也有几个对应的subtype,分别为:
* 90cw 逆时针旋转90°
* 90ccw 顺时针旋转90°
* 180cw 逆时针旋转180°
* 180ccw 顺时针旋转180°
*/
anima.subtype = @"90ccw";
//anima.subtype = @"fromLeft";
//放到 导航的view 的layer 两个子视图控制器的view 都在 导航的view上
[self.navigationController.view.layer addAnimation:anima forKey:nil];
===========================
day64动画
==========================
dash
http://github.ibireme.com/github/list/ios/
1.动画
开发过程当为了让应用更绚,就加入一些动画效果。
a.UIView
UIView的简单动画就可以满足我们应用开发。UIView支持的动画属性有,frame, center, bounds,transform, alpha. backgroundColor
b.CATransition
如果是将控制器内的子视图转场到另一个子视图,就将动画加入到视图控制器的图层
要令一个转场生效,要将动画添加到将要变为动画视图所附着的图层。例如在两个视图控制器之间进行转场,那就将动画添加到窗口的图层中
实现iOS漂亮的动画效果主要有两种方法,一种是UIView层面的,一种是使用CATransition进行更低层次的控制,
UIView,它只能用于一些简单的、常用的效果展现
动画类型
1.全局变量的形式
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
2.用字符串表示
fade 交叉淡化过渡
moveIn 新视图移到旧视图上面
push 新视图把旧视图推出去
reveal 将旧视图移开,显示下面的新视图
pageCurl 向上翻一页
pageUnCurl 向下翻一页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube 立方体效果
oglFlip 上下翻转效果
动画的速度/节奏
/*
kCAMediaTimingFunctionLinear 线性(匀速)
kCAMediaTimingFunctionEaseIn 先慢
kCAMediaTimingFunctionEaseOut 后慢
kCAMediaTimingFunctionEaseInEaseOut 先慢 后慢 中间快
kCAMediaTimingFunctionDefault 默认
*/
c.
核心 动画对象
隐式动画 &显示动画
//生成一个layer
self.layer = [CALayer layer];
self.layer.backgroundColor = [UIColor blueColor].CGColor;
//设置layer的中心点坐标
self.layer.position = CGPointMake(100, 100);
self.layer.bounds = CGRectMake(0, 0, 100, 100);
//设置圆角
self.layer.cornerRadius = 50;
//把layer添加到view的layer上
[self.view.layer addSublayer:self.layer];
//CATransaction 事务
[CATransaction begin];
//修改隐式动画的默认时间
[CATransaction setValue:[NSNumber numberWithFloat:10.0f] forKey:kCATransactionAnimationDuration];
//通过修改属性而产生的动画,叫做隐式动画
self.layer.position = CGPointMake(300, 200);
//
[CATransaction commit];
======================================
显示动画
//CATransaction 事务
[CATransaction begin];
//关闭隐士动画效果
[CATransaction setDisableActions:YES];
//实例化一个CABasicAnimation,
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
//fromValue 从那个地方开始
basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
//toValue 结束的位置
basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 200)];
//duration 指定持续时间
basicAnimation.duration = 2;
//通过addAnimation显示添加的指定的动画,显式动画
[self.layer addAnimation:basicAnimation forKey:@"base"];
self.layer.position = CGPointMake(300, 200);
//
[CATransaction commit];
=================================
基本动画
//@"opacity" 修改透明度
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
//透明度变换到0
animation.toValue = [NSNumber numberWithFloat:0.0f];
animation.duration = 2;
animation.repeatCount = 1;
[_myView.layer addAnimation:animation forKey:nil];
======================================================================
动画组
//旋转的动画
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//变换到那个值
rotationAnimation.toValue = [NSNumber numberWithFloat:(4 * M_PI)];
//周期
rotationAnimation.duration = 0.35f;
//节奏
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//比例动画
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//比例变换哪个值
scaleAnimation.toValue = [NSNumber numberWithFloat:0.0];//比例变换到0缩小到0
scaleAnimation.duration = 0.35f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//动画组
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
//设置动画时间
animationGroup.duration = 0.35f;
//动画结束后,自动重新开始
animationGroup.autoreverses = YES;
//重复次数
animationGroup.repeatCount = 2;
//把两个动画同时加到动画组中
animationGroup.animations =[NSArray arrayWithObjects:rotationAnimation, scaleAnimation, nil];
//增加动画 给 _myView动画组
//如果要同时增加两个动画 先放到动画组中
[_myView.layer addAnimation:animationGroup forKey:@"animationGroup"];
/*
CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
旋转效果。
angle:旋转的弧度,所以要把角度转换成弧度:角度 * M_PI / 180。
x:向X轴方向旋转。值范围-1 --- 1之间
y:向Y轴方向旋转。值范围-1 --- 1之间
z:向Z轴方向旋转。值范围-1 --- 1之间
*/
if (isTrans == NO) {
// 第一个参数是旋转角度,后面三个参数是xyz轴方向大小,起点位置由UIView的center
//90°
CATransform3D transform3d = CATransform3DMakeRotation(M_PI_2, 1, 1, 1);
//设置layer层动画
_view.layer.transform = transform3d;
isTrans = YES;
}else {
CATransform3D transform3d = CATransform3DMakeRotation(0, 1,1, 1);
//设置动画
_view.layer.transform = transform3d;
isTrans = NO;
}
//1.创建核心动画
CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
//1.创建核心动画
CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
//平移
keyAnima.keyPath=@"position";
//1.1告诉系统要执行什么动画
//创建一条路径
CGMutablePathRef path=CGPathCreateMutable();
//设置一个圆的路径
CGPathAddEllipseInRect(path, NULL, self.imageView.layer.frame);
keyAnima.path=path;
//有create就一定要有release
CGPathRelease(path);
//1.2设置动画执行完毕后,不删除动画
keyAnima.removedOnCompletion=NO;
//1.3设置保存动画的最新状态
keyAnima.fillMode=kCAFillModeForwards;
//1.4设置动画执行的时间
keyAnima.duration=5.0;
//1.5设置动画的节奏
keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//2.添加核心动画
[self.imageView.layer addAnimation:keyAnima forKey:@"CAKeyframeAnimation"];
/*
CAKeyframeAnimation是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值
属性解析:
values:就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
path:可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略
keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
说明:CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation
*/
使用过HMGLTransitions 第三放动画库
Pops
Canvas
41层和UIView的区别是什么?
答:两者最大的区别是,图层不会直接渲染到屏幕上,UIView是iOS系统中界面元素的基础,所有的界面元素都是继承自它。它本身完全是由CoreAnimation来实现的。它真正的绘图部分,是由一个CALayer类来管理。UIView本身更像是一个CALayer的管理器。一个UIView上可以有n个CALayer,每个layer显示一种东西,增强UIView的展现能力。