IOS－Animation_html/css_WEB-ITnose

Detailed explanation of iOS Animation

This article only explains the use of animation in iOS.
Animation is mainly divided into two categories: UIView animation and CoreAnimation animation.
UIView animation includes UIView property animation, UIViewBlock animation, and UIViewTransition animation.
CoreAnimation animation mainly passes CAAnimation and CALayer, commonly used ones are CABasicAnimation, CAKeyframeAnimation, CATransition, CAAnimationGroup.

UIView animation

UIView attribute animation

CGRect viewRect = CGRectMake(10,10,200,200);self.myView= [[UIView alloc] initWithFrame:viewRect];self.myView.backgroundColor = [UIColor whiteColor];[self.view addSubview:self.myView];//1 准备动画//参数1: 动画的作用, 任意字符串，用来区分多个动画, 参数二: 传递参数用 nil:OC中使用[UIView beginAnimations:@"changeSizeAndColor" context:nil];//在准备动画的时候可以设置动画的属性[UIView setAnimationDuration:0.7];[UIView setAnimationDelegate:self];[UIView setAnimationWillStartSelector:@selector(startAnimation)];[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];//动画的曲线[UIView setAnimationRepeatCount:2];[UIView setAnimationRepeatAutoreverses:YES];//动画往返执行, 必须设置动画的重复次数//2 修改view的属性, 可以同时修改多个属性 注意:不是所有的属性都可以修改的(只有frame, center, bounds, backgroundColor, alpha, transform 可以修改)self.myView.frame = CGRectMake(110, 100, 100, 100);self.myView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0 blue:arc4random() % 256 / 255.0 alpha:0.5];//3 提交并执行动画[UIView commitAnimations];

Block animation

The essence of Block animation is to encapsulate UIView animation

The first type

   [UIView animateWithDuration:2 animations:^{        self.myView.backgroundColor = [UIColor orangeColor];    }];

The second type

    [UIView animateWithDuration:2 animations:^{        self.myView.backgroundColor = [UIColor orangeColor];    } completion:^(BOOL finished) {        //finished判断动画是否完成        if (finished) {            NSLog(@"finished");        }    }];

The third type

 [UIView animateWithDuration:2 delay:1 options:UIViewAnimationOptionCurveEaseInOut animations:^{        // 设置要修改的View属性        self.myView.backgroundColor = [UIColor orangeColor];    } completion:^(BOOL finished) {        //finished判断动画是否完成        if (finished) {            NSLog(@"finished");        }    }];

The following are the AnimationOptionCurve parameters:

 UIViewAnimationOptionTransitionNone            = 0 << 20, // default    UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,    UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,    UIViewAnimationOptionTransitionCurlUp          = 3 << 20,    UIViewAnimationOptionTransitionCurlDown        = 4 << 20,    UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,    UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,    UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,

CoreAnimation animation

Core Animation is a very powerful set Animation processing API, using it can produce very gorgeous animation effects, and often get twice the result with half the effort. To use it, you need to add QuartzCore .framework and introduce the corresponding framework

CABasicAnimation basic animation

CABasicAnimation basic Animation does not actually modify the attribute value

Initialize the layer of UIView

 CGRect viewRect = CGRectMake(50,100,200,200);    self.myView= [[UIView alloc] initWithFrame:viewRect];    self.myView.backgroundColor = [UIColor whiteColor];    self.myView.layer.cornerRadius = 100;//设置圆角, 参数是内切圆的半径, 若想画一个圆, 前提是view必须是正方形, 参数应该是view边长的一半    self.myView.layer.borderWidth = 5;//设置描边的宽度    self.myView.layer.borderColor = [UIColor orangeColor].CGColor;//设置描边的颜色(UIView上的颜色使用的是UIColor, CALayer上使用的颜色是CGColor)    self.myView.layer.shadowOffset = CGSizeMake(50, 100);//设置阴影的偏移量 width影响水平偏移(正右负左), height影响垂直偏移(正下负上)    self.myView.layer.shadowColor = [UIColor redColor].CGColor;//阴影的偏移的颜色    self.myView.layer.shadowOpacity = 0.5;//阴影的不透明度, 取值范围(0 ~ 1), 默认是0, 就是透明的    [self.view addSubview:self.myView];

Animation method:

 //1 创建并指定要修改的属性    //    KeyPath:CAlayer的属性名, 不是所有的属性都可以, 只有在头文件中出现animatable的属性才可以, 可以修改属性的属性, 例如:bounds.size    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds"];    [basic setDuration:0.7];    //2 修改属性值    basic.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, self.myView.bounds.size.width, self.myView.bounds.size.height)];    basic.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)];    //3 添加动画    //key做区分动画用    [self.myView.layer addAnimation:basic forKey:@"changColor"];

CAKeyframeAnimation keyframe animation

Example 1, same animation as above

  //1 创建动画     CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"bounds"];     [keyFrame setDuration:2];     //2 修改属性     keyFrame.values = @[[NSValue valueWithCGRect:CGRectMake(0, 0, self.myView.bounds.size.width, self.myView.bounds.size.height)], [NSValue valueWithCGRect:CGRectMake(0, 0, 250, 250)], [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)]];    //keyTimes:值代表了出现动画的时刻, 值得范围是0~1, 值必须是递增的, keyTimes和values是一一对应的     keyFrame.keyTimes = @[@(0.4), @(0.6), @(1)];     //3 添加动画     [self.myView.layer addAnimation:keyFrame forKey:@"keyFrame"]; 

Example 2, change color

  CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];    [keyFrame setDuration:3];    keyFrame.values = @[(id)[UIColor redColor].CGColor, (id)[UIColor orangeColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor];    keyFrame.keyTimes = @[@(0.3), @(0.5), @(0.6), @(0.7), @(0.9)];    [self.myView.layer addAnimation:keyFrame forKey:nil];

CATransaction transition animation

  //1 创建    CATransition *transition = [CATransition animation];    [transition setDuration:2];    //2 设置过度样式    transition.type = kCATransitionReveal;//控制样式    transition.subtype = kCATransitionFromTop;//控制方向    //添加动画    [self.myView.layer addAnimation:transition forKey:nil];

CAAnimationGroup group animation

 //1 创建并指定要修改的属性    // KeyPath:CAlayer的属性名, 不是所有的属性都可以, 只有在头文件中出现animatable的属性才可以, 可以修改属性的属性, 例如:bounds.size    // CALayer    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds"];    [basic setDuration:2];    //2 修改属性值    basic.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, self.myView.bounds.size.width, self.myView.bounds.size.height)];    basic.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)];    CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];    [keyFrame setDuration:2];    keyFrame.values = @[(id)[UIColor redColor].CGColor, (id)[UIColor orangeColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor];    //keyTimes中的第一个值是0, 不能修改    keyFrame.keyTimes = @[@(0.3), @(0.5), @(0.6), @(0.7), @(0.9)];    // 创建    //当group动画的时长 > 组中所有动画的最长时长, 动画的时长以组中最长的时长为准    //当group动画的时长 < 组中所有动画的最长时长, 动画的时长以group的时长为准    //最合适: group的时长 = 组中所有动画的最长时长    CAAnimationGroup *group = [CAAnimationGroup animation];    [group setDuration:10];    //设置组动画    group.animations = @[basic, keyFrame];    //添加动画    [self.myView.layer addAnimation:group forKey:nil];

//**平移动画**CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];// 动画持续1秒anim.duration =1; //因为CGPoint是结构体，所以用NSValue包装成一个OC对象anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 50)];anim.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];//通过MyAnim可以取回相应的动画对象，比如用来中途取消动画[layer addAnimation:anim forKey:@"MyAnim"];//**缩放动画**CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];//没有设置fromValue说明当前状态作为初始值//宽度(width)变为原来的2倍，高度(height)变为原来的1.5倍anim.toValue = [NSValuevalueWithCATransform3D:CATransform3DMakeScale(2, 1.5, 1)];anim.duration = 1;[layer addAnimation:anim forKey:nil];/**/旋转动画**CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];//这里是以向量(1, 1, 0)为轴，旋转π/2弧度(90°)//如果只是在手机平面上旋转，就设置向量为(0, 0, 1)，即Z轴anim.toValue = [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 1, 1, 0)];anim.duration = 1;[layer addAnimation:anim forKey:nil];

Frame animation of UIImageView

 UIImageView可以让一系列的图片在特定的时间内按顺序显示 .

Related attribute analysis:

animationImages：要显示的图片(一个装着UIImage的NSArray) .animationDuration：完整地显示一次animationImages中的所有图片所需的时间 .animationRepeatCount：动画的执行次数(默认为0，代表无限循环) 

Related method analysis:

- (void)startAnimating; 开始动画 .- (void)stopAnimating;  停止动画 .- (BOOL)isAnimating;  是否正在运行动画.

Key content
Reference document
http://www.pocketdigi.com/20150105/1413.html