意一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)

  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • 你可能遗漏的一些C#/.NET/.NET Core知识点 追逐时光者 C#.NETDotNetGuide编程指南c#.net.netcoremicrosoft
    前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D
  • linux 发展史 种树的猴子 内核java操作系统linux大数据
    linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free
  • spring如何整合druid连接池？ 惜.己 springspringjunit数据库javaidea后端xml
    目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl
  • esp32开发快速入门 8 : MQTT 的快速入门，基于esp32实现MQTT通信 z755924843 ESP32开发快速入门服务器网络运维
    MQTT介绍简介MQTT（MessageQueuingTelemetryTransport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android更改窗口的层次
    最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
  • matlab mle 优化,MLE+: Matlab Toolbox for Integrated Modeling, Control and Optimization for Buildings... Simon Zhong matlabmle优化
    摘要：FollowingunilateralopticnervesectioninadultPVGhoodedrat,theaxonguidancecueephrin-A2isup-regulatedincaudalbutnotrostralsuperiorcolliculus(SC)andtheEphA5receptorisdown-regulatedinaxotomisedretinalgan
  • TextFiled 中输入金额 宁梓茞
    要求:输入的金额不能超过六位,小数点后面只能输入两位小数如果textFIled中第一位输入的是0,后面必须输入小数点,否则禁止输入用到textfiled代理方法#pragmamark----textFiledDelegate-----(BOOL)textField:(UITextField*)textFieldshouldChangeCharactersInRange:(NSRange)range
  • JAVA·一个简单的登录窗口 MortalTom java开发语言学习
    文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • vue + Element UI table动态合并单元格 我家媳妇儿萌哒哒 elementUIvue.js前端javascript
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
  • GenVisR 基因组数据可视化实战(三) 11的雾
    3.genCov画每个突变位点附件的coverage，跟igv有点相似。这个操作起来很复杂，但是图还是挺有用的。可以考虑。由于我的referencegenomebuild是hg38BiocManager::install(c("TxDb.Hsapiens.UCSC.hg38.knownGene","BSgenome.Hsapiens.UCSC.hg38"))library(TxDb.Hsapien
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php课程设计vue.js
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
  • 【自动化测试】UI自动化的分类、如何选择合适的自动化测试工具以及其中appium的设计理念、引擎和引擎如何工作 Lossya ui自动化测试工具自动化测试appium
    引言UI自动化测试主要针对软件的用户界面进行测试，以确保用户界面元素的交互和功能符合预期文章目录引言一、UI自动化的分类1.1基于代码的自动化测试1.2基于录制/回放的自动化测试1.3基于框架的自动化测试1.4按测试对象分类1.5按测试层次分类1.6按测试执行方式分类1.7按测试目的分类二、如何选择合适的自动化测试工具2.1项目需求分析2.2工具特性评估2.3成本考虑2.4团队技能2.5试用和评估
  • Python3.7出现“ModuleNotFoundError: No module named ‘Tkinter‘”错误的解决方法 可爱的小红猪 python
    Python3.7出现“ModuleNotFoundError:Nomodulenamed‘Tkinter’”错误的解决方法在网上看到很多针对这个问题的解决方法都是重新安装或配置Tkinter库，但Tkinter是python内置的标准GUI库，安装Python时就已经内置在了库中，不需要另外下载。针对于Tkinter，你的代码很可能是这样的：importTkinter或者是这样fromTkint
  • 设计模式之建造者模式(通俗易懂--代码辅助理解【Java版】） ok!ko 设计模式设计模式建造者模式java
    文章目录设计模式概述1、建造者模式2、建造者模式使用场景3、优点4、缺点5、主要角色6、代码示例：1）实现要求2）UML图3)实现步骤：1）创建一个表示食物条目和食物包装的接口2）创建实现Packing接口的实体类3）创建实现Item接口的抽象类，该类提供了默认的功能4）创建扩展了Burger和ColdDrink的实体类5）创建一个Meal类，带有上面定义的Item对象6）创建一个MealBuil
  • 高级UI<第二十四篇>：Android中用到的矩阵常识 NoBugException
    （1）定义在数学中，矩阵（Matrix）是一个按照长方阵列排列的复数或实数集合。由m×n个数aij排成的m行n列的数表称为m行n列的矩阵，简称m×n矩阵。记作：图片.png这m×n个数称为矩阵A的元素，简称为元，数aij位于矩阵A的第i行第j列，称为矩阵A的(i,j)元，以数aij为(i,j)元的矩阵可记为(aij)或(aij)m×n，m×n矩阵A也记作Amn。元素是实数的矩阵称为实矩阵，元素是复
  • linux 安装Sublime Text 3 hhyiyuanyu Python学习linuxsublimetext
    方法/步骤打开官网http://www.sublimetext.com/3，选择64位进行下载执行命令wgethttps://download.sublimetext.com/sublime_text_3_build_3126_x64.tar.bz2进行下载3、下载完成进行解压,执行tar-xvvfsublime_text_3_build_3126_x64.tar.bz解压4、解压完成以后，移动到
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • shell脚本中sed命令如何使用变量 歪歪的酒壶 linux
    在shell脚本中我们常常需要使用sed命令进行配置文件的更新，但是更新的内容又往往根据环境相关。值并不是固定的。这里我们介绍一种在sed命令中使用变量的方法。比如，在nginx的配置中，我们需要根据环境来更新/etc/nginx/sites-available/default中的目录配置。通常我们采用一个变量，来记录当前环境需要配置的目录比如：dist_dir=/home/dev/code/ui
  • swing窗体打jar包后找不到图片的问题 zoyation javajarswingclassloaderimageeclipsejava
    今天打jar包遇到一个怪问题:打成jar包后双击运行没反应cmd运行有反应但出现下列问题Causedby:java.lang.ExceptionInInitializerErroratcom.zou.ui.MyDialog.init(MyDialog.java:92)atcom.zou.ui.MyDialog.(MyDialog.java:45)atcom.zou.ui.LoginDialog.(
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Android shell 常用 debug 命令 晨春计 Audiodebugandroidlinux
    目录1、查看版本2、am命令3、pm命令4、dumpsys命令5、sed命令6、log定位查看APK进程号7、log定位使用场景1、查看版本1.1、Android串口终端执行getpropro.build.version.release#获取Android版本uname-a#查看linux内核版本信息uname-r#单独查看内核版本1.2、linux服务器执行lsb_release-a#查看Lin
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • Vue3 vant组件库自动导入 不叫虎子 Vuevue.js前端javascript前端框架typescript
    实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
  • 编译Windows平台的Nginx+ngx_http_proxy_connect_module Grovvy_Deng windowsnginxhttp
    编译Windows平台的Nginx+ngx_http_proxy_connect_module背景：由于公司的正向出局代理是windows机器。机器上的Squid不稳定，打算替换成nginx+ngx_http_proxy_connect_module实现。通过几天痛苦的尝试，最后参考了github大神项目通过在线CICD工具编译window平台可用的ng。步骤：获取git可识别的patch由于CI
  • 关于旗正规则引擎规则中的上传和下载问题 何必如此 文件下载压缩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其他