意一ineyee
意一ineyee

【UI】Animation

一、Core Animation
 1、属性动画
  1.1 基础动画
  1.2 关键帧动画
 2、过渡动画
 3、动画组
二、UIView Animation
 1、属性动画
  1.1 基础动画
  1.2 关键帧动画
 2、过渡动画
 3、约束动画需注意
三、Core Animation和UIView Animation怎么选择


一、Core Animation

iOS核心动画高级技巧

Core Animation，中文翻译为核心动画，它是一组非常强大的动画处理API，使用它能做出非常绚丽的动画效果，而且往往是事半功倍，也就是说使用少量的代码就可以实现非常强大的功能。

需要注意的是，Core Animation是直接作用在CALayer层的，并非UIView层；并且Core Animation的动画执行过程都是在子线程的，也就是说异步的，不会阻塞主线程，所以实际开发中我们要注意所做的事情是否真得是等动画结束了。

1、属性动画

所谓属性动画，就是作用于CALayer属性的动画，CALayer常见的可动画属性有：

  • 最普通的属性：backgroundColor、frame、bounds、position
  • 显隐性属性：opacity、hidden
  • 仿射变换和3D仿射变换属性：affineTransform（仿射变换）、transform（3D仿射变换）
  • 切圆角、设置边框和设置阴影属性：cornerRadius、masksToBounds、borderColor、borderWidth、shadowColor、shadowOffset、shadowOpacity、shadowRadius

UIView和CALayer的仿射变换属性主要就是两个用途：一和动画配合，二和手势配合。

实际开发中我们最常见的就是对仿射变换属性做动画了，比如平移动画我们会用仿射变换的CATransform3DMakeTranslation来实现、而非frame或position，比如缩放动画我们会用仿射变换的CATransform3DMakeScale来实现、而非frame或bounds，旋转会用仿射变换的CATransform3DMakeRotation来实现。

1.1 基础动画

基础动画是属性动画的一个子类，所以它也是作用于CALayer属性的动画。所谓基础动画，就是给定属性的一个开始值和一个结束值，再给定一个动画时间，那么在指定的时间内，该属性就会从开始值变化到结束值。

基础动画的使用很简单，只需要按下面7步来做就可以了：

  • 创建一个基础动画
  • 设置动画要作用的属性
  • 设置属性的初始值（也可以不设置，不设置的话默认就是创建CALayer时的值）
  • 设置属性的结束值
  • 设置动画时长、动画重复次数等配置
  • 如果我们想监听动画的执行过程，可以设置代理，通过代理方法来监听
  • 把这个动画添加到layer上，动画就会开始执行了

现在我们写个例子看看，给customLayer添加一个背景色变化（红色 -> 橙色）的动画和一个平移动画（(100, 100) -> (200, 200)）。

-----------ViewController.m-----------

#import "ViewController.h"

@interface ViewController () 

@property (nonatomic, strong) CALayer *customLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.customLayer = [[CALayer alloc] init];
    self.customLayer.backgroundColor = [UIColor redColor].CGColor;
    self.customLayer.frame = CGRectMake(100, 100, 100, 100);
    [self.view.layer addSublayer:self.customLayer];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 1、创建一个基础动画
    CABasicAnimation *basicAnimation = [[CABasicAnimation alloc] init];
    // 2、设置动画要作用的属性
    basicAnimation.keyPath = @"backgroundColor";
    // 3、设置属性的初始值
    basicAnimation.fromValue = (id)[UIColor redColor].CGColor;
    // 4、设置属性的结束值
    basicAnimation.toValue = (id)[UIColor orangeColor].CGColor;
    // 5、设置动画时长、动画重复次数等配置
    basicAnimation.duration = 3;
    basicAnimation.repeatCount = MAXFLOAT; // 0和1代表不重复，MAXFLOAT代表无限重复
    basicAnimation.autoreverses = YES; // 自动反转：动画重复执行时，下一次动画开始执行的状态要不要使用上一次动画的结束执行的状态，默认每一次动画开始执行时都是初始状态
    basicAnimation.removedOnCompletion = NO; // 动画执行结束后，不要移除动画
    basicAnimation.fillMode = kCAFillModeForwards; // 动画执行结束后，让动画保持最新的状态，而不要跳回初始的状态（前提是“动画执行结束后，不要移除动画”）
    // 6、如果我们想监听动画的执行过程，可以设置代理，通过代理方法来监听
    basicAnimation.delegate = self;
    // 7、把这个动画add到layer上，动画就会开始执行了
    [self.customLayer addAnimation:basicAnimation forKey:nil];
            
    CABasicAnimation *basicAnimation1 = [[CABasicAnimation alloc] init];
    basicAnimation1.keyPath = @"transform";
    basicAnimation1.fromValue = (id)[NSValue valueWithCATransform3D:(CATransform3DMakeTranslation(0, 0, 0))];
    basicAnimation1.toValue = (id)[NSValue valueWithCATransform3D:(CATransform3DMakeTranslation(100, 100, 0))];
    basicAnimation1.duration = 3;
    basicAnimation1.repeatCount = MAXFLOAT;
    basicAnimation1.autoreverses = YES;
    basicAnimation1.removedOnCompletion = NO;
    basicAnimation1.fillMode = kCAFillModeForwards;
    basicAnimation1.delegate = self;
    [self.customLayer addAnimation:basicAnimation1 forKey:nil];
}


#pragma mark - CAAnimationDelegate

- (void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"动画开始了");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    NSLog(@"动画结束了");
}

@end
1.2 关键帧动画

关键帧动画也是属性动画的一个子类，所以它也是作用于CALayer属性的动画。所谓关键帧动画，就是给定属性的若干个离散的值甚至是一条路径上无数个连续的值，而非仅仅给定一个开始值和一个结束值，当然这若干个离散的值或一条路径上无数个连续的值里肯定包含一个开始值和一个结束值，再给定一个动画时间，那么在指定的时间内，该属性就会从开始值历经其它值变化到结束值。

关键帧动画的使用也很简单，只需要按下面6步来做就可以了：

  • 创建一个关键帧动画
  • 设置动画要作用的属性
  • 设置属性的若干个离散的值（注意第一个关键帧不能省略，它不会默认为创建CALayer时的值，我们需要主动设置为创建CALayer时的值）或一条路径上无数个连续的值
  • 设置动画时长、动画重复次数等配置
  • 如果我们想监听动画的执行过程，可以设置代理，通过代理方法来监听
  • 把这个动画添加到layer上，动画就会开始执行了

现在我们写个例子看看，给customLayer添加一个背景色变化（红色 -> 橙色 -> 黄色 -> 绿色 -> 青色 -> 蓝色 -> 紫色）的动画和一个平移动画（沿着一条三次贝塞尔曲线）。

-----------ViewController.m-----------

#import "ViewController.h"

@interface ViewController () 

@property (nonatomic, strong) CALayer *customLayer;

@property (nonatomic, strong) UIBezierPath *path;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.customLayer = [[CALayer alloc] init];
    self.customLayer.backgroundColor = [UIColor redColor].CGColor;
    self.customLayer.frame = CGRectMake(100, 100, 100, 100);
    [self.view.layer addSublayer:self.customLayer];
    
    // 绘制一个三次贝塞尔曲线
    self.path = [[UIBezierPath alloc] init];
    [self.path moveToPoint:CGPointMake(150, 150)];
    [self.path addCurveToPoint:CGPointMake(150, 450) controlPoint1:CGPointMake(250, 250) controlPoint2:CGPointMake(50, 350)];
    // 通过shapelayer把贝塞尔曲线显示出来，
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    shapeLayer.path = self.path.CGPath;
    shapeLayer.strokeColor = [UIColor blackColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 1、创建一个关键帧动画
    CAKeyframeAnimation *keyframeAnimation = [[CAKeyframeAnimation alloc] init];
    // 2、设置动画要作用的属性
    keyframeAnimation.keyPath = @"backgroundColor";
    // 3、设置属性的若干个离散的值
    keyframeAnimation.values = @[
        (id)[UIColor redColor].CGColor, // 第一帧，开始值
        (id)[UIColor orangeColor].CGColor,
        (id)[UIColor yellowColor].CGColor,
        (id)[UIColor greenColor].CGColor,
        (id)[UIColor cyanColor].CGColor,
        (id)[UIColor blueColor].CGColor,
        (id)[UIColor purpleColor].CGColor, // 最后一帧，结束值
    ];
    // 4、设置动画时长、动画重复次数等配置
    keyframeAnimation.duration = 3;
    keyframeAnimation.removedOnCompletion = NO; // 动画执行结束后，不要移除动画
    keyframeAnimation.fillMode = kCAFillModeForwards; // 动画执行结束后，让动画保持最新的状态，而不要跳回初始的状态（前提是“动画执行结束后，不要移除动画”）
    // 5、如果我们想监听动画的执行过程，可以设置代理，通过代理方法来监听
    keyframeAnimation.delegate = self;
    // 6、把这个动画add到layer上，动画就会开始执行了
    [self.customLayer addAnimation:keyframeAnimation forKey:nil];
    
    CAKeyframeAnimation *keyframeAnimation1 = [[CAKeyframeAnimation alloc] init];
    keyframeAnimation1.keyPath = @"position";
    keyframeAnimation1.path = self.path.CGPath; // 设置属性的一条路径上无数个连续的值
    keyframeAnimation1.duration = 3;
    keyframeAnimation1.removedOnCompletion = NO;
    keyframeAnimation1.fillMode = kCAFillModeForwards;
    keyframeAnimation1.rotationMode = kCAAnimationRotateAuto; // 让customLayer根据曲线自动旋转方向
    keyframeAnimation1.delegate = self;
    [self.customLayer addAnimation:keyframeAnimation1 forKey:nil];
}


#pragma mark - CAAnimationDelegate

- (void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"动画开始了");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    NSLog(@"动画结束了");
}

@end

2、过渡动画

上面的属性动画是用来作用于CALayer的可动画属性的，而这里的过渡动画则是用来作用于CALayer的不可动画属性的，比如label.layer上显示的文本，imageView.layer上显示的图片等。所谓过渡动画，就是首先展示修改前的图层外观，然后设置修改后的图层外观，再给定一个动画类型和动画时间，那么在指定的时间内，图层外观就会通过一个过渡动画的效果改变到新的外观展示。

过渡动画的使用很简单，只需要按下面5步来做就可以了：

  • 创建一个过渡动画
  • 设置修改后的图层外观
  • 设置动画类型、子类型、时间曲线、动画时长、动画重复次数等配置
  • 如果我们想监听动画的执行过程，可以设置代理，通过代理方法来监听
  • 把这个动画添加到layer上，动画就会开始执行了

现在我们写个例子看看，给label.layer上显示的文本和imageView.layer上显示的图片的变化添加过渡动画。

-----------ViewController.m-----------

#import "ViewController.h"

@interface ViewController () 

@property (strong, nonatomic) UIImageView *imageView;
@property (strong, nonatomic) UILabel *label;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.imageView = [[UIImageView alloc] init];
    self.imageView.frame = CGRectMake(0, 20, self.view.bounds.size.width, self.view.bounds.size.width);
    // 首先展示修改前的图层外观
    self.imageView.image = [UIImage imageNamed:@"乔丹.png"];
    [self.view addSubview:self.imageView];

    self.label = [[UILabel alloc] init];
    self.label.frame = CGRectMake(0, self.view.bounds.size.width + 20, self.view.bounds.size.width, 30);
    // 首先展示修改前的图层外观
    self.label.text = @"乔丹";
    self.label.textColor = [UIColor blackColor];
    self.label.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:self.label];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 1、创建一个过渡动画
    CATransition *transition = [[CATransition alloc] init];

    // 3、设置动画类型、子类型、时间曲线、动画时长、动画重复次数等配置
    transition.type = @"pageCurl";
    transition.subtype = kCATransitionFromTop;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.duration = 3;
    
    // 2、设置修改后的图层外观
    self.imageView.image = [UIImage imageNamed:@"科比.png"];
    self.label.text = @"科比";

    // 4、如果我们想监听动画的执行过程，可以设置代理，通过代理方法来监听
    transition.delegate = self;

    // 5、把这个动画添加到layer上，动画就会开始执行了
    [self.imageView.layer addAnimation:transition forKey:nil];
    [self.label.layer addAnimation:transition forKey:nil];
}


#pragma mark - CAAnimationDelegate

- (void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"动画开始了");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    NSLog(@"动画结束了");
}

@end

过渡动画类型（type），用来控制过渡动画的效果，有下面九种：

fade // 淡入淡出的效果（没有方向）
push // 新图层从一侧推入、旧图层从一侧推出来展示新外观效果
moveIn // 新图层从一侧推入来展示新外观效果、但旧图层没有从一侧推出
reveal // 旧图层从一侧推出来展示新外观效果、但新图层没有从一侧推入
oglFlip // 正面和背面的二维翻转效果
cube // 立方体翻转效果
pageCurl // 向上翻页效果
pageUnCurl // 向下翻页效果
suckEffect // 收缩效果
rippleEffect // 水滴波纹效果（没有方向）

过渡动画子类型（subType），用来控制过渡动画的方向（type里除了fade和rippleEffect没有方向之外，其它效果都有方向），有下面四种：

kCATransitionFromTop // 从底部开始过渡动画
kCATransitionFromLeft // 从左侧开始过渡动画
kCATransitionFromBottom // 从顶部开始过渡动画
kCATransitionFromRight // 从右侧开始过渡动画

过渡动画时间曲线（timingFunction），用来控制动画的节奏，有下面四种：

kCAMediaTimingFunctionEaseInEaseOut // 动画慢进，逐渐加快，逐渐减慢，慢出
kCAMediaTimingFunctionEaseIn // 动画慢进，逐渐加快
kCAMediaTimingFunctionEaseOut // 动画逐渐减慢，慢出
kCAMediaTimingFunctionLinear // 动画匀速

3、动画组

动画组没什么好说的，就像它的名字一样，它可以把多个属性动画、过渡动画给组合起来打包使用。比如上面关键帧动画的例子，我们创建了一个改变背景色的动画和一个平移动画，然后把它们分别添加了在CALayer身上，但是那俩动画明明就有很多一模一样的设置，重复写起来比较繁琐，这时我们就可以用动画组来简化一下代码。

#import "ViewController.h"

@interface ViewController () 

@property (nonatomic, strong) CALayer *customLayer;

@property (nonatomic, strong) UIBezierPath *path;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.customLayer = [[CALayer alloc] init];
    self.customLayer.backgroundColor = [UIColor redColor].CGColor;
    self.customLayer.frame = CGRectMake(100, 100, 100, 100);
    [self.view.layer addSublayer:self.customLayer];
    
    // 绘制一个三次贝塞尔曲线
    self.path = [[UIBezierPath alloc] init];
    [self.path moveToPoint:CGPointMake(150, 150)];
    [self.path addCurveToPoint:CGPointMake(150, 450) controlPoint1:CGPointMake(250, 250) controlPoint2:CGPointMake(50, 350)];
    // 通过shapelayer把贝塞尔曲线显示出来，
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    shapeLayer.path = self.path.CGPath;
    shapeLayer.strokeColor = [UIColor blackColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    CAKeyframeAnimation *keyframeAnimation = [[CAKeyframeAnimation alloc] init];
    keyframeAnimation.keyPath = @"backgroundColor";
    keyframeAnimation.values = @[
        (id)[UIColor redColor].CGColor,
        (id)[UIColor orangeColor].CGColor,
        (id)[UIColor yellowColor].CGColor,
        (id)[UIColor greenColor].CGColor,
        (id)[UIColor cyanColor].CGColor,
        (id)[UIColor blueColor].CGColor,
        (id)[UIColor purpleColor].CGColor,
    ];

    CAKeyframeAnimation *keyframeAnimation1 = [[CAKeyframeAnimation alloc] init];
    keyframeAnimation1.keyPath = @"position";
    keyframeAnimation1.path = self.path.CGPath;
    
    // 动画组
    CAAnimationGroup *animationGroup = [[CAAnimationGroup alloc] init];
    animationGroup.animations = @[keyframeAnimation, keyframeAnimation1];
    animationGroup.duration = 3;
    animationGroup.removedOnCompletion = NO;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.delegate = self;
    [self.customLayer addAnimation:animationGroup forKey:nil];
}


#pragma mark - CAAnimationDelegate

- (void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"动画开始了");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    NSLog(@"动画结束了");
}

@end


二、UIView Animation

实际开发中，我们用的最多的还是UIView而非CALayer，所以苹果又在UIKit框架里提供了UIView Animation，这就使得我们可以直接面向UIView来做动画了，而且API也比Core Animation简洁多了。

UIView Animation是作用在UIView层的，是对Core Animation的一一封装。

1、属性动画

所谓属性动画，就是作用于UIView属性的动画，UIView常见的可动画属性有：

  • 最普通的属性：backgroundColor、frame、bounds、center
  • 显隐性属性：alpha（注意hidden属性不支持）
  • 仿射变换属性：transform

UIView和CALayer的仿射变换属性主要就是两个用途：一和动画配合，二和手势配合。

实际开发中我们最常见的就是对仿射变换属性做动画了，比如平移动画我们会用仿射变换的CGAffineTransformMakeTranslation来实现、而非frame或center，比如缩放动画我们会用仿射变换的CGAffineTransformMakeScale来实现、而非frame或bounds，旋转会用仿射变换的CGAffineTransformMakeRotation来实现。

1.1 基础动画

基础动画的API一共有四个：

  • 最简单的
[UIView animateWithDuration: // 动画时长
                 animations:^{
                     // 要改变的属性
                 }];
  • 带动画完成回调的
[UIView animateWithDuration: // 动画时长
                 animations:^{
                     // 要改变的属性
                 } completion:^(BOOL finished) {
                     // 动画完成的回调
                 }];
  • 可设置延迟执行和自定义动画效果的
[UIView animateWithDuration: // 动画时长
                      delay: // 延迟多长时间后开始执行动画
                    options: // 可自定义动画效果，来替换掉系统默认的平滑效果
                 animations:^{
                     // 要改变的属性
                 } completion:^(BOOL finished) {
                     // 动画完成的回调
                 }];
  • 弹性动画，是指在改变属性的时候，属性值会在目标值附近摆动，类似弹簧那种的弹性动画
[UIView animateWithDuration: // 动画时长
                      delay: // 延迟多长时间后开始执行动画
     usingSpringWithDamping: // 弹性效果的阻尼：范围0~1，数值越小弹性效果越明显，震得越久才能停下来
      initialSpringVelocity: // 弹性效果的初始速度：数值越大开始弹性动画时初始速度越快
                    options: // 可自定义动画效果，来替换掉系统默认的平滑效果
                 animations:^{
                     // 要改变的属性
                 } completion:^(BOOL finished) {
                     // 动画完成的回调
                 }];

options（UIViewAnimationOptions）：

UIViewAnimationOptionTransitionNone // 动画效果：不使用动画
UIViewAnimationOptionTransitionCrossDissolve // 动画效果：淡入淡出
UIViewAnimationOptionTransitionFlipFromTop // 动画效果：正面和背面的二维翻转，从上向下翻转
UIViewAnimationOptionTransitionFlipFromLeft // 动画效果：正面和背面的二维翻转，从左向右翻转
UIViewAnimationOptionTransitionFlipFromBottom // 动画效果：正面和背面的二维翻转，从下向上翻转
UIViewAnimationOptionTransitionFlipFromRight // 动画效果：正面和背面的二维翻转，从右向左翻转
UIViewAnimationOptionTransitionCurlUp // 动画效果：翻页，从下往上翻页
UIViewAnimationOptionTransitionCurlDown // 动画效果：翻页，从上往下翻页

UIViewAnimationOptionCurveEaseInOut // 动画的缓冲曲线：动画慢进，逐渐加快，逐渐减慢，慢出（默认值）
UIViewAnimationOptionCurveEaseIn // 动画的缓冲曲线：动画慢进，逐渐加快
UIViewAnimationOptionCurveEaseOut // 动画的缓冲曲线：动画逐渐减慢，慢出
UIViewAnimationOptionCurveLinear // 动画的缓冲曲线：动画匀速

UIViewAnimationOptionRepeat // 重复执行动画
UIViewAnimationOptionAllowUserInteraction // 执行动画期间，开启view的用户交互

UIViewAnimationOptionAutoreverse // 执行动画回路
UIViewAnimationOptionLayoutSubviews // 执行动画时布局子控件
UIViewAnimationOptionAllowAnimatedContent // 执行动画时重绘视图
UIViewAnimationOptionBeginFromCurrentState // 从当前状态开始执行动画
UIViewAnimationOptionShowHideTransitionViews // 显示视图时显示或隐藏而不是移除或添加
UIViewAnimationOptionOverrideInheritedOptions // 不继承父动画设置
UIViewAnimationOptionOverrideInheritedCurve // 忽略嵌套动画的曲线设置
UIViewAnimationOptionOverrideInheritedDuration // 忽略嵌套动画的执行时间设置

对比上面Core Animation的例子，现在我们直接写个例子看看，给customView添加一个背景色变化（红色 -> 橙色）的动画和一个平移动画（(100, 100) -> (200, 200)）。

-----------ViewController.m-----------

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIView *customView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.customView = [[UIView alloc] init];
    self.customView.backgroundColor = [UIColor redColor];
    self.customView.frame = CGRectMake(100, 100, 100, 100);
    [self.view addSubview:self.customView];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [UIView animateWithDuration:3 animations:^{
        self.customView.backgroundColor = [UIColor orangeColor];
    }];
    
    [UIView animateWithDuration:3 animations:^{
        self.customView.transform = CGAffineTransformMakeTranslation(100, 100);
    }];
}

@end
1.2 关键帧动画

需要注意的是UIView Animation的关键帧动画只能给属性设置若干个离散的值，而不能像Core Animation的关键帧动画那样还能给属性设置一条路径上无数个连续的值。关键帧动画的API一共有两个：

  • 添加关键帧动画
[UIView animateKeyframesWithDuration: // 动画时长
                               delay: // 延迟多长时间后开始执行动画
                             options: // 可自定义动画效果，来替换掉系统默认的平滑效果
                          animations:^{
                              // 添加关键帧
                          } completion:^(BOOL finished) {
                              // 动画完成的回调
                          }];

options（UIViewKeyframeAnimationOptions）：

UIViewKeyframeAnimationOptionCalculationModeLinear // 运算模式：连续，默认
UIViewKeyframeAnimationOptionCalculationModeDiscrete // 运算模式：离散
UIViewKeyframeAnimationOptionCalculationModePaced // 运算模式：均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic // 运算模式：平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced // 运算模式：平滑均匀

UIViewKeyframeAnimationOptionRepeat = UIViewAnimationOptionRepeat // 重复执行动画
UIViewKeyframeAnimationOptionAllowUserInteraction = UIViewAnimationOptionAllowUserInteraction // 执行动画期间，开启view的用户交互

UIViewKeyframeAnimationOptionAutoreverse = UIViewAnimationOptionAutoreverse // 执行动画回路
UIViewKeyframeAnimationOptionLayoutSubviews = UIViewAnimationOptionLayoutSubviews // 执行动画时布局子控件
UIViewKeyframeAnimationOptionBeginFromCurrentState = UIViewAnimationOptionBeginFromCurrentState // 从当前状态开始执行动画
UIViewKeyframeAnimationOptionOverrideInheritedOptions  = UIViewAnimationOptionOverrideInheritedOptions // 不继承父动画设置
UIViewKeyframeAnimationOptionOverrideInheritedDuration = UIViewAnimationOptionOverrideInheritedDuration // 忽略嵌套动画的执行时间设置
  • 添加关键帧
[UIView addKeyframeWithRelativeStartTime: // 这一帧动画开始的时间点（占总时间的比例）
                        relativeDuration: // 这一帧动画的动画时长（占总时间的比例）
                              animations:^{
                                  // 要改变的属性
                              }];

对比上面Core Animation的例子，现在我们直接写个例子看看，给customLayer添加一个背景色变化（红色 -> 橙色 -> 黄色 -> 绿色 -> 青色 -> 蓝色 -> 紫色）的动画。

-----------ViewController.m-----------

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIView *customView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.customView = [[UIView alloc] init];
    self.customView.backgroundColor = [UIColor redColor];
    self.customView.frame = CGRectMake(100, 100, 100, 100);
    [self.view addSubview:self.customView];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [UIView animateKeyframesWithDuration:3 delay:0 options:0 animations:^{
        [UIView addKeyframeWithRelativeStartTime:0/7.0 relativeDuration:1/7.0 animations:^{
            self.customView.backgroundColor = [UIColor redColor];
        }];
        [UIView addKeyframeWithRelativeStartTime:1/7.0 relativeDuration:1/7.0 animations:^{
            self.customView.backgroundColor = [UIColor orangeColor];
        }];
        [UIView addKeyframeWithRelativeStartTime:2/7.0 relativeDuration:1/7.0 animations:^{
            self.customView.backgroundColor = [UIColor yellowColor];
        }];
        [UIView addKeyframeWithRelativeStartTime:3/7.0 relativeDuration:1/7.0 animations:^{
            self.customView.backgroundColor = [UIColor greenColor];
        }];
        [UIView addKeyframeWithRelativeStartTime:4/7.0 relativeDuration:1/7.0 animations:^{
            self.customView.backgroundColor = [UIColor cyanColor];
        }];
        [UIView addKeyframeWithRelativeStartTime:5/7.0 relativeDuration:1/7.0 animations:^{
            self.customView.backgroundColor = [UIColor blueColor];
        }];
        [UIView addKeyframeWithRelativeStartTime:6/7.0 relativeDuration:1/7.0 animations:^{
            self.customView.backgroundColor = [UIColor purpleColor];
        }];
    } completion:^(BOOL finished) {
        NSLog(@"动画结束了");
    }];
}

@end

2、过渡动画

过渡动画的API一共有两个：

  • 给单个UIView的不可动画属性添加过渡动画
[UIView transitionWithView: // 要做动画的视图
                  duration: // 动画时长
                   options: // 过渡动画效果
                animations:^{
                    // 要改变的不可动画属性
                } completion:^(BOOL finished) {
                    // 动画完成的回调
                }];
  • 给两个UIView切换时添加过渡动画
[UIView transitionFromView: // 旧视图
                    toView: // 新视图
                  duration: // 动画时长
                   options: // 动画过渡效果
                completion:^(BOOL finished) {
                    // 动画完成的回调
                }];

options（UIViewAnimationOptions）：

UIViewAnimationOptionTransitionNone // 动画效果：不使用动画
UIViewAnimationOptionTransitionCrossDissolve // 动画效果：淡入淡出
UIViewAnimationOptionTransitionFlipFromTop // 动画效果：正面和背面的二维翻转，从上向下翻转
UIViewAnimationOptionTransitionFlipFromLeft // 动画效果：正面和背面的二维翻转，从左向右翻转
UIViewAnimationOptionTransitionFlipFromBottom // 动画效果：正面和背面的二维翻转，从下向上翻转
UIViewAnimationOptionTransitionFlipFromRight // 动画效果：正面和背面的二维翻转，从右向左翻转
UIViewAnimationOptionTransitionCurlUp // 动画效果：翻页，从下往上翻页
UIViewAnimationOptionTransitionCurlDown // 动画效果：翻页，从上往下翻页

UIViewAnimationOptionCurveEaseInOut // 动画的缓冲曲线：动画慢进，逐渐加快，逐渐减慢，慢出（默认值）
UIViewAnimationOptionCurveEaseIn // 动画的缓冲曲线：动画慢进，逐渐加快
UIViewAnimationOptionCurveEaseOut // 动画的缓冲曲线：动画逐渐减慢，慢出
UIViewAnimationOptionCurveLinear // 动画的缓冲曲线：动画匀速

UIViewAnimationOptionRepeat // 重复执行动画
UIViewAnimationOptionAllowUserInteraction // 执行动画期间，开启view的用户交互

UIViewAnimationOptionAutoreverse // 执行动画回路
UIViewAnimationOptionLayoutSubviews // 执行动画时布局子控件
UIViewAnimationOptionAllowAnimatedContent // 执行动画时重绘视图
UIViewAnimationOptionBeginFromCurrentState // 从当前状态开始执行动画
UIViewAnimationOptionShowHideTransitionViews // 显示视图时显示或隐藏而不是移除或添加
UIViewAnimationOptionOverrideInheritedOptions // 不继承父动画设置
UIViewAnimationOptionOverrideInheritedCurve // 忽略嵌套动画的曲线设置
UIViewAnimationOptionOverrideInheritedDuration // 忽略嵌套动画的执行时间设置

对比上面Core Animation的例子，现在我们直接写个例子看看，给label.layer上显示的文本和imageView.layer上显示的图片的变化添加过渡动画。

-----------ViewController.m-----------

#import "ViewController.h"

@interface ViewController ()

@property (strong, nonatomic) UIImageView *imageView;
@property (strong, nonatomic) UILabel *label;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.imageView = [[UIImageView alloc] init];
    self.imageView.frame = CGRectMake(0, 20, self.view.bounds.size.width, self.view.bounds.size.width);
    // 首先展示修改前的图层外观
    self.imageView.image = [UIImage imageNamed:@"乔丹.png"];
    [self.view addSubview:self.imageView];

    self.label = [[UILabel alloc] init];
    self.label.frame = CGRectMake(0, self.view.bounds.size.width + 20, self.view.bounds.size.width, 30);
    // 首先展示修改前的图层外观
    self.label.text = @"乔丹";
    self.label.textColor = [UIColor blackColor];
    self.label.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:self.label];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [UIView transitionWithView:self.imageView duration:3 options:UIViewAnimationOptionTransitionCurlUp animations:^{
        self.imageView.image = [UIImage imageNamed:@"科比.png"];
    } completion:^(BOOL finished) {
        NSLog(@"动画结束了");
    }];
    
    [UIView transitionWithView:self.label duration:3 options:UIViewAnimationOptionTransitionCurlUp animations:^{
        self.label.text = @"科比";
    } completion:^(BOOL finished) {
        NSLog(@"动画结束了");
    }];
}

@end
3、约束动画需注意
  • 如果你用了frame，那做动画时就用frame做动画，如果你用了autolayout，那做动画时就用autolayout做动画，不要交叉着来，否则容易出问题
  • 如果是用frame做动画，那在UIView Animation的block里直接修改frame就可以有动画了，但如果是用autolayout做动画，那在UIView Animation的block里直接修改约束却不会有动画，我们必须在修改约束后主动调用一下父控件的layoutIfNeeded方法来强制立即把约束转换成frame并刷新UI，这样才会有动画
-----------ViewController.m-----------

#import "ViewController.h"
#import "Masonry.h"

@interface ViewController ()

@property (strong, nonatomic) UIView *customView1;
@property (strong, nonatomic) UIView *customView2;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.customView1 = [[UIView alloc] init];
    self.customView1.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.customView1];
    // 用frame
    self.customView1.frame = CGRectMake(100, 100, 100, 100);
    
    self.customView2 = [[UIView alloc] init];
    self.customView2.backgroundColor = [UIColor greenColor];
    [self.view addSubview:self.customView2];
    // 用autolayout
    [self.customView2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(300);
        make.left.equalTo(self.view).offset(100);
        make.width.height.mas_equalTo(100);
    }];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [UIView animateWithDuration:3 animations:^{
        // 用frame做动画
        CGRect frame = self.customView1.frame;
        frame.size.width = 200;
        self.customView1.frame = frame;
    }];
    
    [UIView animateWithDuration:3 animations:^{
        // 用autolayout做动画
        [self.customView2 mas_updateConstraints:^(MASConstraintMaker *make) {
            make.width.mas_equalTo(200);
        }];
        
        // 调用一下父控件的layoutIfNeeded方法来强制立即把约束转换成frame并刷新UI
        [self.view layoutIfNeeded];
    }];
}

@end


三、Core Animation和UIView Animation怎么选择

基础动画：两者都可以，优先选择UIView Animation。

关键帧动画：两者都可以，优先选择UIView Animation，但是如果要做路径关键帧动画，则只能选择Core Animation。

过渡动画：两者都可以，优先选择UIView Animation，但是如果过渡效果找不到，则选择Core Animation，它的过渡效果更多。

你可能感兴趣的:(【UI】Animation)

  • Open WebUI应用实践 孙将帼
    open-webui/open-webui:User-friendlyWebUIforLLMs(FormerlyOllamaWebUI)(github.com)Tutorial|OpenWebUIOpenWebUITip:OpenWebUI、Ollama、Helm、ChromaDB、RAG、Pipelines、sentence-transformers库、1、OpenWebUI是一个可扩展的、自托
  • Ubuntu 手动安装 Open WebUI 完整指南 老大白菜 pythonubuntulinux运维
    Ubuntu手动安装OpenWebUI完整指南前提条件在安装OpenWebUI之前，请确保您的系统满足以下要求：Ubuntu22.04LTS或更高版本Python3.10+Node.js18+Git至少4GB内存足够的磁盘空间（推荐20GB以上）安装步骤1.更新系统包sudoaptupdatesudoaptupgrade-y2.安装必要的依赖#安装Python和Node.jssudoaptinst
  • Android Jetpack系列（一） Room 游逸丶 AndroidJetpackAndroidjetpackRoomAndroidAAC
    AndroidJetpack系列（一）Room前言Room简介Room使用1引用2编写Entity实体类2编写Dao数据操作类3编写Database数据库操作类4调用示例前言Jetpack是2017年谷歌在开发者大会上发布的一套开发工具。Jetpack共包含4个部分：Architecture、Foundation、Behavior以及UI。其中的Architecture又称为AAC（Android
  • Android---Room（三） 无所事事的程序员 Android
    当表的结构发生变化时处理方法：下面方法共同点就是版本号+1最简单的方法就是在数据库创建时，执行破坏式的迁移.fallbackToDestructiveMigration()//破坏式迁移INSTANCE=Room.databaseBuilder(context.getApplicationContext(),WordDatabase.class,"worddatabase").fallbackTo
  • 【Python入门基础】——第1篇：从入门到精通：Python简介与环境搭建详解 猿享天开 python从入门到精通python开发语言
    第1篇：Python简介与环境搭建目录什么是Python？Python的历史与特点安装Python解释器配置开发环境选择合适的集成开发环境（IDE）使用文本编辑器运行第一个Python程序常见问题及解决方法总结什么是Python？Python是一种高级、通用、解释型的编程语言，由GuidovanRossum于1991年首次发布。Python以其简洁易读的语法、广泛的应用领域和强大的社区支持，成为全
  • 2025年美赛数学建模 MCM Problem B: Managing Sustainable Tourism 问题 B：可持续旅游管理 思路+代码解析【第一问】 一键难忘 付费专栏数学建模2025美赛2025年美赛数学建模可持续旅游管理
    本文为个人解题笔记，仅供参考学习。本文B题的第一问。其他问题均在本专栏内，订阅一次，全部可见。本文为个人解题笔记，仅供参考学习。第一小问【为阿拉斯加州朱诺建⽴⼀个可持续旅游业模型。】BuildamodelforasustainabletourismindustryinJuneau,Alaska.Youmaywanttoconsiderfactorssuchasthenumberofvisitors
  • RK3568中使用QT opencv（显示基础图像） 花落已飘 qtopencv开发语言
    文章目录一、查看对应的开发环境是否有opencv的库二、QT使用opencv一、查看对应的开发环境是否有opencv的库在开发板中的/usr/lib目录下查看是否有opencv的库：这里使用的是正点原子的ubuntu虚拟机，在他的虚拟机里面已经安装好了opencv的库。二、QT使用opencv在QTpro文件中添加opencv的支持：QT+=coreguiCONFIG+=c++11#添加OpenC
  • .NET MAUI 项目教程 瞿格女
    .NETMAUI项目教程docs-mauiThisrepositorycontainsdocumentationfor.NETMulti-platformAppUI(MAUI).项目地址:https://gitcode.com/gh_mirrors/do/docs-maui1.项目介绍什么是.NETMAUI？.NETMulti-platformAppUI(.NETMAUI)是一个跨平台的UI框架，
  • Linux gdisk 命令使用详解 linux
    简介gdisk命令是Linux上管理GPT（GUID分区表）分区的强大工具。它可替代仅支持MBR（主引导记录）分区的fdisk。安装Debian/UbuntusudoaptinstallgdiskRHEL/CentOSsudoyuminstallgdisk检查分区类型sudogdisk-l/dev/sdXGPT磁盘：显示带有GUID代码的分区MBR磁盘：gdisk发出警告并询问是否要转换为GPT运
  • 代替Winform、Win32控件的一些界面框架Electron,QT等 专注VB编程开发20年 前端c++ui界面框架
    以下是一些可以代替Winform、Win32控件，在VC++、VBA等EXE程序上用来做控件元素、表格数据绑定、窗口显示的WEBUI框架和工具：1.Electron特点：Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架。它允许开发者使用Web技术来创建桌面应用，具有良好的跨平台兼容性。适用场景：适用于需要快速开发跨平台桌面应用的场景，尤其是对UI灵活性和
  • Kafka（一）使用Docker Compose安装单机Kafka以及Kafka UI_docker 部署单机kafka 2401_84166396 2024年程序员学习kafkadockerui
    开启JMX监控JMX_PORT=9998KAFKA_JMX_OPTS=-Dcom.sun.management.jmxremote-Dcom.sun.management.jmxremote.authenticate=false-Dcom.sun.management.jmxremote.ssl=false-Djava.rmi.server.hostname=kafka-Dcom.sun.mana
  • Failed to resolve: com.github.* 冰峰雪岭 安卓gradlemavenjava
    引入外部包时常见说要在项目根目录的build.gradle中添加allprojects{repositories{......maven{url'https://jitpack.io'}}}但还是会报错Failedtoresolve:com.github.*最新的androidStudio要到根目录的settings.gradle中去添加repositories{......maven{url'h
  • vue3+elementPlus之后台管理系统（从0到1）(day1-项目主体搭建) 沐暖沐 vue.js前端javascript
    vue3官方文档：https://cn.vuejs.org/guide/introduction.html1、项目创建确保电脑已安装node查看命令：node-v进入项目目录，创建项目npminitvue@latestNeedtoinstallthefollowingpackages:[email protected]?(y)yVue.js-TheProgressiveJav
  • Android车机DIY开发之软件篇(三)编译Automotive OS错误(1) 勿忘初心91 android嵌入式硬件mcugithub单片机
    Android车机DIY开发之软件篇(三)编译AutomotiveOS错误(1)问题FAILED:out/soong/build.ninjacd“KaTeXparseerror:Expected'EOF',got'&'atposition49:…soong_build")"&̲&BUILDER="PWD/KaTeXparseerror:Expected'EOF',got'&'atposition5
  • 《深入理解Mybatis原理》MyBatis配置解析过程 后端javamybatis
    配置解析主体方法publicConfigurationparse(){if(parsed){thrownewBuilderException("EachXMLConfigBuildercanonlybeusedonce.");}parsed=true;//源码中没有这一句，只有parseConfiguration(parser.evalNode("/configuration"));//为了让读者
  • GraphQL扩展语言GraphQXL常见问题解决方案 祝晋遥
    GraphQL扩展语言GraphQXL常见问题解决方案graphqxlGraphQXLisanewlanguagebuiltontopoftheGraphQLsyntaxthatextendstheoriginallanguagewithsomeadditionalfeaturesusefulforcreatingscalableandbigserversideschemas.Thisreposi
  • 【自动化】深度解析仓库存储UI自动化 从零开始的-CodeNinja之路 自动化uilog4j
    目录一、分层测试1.1单元(Unit)测试1.2接口（Service/服务/API）测试1.3集成（UI）测试1.4分层测试总结二、UI自动化2.1UI自动化作用2.2UI自动化优点2.3UI自动化缺点三、常见的UI自动化框架分析3.1Cypress和Selenium用户量对比3.2Cypress和Selenium实现架构对比3.3Cypress和Selenium环境框架对比四、如何做好UI自动化
  • verilog Matlab GPS C/A码发生器. today_typ verilog学习日志开发语言matlab经验分享fpga开发
    本文所涉文献资料均为开源免费,参考文献、声明链接等均写在文末。1.C/A码简要介绍GPS卫星信号包括载波信号、测距码和数据码．其中的测码粗码即C／A码(CoarseAcquisitionCode)除了作为粗测码外，还由于其具有码长短，易于捕获的特点而作为GPS卫星信号的捕获码，因此C／A码是GPS信号捕获以及接收机实现的基础。[1]GPS系统中使用了两种伪随机码，一种是时钟速率为10．23MHz用
  • Django安装mysqlclient报错 Louis yeap macosdjango后端python
    系列文章目录文章目录系列文章目录前言总结前言CollectingmysqlclientUsingcachedmysqlclient-2.2.4.tar.gz(90kB)Installingbuilddependencies...doneGettingrequirementstobuildwheel...errorerror:subprocess-exited-with-error×Gettingr
  • 自定义穿梭框 vue穿梭框 不停留 npm组件vuejshtmlvue.jscss3
    基于vue和elementUI的穿梭框elementUI中提供了很强大的穿梭框组件，但是在具体的项目或是业务中，还会有一些特殊的需求没有办法满足。所以抽空做了这个穿梭框组件，供我们当前所迭代的产品使用，目前时初步试用，会再根据试用过程中做的优化再度更新。现在发出来是希望如果有遇到同样开发需求的童鞋，可以一起来完善这个组件。安装npminstalltransfer-table代码仓链接link.简介
  • Node多终端前后端同时执行 锐视创想 前端nodenodejs
    当前项目为node-vue-ele-app(服务端）└client（前端客户端）安装concurrentlynpmiconcurrently进入Client文件夹，编辑package.json"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","start":"npmrunserve"}
  • electron实现热更新以及和前端同时启动（三） SquirrelPineal 前端electronvue.js
    1、安装3个模块npminstall-Dwait-onnpminstall-Dconcurrentlynpminstallnodemon设置好端口"scripts":{"dev":"vite","build":"vue-tsc--noEmit&&vitebuild","preview":"vitepreview",
  • Django SimpleUI运维管理系统搭建教程 ivwdcwso 开发运维sqlite数据库DjangoSimpleUIDjangopython开发
    DjangoSimpleUI运维管理系统搭建教程本教程将详细介绍如何从零搭建一个基于DjangoSimpleUI的运维管理系统。一、环境准备1.安装Python和相关依赖#安装Python3.8+sudoaptinstallpython3.8python3.8-dev#安装虚拟环境pip3installvirtualenv#创建并激活虚拟环境virtualenvvenvsourcevenv/bin
  • python 连接数据库之jaydebeapi SmartManWind
    让python通过jdbc连接数据库1、安装visualcppbuildtools_full.exe链接：https://pan.baidu.com/s/1MLxNJfWNGuKIxgNYkJgUnw密码：3etc2、pipinstallJayDeBeApihttps://pypi.org/project/JayDeBeApi/3、测试代码importjaydebeapiurl='jdbc:ora
  • 大型语言模型构建指南：从头开始构建大语言模型《Build a Large Language Model (From Scratch)》免费PDF AGI大模型学习 语言模型pdf人工智能大模型大模型学习大模型教程大模型书籍
    通过从头开始构建一个大型语言模型，了解如何创建、训练和调整大型语言模型（LLMs）！一、构建大型语言模型（从头开始）在《构建大型语言模型（从头开始）》中，你将了解如何LLMs从内到外工作。在这本富有洞察力的书中，畅销书作家塞巴斯蒂安·拉施卡（SebastianRaschka）将指导你逐步创建自己的LLM，用清晰的文字、图表和示例解释每个阶段。你将从最初的设计和创建到通用语料库的预训练，一直到特定任
  • 【附源码】Java计算机毕业设计小说阅读网站（程序+LW+部署） 一念 计算机毕设源码程序 java课程设计mysql
    项目运行环境配置：Jdk1.8+Tomcat7.0+Mysql+HBuilderX（Webstorm也行）+Eclispe（IntelliJIDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：java+mybatis+Maven等等组成，B/S模式+Maven管理等等。环境需要1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境
  • Zalando RESTful API 指南项目推荐 鲍凯印Fox
    ZalandoRESTfulAPI指南项目推荐restful-api-guidelinesAmodelsetofguidelinesforRESTfulAPIsandEvents,createdbyZalando项目地址:https://gitcode.com/gh_mirrors/re/restful-api-guidelines项目基础介绍和主要编程语言ZalandoRESTfulAPI指南项
  • linux离线安装gensim,安装gensim 宇宙探索未解之迷 linux离线安装gensim
    pip3installjieba-0.39.zippip3installdocutils-0.15.2-py3-none-any.whlpip3installpython_dateutil-2.8.0-py2.py3-none-any.whlRequirementalreadysatisfied:six>=1.5pip3installbotocore-1.12.238-py2.py3-none-a
  • 疯狂的 Web 应用开源项目 一个生命 Web开发Cookieweb开源项目应用
    原文作者：陈皓原文链接：http://coolshell.cn/articles/5132.html#more-5132文章来源：Best“mustknow”opensourcestobuildthenewWeb。个人感觉这个收集贴收集成相当的全。学习HTML5编程和设计★HTML5Rocks:MajorFeatureGroups的学习HTML5的资源(HTML5演示,教程).源码很不错的HTML
  • tailwindcss4.0 升级后的一个坑 tailwindcss
    tailwindcss4.0升级了，用了vite的方式，因为主UI框架用的antdv，结果出现了antdv组件自身的css比tailwindcss的优先级高的情况。发现tailwindcss的类都被layer了，而这个layer的特性就是比平常的css优先级要低，考虑到antdv还不能把自身css套上layer（antd好像可以），所以只能把tailwind的layer去掉了，也是为了一些老的ui
  • 关于旗正规则引擎规则中的上传和下载问题 何必如此 文件下载压缩jsp文件上传
    文件的上传下载都是数据流的输入输出，大致流程都是一样的。 一、文件打包下载 1.文件写入压缩包 string mainPath="D:\upload\";     下载路径 string tmpfileName=jar.zip;        &n
  • 【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析 bit1129 Stream
      以如下代码为例（SocketInputDStream）： Spark Streaming从Socket读取数据的代码是在SocketReceiver的receive方法中，撇开异常情况不谈(Receiver有重连机制，restart方法，默认情况下在Receiver挂了之后，间隔两秒钟重新建立Socket连接)，读取到的数据通过调用store(textRead)方法进行存储。数据
  • spark master web ui 端口8080被占用解决方法 daizj 8080端口占用sparkmaster web ui
    spark master web ui 默认端口为8080，当系统有其它程序也在使用该接口时，启动master时也不会报错，spark自己会改用其它端口，自动端口号加1，但为了可以控制到指定的端口，我们可以自行设置，修改方法：   1、cd SPARK_HOME/sbin   2、vi start-master.sh     3、定位到下面部分
  • oracle_执行计划_谓词信息和数据获取 周凡杨 oracle执行计划
      oracle_执行计划_谓词信息和数据获取(上) 一：简要说明 在查看执行计划的信息中，经常会看到两个谓词filter和access，它们的区别是什么，理解了这两个词对我们解读Oracle的执行计划信息会有所帮助。 简单说，执行计划如果显示是access，就表示这个谓词条件的值将会影响数据的访问路径（表还是索引），而filter表示谓词条件的值并不会影响数据访问路径，只起到
  • spring中datasource配置 g21121 dataSource
    datasource配置有很多种，我介绍的一种是采用c3p0的，它的百科地址是： http://baike.baidu.com/view/920062.htm   <!-- spring加载资源文件 --> <bean name="propertiesConfig" class="org.springframework.b
  • web报表工具FineReport使用中遇到的常见报错及解决办法（三） 老A不折腾 finereportFAQ报表软件
    这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、repeated column width is largerthan paper width： 这个看这段话应该是很好理解的。比如做的模板页面宽度只能放
  • mysql 用户管理 墙头上一根草 linuxmysqluser
    1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Password) values(‘localhost’,'jeecn’,password(‘jeecn’));//刷新系统权限表mysql>flush privileges;这样就创建了一个名为：
  • 关于使用Spring导致c3p0数据库死锁问题 aijuans springSpring 入门Spring 实例Spring3Spring 教程
    这个问题我实在是为整个 springsource 的员工蒙羞 如果大家使用 spring 控制事务，使用 Open Session In View 模式， com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.
  • 百度词库联想 annan211 百度
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title&g
  • int数据与byte之间的相互转换实现代码 百合不是茶 位移int转bytebyte转int基本数据类型的实现
    在BMP文件和文件压缩时需要用到的int与byte转换,现将理解的贴出来;   主要是要理解;位移等概念 http://baihe747.iteye.com/blog/2078029   int转byte;   byte转int;   /** * 字节转成int,int转成字节 * @author Administrator *
  • 简单模拟实现数据库连接池 bijian1013 javathreadjava多线程简单模拟实现数据库连接池
    简单模拟实现数据库连接池 实例1： package com.bijian.thread; public class DB { //private static final int MAX_COUNT = 10; private static final DB instance = new DB(); private int count = 0; private i
  • 一种基于Weblogic容器的鉴权设计 bijian1013 javaweblogic
            服务器对请求的鉴权可以在请求头中加Authorization之类的key，将用户名、密码保存到此key对应的value中，当然对于用户名、密码这种高机密的信息，应该对其进行加砂加密等，最简单的方法如下： String vuser_id = "weblogic"; String vuse
  • 【RPC框架Hessian二】Hessian 对象序列化和反序列化 bit1129 hessian
     任何一个对象从一个JVM传输到另一个JVM，都要经过序列化为二进制数据(或者字符串等其他格式，比如JSON)，然后在反序列化为Java对象，这最后都是通过二进制的数据在不同的JVM之间传输(一般是通过Socket和二进制的数据传输)，本文定义一个比较符合工作中。   1. 定义三个POJO    Person类 package com.tom.hes
  • 【Hadoop十四】Hadoop提供的脚本的功能 bit1129 hadoop
    1. hadoop-daemon.sh 1.1 启动HDFS ./hadoop-daemon.sh start namenode ./hadoop-daemon.sh start datanode  通过这种逐步启动的方式，比start-all.sh方式少了一个SecondaryNameNode进程，这不影响Hadoop的使用，其实在 Hadoop2.0中，SecondaryNa
  • 中国互联网走在“灰度”上 ronin47 管理 灰度
    中国互联网走在“灰度”上（转） 文/孕峰   第一次听说灰度这个词，是任正非说新型管理者所需要的素质。第二次听说是来自马化腾。似乎其他人包括马云也用不同的语言说过类似的意思。   灰度这个词所包含的意义和视野是广远的。要理解这个词，可能同样要用“灰度”的心态。灰度的反面，是规规矩矩，清清楚楚，泾渭分明，严谨条理，是决不妥协，不转弯，认死理。黑白分明不是灰度，像彩虹那样
  • java-51-输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 bylijinnan java
    public class PrintMatrixClockwisely { /** * Q51.输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 例如：如果输入如下矩阵： 1 2 3 4 5 6 7 8 9
  • mongoDB 用户管理 开窍的石头 mongoDB用户管理
      1:添加用户    第一次设置用户需要进入admin数据库下设置超级用户（use admin）      db.addUsr({user:'useName',pwd:'111111',roles:[readWrite,dbAdmin]});    第一个参数用户的名字    第二个参数
  • [游戏与生活]玩暗黑破坏神3的一些问题 comsci 生活
        暗黑破坏神3是有史以来最让人激动的游戏。。。。但是有几个问题需要我们注意      玩这个游戏的时间，每天不要超过一个小时，且每次玩游戏最好在白天      结束游戏之后，最好在太阳下面来晒一下身上的暗黑气息，让自己恢复人的生气   &nb
  • java 二维数组如何存入数据库 cuiyadll java
    using System; using System.Linq; using System.Text; using System.Windows.Forms; using System.Xml; using System.Xml.Serialization; using System.IO; namespace WindowsFormsApplication1 {
  • 本地事务和全局事务Local Transaction and Global Transaction(JTA) darrenzhu javaspringlocalglobaltransaction
    Configuring Spring and JTA without full Java EE http://spring.io/blog/2011/08/15/configuring-spring-and-jta-without-full-java-ee/ Spring doc -Transaction Management http://docs.spring.io/spri
  • Linux命令之alias - 设置命令的别名，让 Linux 命令更简练 dcj3sjt126com linuxalias
    用途说明 设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯，那么我们可以为它指定一个别名。虽然可以为命令建立“链接”解决长文件名的问 题，但对于带命令行参数的命令，链接就无能为力了。而指定别名则可以解决此类所有问题【1】。常用别名来简化ssh登录【见示例三】，使长命令变短，使常 用的长命令行变短，强制执行命令时询问等。   常用参数 格式：alias 格式：ali
  • yii2 restful web服务[格式响应] dcj3sjt126com PHPyii2
    响应格式 当处理一个 RESTful API 请求时， 一个应用程序通常需要如下步骤 来处理响应格式： 确定可能影响响应格式的各种因素， 例如媒介类型， 语言， 版本， 等等。 这个过程也被称为 content negotiation。 资源对象转换为数组， 如在 Resources 部分中所描述的。 通过 [[yii\rest\Serializer]]
  • MongoDB索引调优（2）——[十] eksliang mongodbMongoDB索引优化
    转载请出自出处：http://eksliang.iteye.com/blog/2178555 一、概述       上一篇文档中也说明了，MongoDB的索引几乎与关系型数据库的索引一模一样，优化关系型数据库的技巧通用适合MongoDB，所有这里只讲MongoDB需要注意的地方 二、索引内嵌文档     可以在嵌套文档的键上建立索引，方式与正常
  • 当滑动到顶部和底部时，实现Item的分离效果的ListView gundumw100 android
    拉动ListView，Item之间的间距会变大，释放后恢复原样； package cn.tangdada.tangbang.widget; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import andr
  • 程序员用HTML5制作的爱心树表白动画 ini JavaScriptjqueryWebhtml5css
    体验效果：http://keleyi.com/keleyi/phtml/html5/31.htmHTML代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <ti
  • 预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版 kakajw ThinkPad预装改装windows 7windows 8
      该教程具有普遍参考性，特别适用于联想的机器，其他品牌机器的处理过程也大同小异。 该教程是个人多次尝试和总结的结果，实用性强，推荐给需要的人！   缘由 小弟最近入手笔记本ThinkPad T440，但是特别不能习惯笔记本出厂预装的Windows 8系统，而且厂商自作聪明地预装了一堆没用的应用软件，消耗不少的系统资源（本本的内存为4G，系统启动完成时，物理内存占用比
  • Nginx学习笔记 mcj8089 nginx
    一、安装nginx             1、在nginx官方网站下载一个包，下载地址是：  http://nginx.org/download/nginx-1.4.2.tar.gz      2、WinSCP(ftp上传工
  • mongodb 聚合查询每天论坛链接点击次数 qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 18 */ { "_id" : ObjectId("5596414cbe4d73a327e50274"), "msgType" : "text", "sendTime" : ISODate("2015-07-03T08:01:16.000Z"
  • java术语（PO/POJO/VO/BO/DAO/DTO） Luob. DAOPOJODTOpoVO BO
    PO(persistant object) 持久对象 在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数据库的操作. VO(value object) 值对象 通
  • 算法复杂度 Wuaner Algorithm
    Time Complexity & Big-O： http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o http://bigocheatsheet.com/ http://www.sitepoint.com/time-complexity-algorithms/
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他