文档章节

ios动画

黑伞将军
 黑伞将军
发布于 2015/09/16 21:12
字数 1594
阅读 99
收藏 0

一、动画的使用场景

     iOS中的动画是指⼀些视图上的过渡效果,合理利⽤动画能提⾼⽤户体验。

     动画的分类

二、UIView动画

2.1 属性:

frame:视图框架

center:视图位置

bounds:视图⼤⼩

backgroundColor:背景颜⾊

alpha:视图透明度

transform:视图转换

2.2 UIView动画的设置

⽅法名 作⽤

+ (void)setAnimationDuration:(NSTimeInterval)duration; 动画持续时间

+ (void)setAnimationDelay:(NSTimeInterval)delay; 动画开始前延时

+ (void)setAnimationCurve:(UIViewAnimationCurve)curve; 动画的速度曲线

+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; 动画反转

+ (void)setAnimationRepeatCount:(float)repeatCount; 动画反转的次数

+ (void)setAnimationDelegate:(id)delegate; 设置动画的代理

+ (void)setAnimationWillStartSelector:(SEL)selector; 动画开始的代理⽅法

+ (void)setAnimationDidStopSelector:(SEL)selector; 动画结束的代理⽅法

+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState; 动画从当前状态继续执⾏

三、CGAffineTransform2D仿射变换

     CGAffineTransform是结构体,表⽰⼀个矩阵,⽤于映射视图变 换。 缩放、旋转、偏移是仿射变换⽀持的最常⽤的操作。 缩放、缩放、偏移区分“基于上⼀次”和“基于初始” 。

3.1 CGAffineTransfrom的API

CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d,CGFloat tx, CGFloat ty) 通过设置矩阵值进⾏变换

CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) 放⼤缩⼩(基于初始)

CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle) 旋转(基于初始)

CGAffineTransform CGAffineTransformScale(CGAffineTransform t,CGFloat sx, CGFloat sy) 放⼤缩⼩(基于前⼀次变化)

CGAffineTransform CGAffineTransformRotate(CGAffineTransform t,CGFloat angle) 旋转(基于前⼀次变化)

3.2 Demo

#pragma mark -- 首尾动画 --
/*
 
语法形式:
 [UIView beginAnimations:
动画名 context:传给代理所执行的方法后面的参数];
 
 [UIView commitAnimations];
 
 */

- (
IBAction)didClickFirstBtn:(UIButton *)sender {
    [
UIView beginAnimations:@"第一个UIView动画" context:nil];
   
//动画和视图的属性设置
   
//1.设置动画的执行时间
    [
UIView setAnimationDuration:.1];
   
//2.设置动画重复次数
    [
UIView setAnimationRepeatCount:2];
    [
UIView setAnimationCurve:UIViewAnimationCurveLinear];
   
//从当前状态执行
    [
UIView setAnimationBeginsFromCurrentState:YES];
//    [UIView setAnimationRepeatAutoreverses:YES];
   
//设置视图相关属性
//    CGRect frame = self.view.frame;
//    frame.size.width /= 50;
//    frame.size.height /= 50;
//    self.myView.frame = frame;
   
self.myView.transform = CGAffineTransformRotate(self.myView.transform, M_PI);
//    self.myView.transform = CGAffineTransformMakeScale(0.5, 0.5);
   
self.myView.transform = CGAffineTransformScale(self.myView.transform, 2, 2);
    [
UIView commitAnimations];
   
}

#pragma mark -- BLOCK动画块 --
- (IBAction)didClickSecondBtn:(id)sender {
   
__block ViewController *VC = self;
    [
UIView animateWithDuration:0.5 animations:^{
       
//对动画和视图属性进行设置
//        [UIView setAnimationBeginsFromCurrentState:YES];
        [
UIView setAnimationRepeatCount:1.0];
       
//视图设置
        VC.
myView.transform = CGAffineTransformRotate(VC.myView.transform, M_PI_4);
        VC.
myView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
       
    }
completion:^(BOOL finished) {
       
//动画结束之后
        [
UIView animateWithDuration:0.5 animations:^{
            [
UIView setAnimationRepeatCount:1];
            VC.
myView.transform = CGAffineTransformScale(VC.myView.transform, 0.5, 0.5);
        }
completion:^(BOOL finished) {
           
        }];
    }];
}

#pragma mark -- UIView的转场动画 --
- (IBAction)transitionAnimation:(id)sender {
   
//1.view自身的转场动画
//    [UIView transitionWithView:self.myView duration:1 options:UIViewAnimationOptionTransitionCurlUp animations:^{
//        [UIView setAnimationRepeatCount:2];
//        self.myView.backgroundColor = [UIColor redColor];
//    } completion:^(BOOL finished) {
//       
//    }];
   
//2.两个view之间的转场动画
   
UIView *toView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    toView.
backgroundColor = [UIColor cyanColor];
    [
UIView transitionFromView:_myView toView:toView duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve completion:nil];
   
//self.myView从父视图上移除(销毁),同时添加toView

}


四、CALayer

4.1 UIView和CALayer的区别和联系

     CALayer负责绘制,提供UIView 需要展⽰的内容。不能交互。是UIView的⼀个readonly属性。

     UIView负责交互,显⽰CALayer绘制的内容。

4.2 CALayer的常⽤属性

属性 作⽤

CornerRadius 圆⾓

ShadowColor 阴影颜⾊

ShadowOffset 阴影偏移距离

ShadowRadius 阴影模糊程度

ShadowOpacity 阴影透明度

BorderWidth 描边粗细

BorderColor 描边颜⾊

anchorPoint 锚点

position 位置信息

transfrom 使CALayer产⽣3D空间内的平移、缩放、旋转等变化

4.3 anchorPoint和position

4.4 Demo

- (void)viewDidLoad {
    [
super viewDidLoad];
   
_imgView.backgroundColor = [UIColor redColor];
   
_imgView.layer.cornerRadius = 30;
//    _imgView.layer.masksToBounds = YES;   //如果设置masksToBounds=YES,设置阴影无效
   
_imgView.layer.anchorPoint = CGPointMake(0.5, 1);
   
_imgView.layer.shadowColor = [UIColor lightGrayColor].CGColor;
   
_imgView.layer.shadowOpacity = 1;
   
_imgView.layer.shadowOffset = CGSizeMake(10, 10);
   
_imgView.layer.shadowRadius = 1;
   
   
_myView.layer.cornerRadius = 50;
   
_myView.layer.shadowColor = [UIColor redColor].CGColor;
   
_myView.layer.shadowOpacity = 1;
   
_myView.layer.shadowOffset = CGSizeMake(10, 10);
   
#pragma mark -- 自定义CALayer --
    [self customLayer];
   
// Do any additional setup after loading the view, typically from a nib.
}

- (
void)customLayer
{
   
CALayer *myLayer = [CALayer layer];
   
//设置其位置和大小
    myLayer.
bounds = CGRectMake(0, 0, 50, 50);
    myLayer.
backgroundColor = [UIColor yellowColor].CGColor;
   
//设置锚点
    myLayer.
anchorPoint = CGPointMake(0, 0);
//    设置position(定位点,默认是(0,0)).锚点和position始终重合
    myLayer.
position = CGPointMake(50, 50);
   
//添加到父图层
    [
self.view.layer addSublayer:myLayer];
}
- (
IBAction)didClickBasic:(id)sender {
   
/*
    //1.
设置动画对象
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];
    //2.
告诉系统要执行的动画,影响的是哪个属性
    basicAnimation.keyPath = @"position";
    //3.
设置通过动画,layer从哪移动到哪
    basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 500)];
    //
取消回到原位置
    basicAnimation.removedOnCompletion = NO;
    //
设置保存动画的最新状态
    basicAnimation.fillMode = kCAFillModeForwards;
   
    basicAnimation.duration = 3.0;
   
    [self.imgView.layer addAnimation:basicAnimation forKey:@"basic"];
     */

   
   
//实现旋转
   
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform"];
    basic.
duration = 2.0;
    basic.
toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4*4, 1, 1, 1)];
    basic.
removedOnCompletion = NO;
    basic.
fillMode = kCAFillModeForwards;
    [
self.imgView.layer addAnimation:basic forKey:@"basic"];
   
//移除动画
//    [self.imgView.layer removeAnimationForKey:@"basic"];
   
}
#pragma mark -- IBActions -------
#pragma mark --
帧动画 --
- (IBAction)didClickKeyFrame:(id)sender {
   
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
   
//设置动画时间
    keyFrame.
duration = 0.1;
   
//设置imageView的抖动角度
   
//角度转换为弧度: 度数/180*M_PI
    keyFrame.
values = @[@(-4.0/180*M_PI),@(4.0/180*M_PI)];
    keyFrame.
repeatCount = 100;
    [
self.imgView.layer addAnimation:keyFrame forKey:@"keyFrame"];
}

#pragma mark -- CATransition转场动画 --
- (IBAction)didClickTransition:(id)sender {
   
//属性:
   
//type:设置动画过渡类型
   
//subType:动画过度的方向
   
//startProgress:动画起点
   
//endProgress:动画终点
   
self.index++;
   
self.index = _index%19 +1;
   
self.imgView.image = [UIImage imageNamed:[NSString stringWithFormat:@"image%d.jpg",self.index]];
   
   
CATransition *transition = [CATransition animation];
    transition.
type = @"cube";
    transition.
subtype = kCATransitionFromLeft;
    transition.
duration = 2;
    transition.
repeatCount = 10;
//    transition.startProgress = 0;
//    transition.endProgress = 1;

    [self.imgView.layer addAnimation:transition forKey:@"transition"]; 

}

五、CAAnimation动画

     CAAnimation是抽象类,通常使⽤它的⼦类实现动画效果。所有CAAnimation及其⼦类的对象都添加在View的layer上,例如: [view.layer addAnimation:animation forKey:nil];

5.1 给layer添加/移除CALayer动画

- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key;

- (void)removeAnimationForKey:(NSString *)key;

- (void)removeAllAnimations;

5.2 CAAnimation相关⼦类

CAPropertyAnimation也是⼀个抽象类 通常我们都使⽤它的两个⼦类:CABasicAnimation和 CAKeyFrameAnimation

5.2.1 CABasicAnimation

作⽤:基本layer动画,通过设定初始和结束值执⾏动画

+ (id)animationWithKeyPath:(NSString *)path; 系统提供的构造器⽅法

@property(copy) NSString *keyPath; 只能填写CALayer中能够做

动画的属性名

@property(retain) id fromValue; 起始值

@property(retain) id toValue; 结束值

@property(retain) id byValue; 相对值

5.2.2 CAKeyFrameAnimation

作⽤:关键帧动画,可以让你的view的layer按照预定轨迹做动画

⽅法名/属性名 作⽤

+ (id)animationWithKeyPath:(NSString *)path; 系统提供的构造器⽅法

@property CGPathRef path; 通过制定⼀个⾃⼰定义的path来让某⼀个物体按照

这个路径进⾏动画

@property(copy) NSArray *values; ⼀个数组,提供了⼀组关键帧的值, 当使⽤path的

时候 values的值⾃动被忽略。

@property(copy) NSArray *keyTimes; ⼀个数组,设置每⼀帧的时间,其成员必须是

NSNumber。设置详情查看API。

@property(copy) NSString *rotationMode; 设定关键帧中间的值是如何计算

5.3 CAAnimaitionGroup

     CAAnimationGroup只有⼀个数组属性,可以添加多个CAAnimation⼀起执⾏

5.3.1 CATrasition

     作⽤:layer的过渡动画

有两个主要属性:type(设置过渡动画的效果)和subType(设置过渡动画的⽅向)

5.4 DEMO

- (IBAction)didGroupAnimation:(id)sender {

    // 平移动画
   
CABasicAnimation *a1 = [CABasicAnimation animation];
    a1.
keyPath = @"transform.translation.y";
    a1.
toValue = @(100);
   
// 缩放动画
   
CABasicAnimation *a2 = [CABasicAnimation animation];
    a2.
keyPath = @"transform.scale";
    a2.
toValue = @(0.0);
   
// 旋转动画
   
CABasicAnimation *a3 = [CABasicAnimation animation];
    a3.
keyPath = @"transform.rotation";
    a3.
toValue = @(M_PI_2);
   
   
CAAnimationGroup *group = [CAAnimationGroup animation];
    group.
animations = @[a1, a2, a3];
    group.
fillMode = kCAFillModeForwards;
//    group.removedOnCompletion = NO;

    [self.imgView.layer addAnimation:group forKey:@"group"]; 

}


© 著作权归作者所有

上一篇: Core Data
黑伞将军
粉丝 1
博文 33
码字总数 34553
作品 0
张家口
程序员
私信 提问

暂无文章

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
51分钟前
4
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
53分钟前
7
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
55分钟前
4
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
今天
6
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
6
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部