iOS动画效果

最新推荐文章于 2024-07-25 22:06:54 发布

fly_sky的天空

最新推荐文章于 2024-07-25 22:06:54 发布

阅读量914

点赞数

分类专栏： iOS ui 文章标签： iphone ios

本文链接：https://blog.csdn.net/flytomyskyone/article/details/25230629

版权

iOS 同时被 2 个专栏收录

101 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

iOS动画包括简易的动画效果，是把底层的CAAnimation做了一次完整的封装

UIView是简易的动画

// 属性动画（property animation）

具体操作步骤（注意事项，现在IOS已经不提倡使用下面方法，简易大家使用Block方法）

UIview可以使用动画的属性如下所示：

frame
bounds
center
transform
alpha
backgroundColor
contentStretch

 //   属性动画（property animation）
 [UIView beginAnimations:@"animation name" context:@"you parameter”];  // 开始动画（每个动画开始时执行的操作）

 [UIView setAnimationDelegate:self];  // 下面是代理中的两个方法 
 [UIView setAnimationDidStopSelector:@selector(animationStop)];
 [UIView setAnimationWillStartSelector:@selector(animationWillStart)];
  //  设置动画方式，并指出动画发生的位置


 [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:_animationView cache:YES]; 
 //  设置动画曲线，控制动画速度
 [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
 CGFloat centerX = arc4random() % 200; CGFloat centerY = arc4random() % 200; view.center = CGPointMake(centerX, centerY); [UIView commitAnimations]; // 执行动画（动画结束时执行时的操作）

// + (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState 设置动画是否做一次反向的执行



/*

+ beginAnimations:context:  设置开始动画
+ commitAnimations          执行动画
+ setAnimationStartDate:    开始时间
+ setAnimationsEnabled:     是否可用
+ setAnimationDelegate:     代理设置
+ setAnimationWillStartSelector:  代理方法1
+ setAnimationDidStopSelector:    代理方法2
+ setAnimationDuration:     持续时间
+ setAnimationDelay:        设置延迟
+ setAnimationCurve:        设置动画曲线，控制动画速度  
+ setAnimationRepeatCount:  设置重复次数
+ setAnimationRepeatAutoreverses:  是否反向执行一次
+ setAnimationBeginsFromCurrentState:  是否从当前状态开始执行
+ setAnimationTransition:forView:cache: 设置动画的效果
+ areAnimationsEnabled
*/




常用的Block方法有下面这些方法

[UIView animateWithDuration:0.3 animations:^{
          containerView.center = CGPointMake(100, 200);
      } completion:^(BOOL finished) {
          UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"哈哈" message:nil delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
          [alert show];
          [alert release];
      }];
把之前的写在begin和commit之间的代码写到block块中
 // transition

 过渡动画是指一大的动画是页面之间切换的动画
CoreAnimation
CAAnimation(公共父类)
包括三个子类
CAPropertyAnimation（属性动画）

CATransition (过渡动画)

CAAnimationGroup ()
iOS中的动画 是由Core Animation来支撑的

所有动画类都是以CA开头的

CAAnimation是所有动画的基类，提供了动画的基本属性和功能（比如动画时长等）

CAAnimation有三个子类：CAPropertyAnimation.CATransition,CAAnimationGroup



CAPropertyAnimation:属性动画，属性值改变发生的动画

CAPropertyAnimation有两个子类：CABasicAnimation和CAKeyframeAnimation

CABasicAnimation(基本动画，一般都是属性值从1变到值2产生的动画)

CAKeyframeAnimation(关键帧动画，一个关键帧动画，通常包含若干个不同类型的basicAnimation).

CATransition 过渡动画，通常是页面切换时，使用的动画

CAAnimation 允许一组动画同时执行，这些动画一般都是CAPropertyAnimation子类动画



让动画的层进行动画



先从基本的CABasicAnimation开始
定义一个CABasicAnimation，使用父类的方法
CABasicAnimation *anmination = [CABasicAnimation animationWithKeyPath:@“position"]; // 属性完全来自layel
关键参数path中必须是layel中支持动画的属性
layer中支持动画的属性主要有：
contents

contentsRect

contentsCenter

opacity

hidden

masksToBounds

doubleSided

cornerRadius

borderWidth

borderColor

backgroundColor

shadowOpacity

shadowRadius

shadowOffset

shadowColor

shadowPath

filters

compositingFilter

backgroundFilters

shouldRasterize

rasterizationScale

bounds

position

zPosition

anchorPoint

transform

sublayerTransform




使用方法：
   fromValue  property
   toValue  property
   byValue  property
从一种状态变化到另一种状态
参数类型是ID类型
示例：
CABasicAnimation *anmination = [CABasicAnimation animationWithKeyPath:@“position"]; // 属性完全来自layel
anmination.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
anmination.duration = 3;
anmination.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 400)];
containerView.layer addAnimation:anmination forKey:@"aa"];
containerView.center = CGPointMake(100, 400);
通过基本的视图功能改变视图的中心点坐标
CAKeyframeAnimation（keyframe关键帧动画）

   values  
   path  
   keyTimes  
   timingFunctions  
   calculationMode  
   rotationMode  // 决定是否该类动画沿着指定路径运动来匹配路径上的切线
   tensionValues
   continuityValues
   biasValues
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
    CGFloat centerX = containerView.center.x;
    keyFrameAnimation.duration = 0.03;
    keyFrameAnimation.values = @[
                                 [NSNumber numberWithFloat:centerX],
                                 [NSNumber numberWithFloat:centerX - 5],
                                 [NSNumber numberWithFloat:centerX + 5],
                                 [NSNumber numberWithFloat:centerX],
                                 [NSNumber numberWithFloat:centerX - 5],
                                 [NSNumber numberWithFloat:centerX + 5],
                                 [NSNumber numberWithFloat:centerX],
                                 [NSNumber numberWithFloat:centerX - 5],
                                 [NSNumber numberWithFloat:centerX + 5],
                                 [NSNumber numberWithFloat:centerX],
                                 ];
    [containerView.layer addAnimation:keyFrameAnimation forKey:@"shake"];
// 以上代码实现一个窗口震动效果





CATransition 过渡动画效果




//    NSString * const kCATransitionFade;
//    NSString * const kCATransitionMoveIn;
//    NSString * const kCATransitionPush;
//    NSString * const kCATransitionReveal;
    CATransition *caTranstion = [CATransition animation];
    //caTranstion.duration = 3;  // 持续时间
    //caTranstion.type = @"cube"; 
    //caTranstion.type = @"suckEffect";
    //caTranstion.type = @"push";
      caTranstion.type = @"oglFlip";
    //caTranstion.type = @"pageCurl";
    //caTranstion.type = @"rippleEffect";
//    NSString * const kCATransitionFromRight;
//    NSString * const kCATransitionFromLeft;
//    NSString * const kCATransitionFromTop;
//    NSString * const kCATransitionFromBottom;
    caTranstion.startProgress = 0.5; // 开始位置
    caTranstion.endProgress = 0.8;   // 结束位置
    // fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用. 
// 下面来讲各个fillMode的意义 
// kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态 
// kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态 
// kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态 
// kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.    caTranstion.fillMode = kCAFillModeForwards;  // 
    caTranstion.removedOnCompletion = NO;  // 
    caTranstion.subtype = kCATransitionFromLeft;
    [containerView.layer addAnimation:caTranstion forKey:@"transtion"];




CATransition 过渡动画效果

立方体、吸收、翻转、波纹、翻页、反翻页、镜头开、镜头关

transition.type 的类型可以有

淡化、推挤、揭开、覆盖

NSString * const kCATransitionFade;

NSString * const kCATransitionMoveIn;

NSString * const kCATransitionPush;

NSString * const kCATransitionReveal;
这四种，

transition.subtype 

也有四种

NSString * const kCATransitionFromRight;

NSString * const kCATransitionFromLeft;

NSString * const kCATransitionFromTop;

NSString * const kCATransitionFromBottom;