自定义动画

Posted 2020-07-07 潜意识

自定义动画

我们证实了过渡是一种对那些不太好做平滑动画属性的强大工具，但是CATransition的提供的动画类型太少了。

更 奇怪的是苹果通过UIView +transitionFromView:toView:duration:options:completion: 和+transitionWithView:duration:options:animations:方法提供了Core Animation的过渡特性。但是这里的可用的过渡选项和CATransition的type属性提供的常量完全不同。UIView过渡方法中 options参数可以由如下常量指定：

UIViewAnimationOptionTransitionFlipFromLeft 

UIViewAnimationOptionTransitionFlipFromRight

UIViewAnimationOptionTransitionCurlUp 

UIViewAnimationOptionTransitionCurlDown

UIViewAnimationOptionTransitionCrossDissolve 

UIViewAnimationOptionTransitionFlipFromTop 

UIViewAnimationOptionTransitionFlipFromBottom

除了UIViewAnimationOptionTransitionCrossDissolve之外，剩下的值和CATransition类型完全没关系。你可以用之前例子修改过的版本来测试一下

清单8.13 使用UIKit提供的方法来做过渡动画

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIImageView *imageView;

@property (nonatomic, copy) NSArray *images;

@end

@implementation ViewController

- (void)viewDidLoad

{

    [super viewDidLoad]; //set up images

    self.images = @[[UIImage imageNamed:@"Anchor.png"],

                    [UIImage imageNamed:@"Cone.png"],

                    [UIImage imageNamed:@"Igloo.png"],

                    [UIImage imageNamed:@"Spaceship.png"]];

- (IBAction)switchImage

{

    [UIView transitionWithView:self.imageView duration:1.0

                       options:UIViewAnimationOptionTransitionFlipFromLeft

                    animations:^{

                        //cycle to next image

                        UIImage *currentImage = self.imageView.image;

                        NSUInteger index = [self.images indexOfObject:currentImage];

                        index = (index + 1) % [self.images count];

                        self.imageView.image = self.images[index];

                    }

                    completion:NULL];

}

@end

 

 清单8.14 用renderInContext:创建自定义过渡效果

@implementation ViewController

- (IBAction)performTransition

{

    //preserve the current view snapshot

    UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, YES, 0.0);

    [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];

    UIImage *coverImage = UIGraphicsGetImageFromCurrentImageContext();

    //insert snapshot view in front of this one

    UIView *coverView = [[UIImageView alloc] initWithImage:coverImage];

    coverView.frame = self.view.bounds;

    [self.view addSubview:coverView];

    //update the view (we‘ll simply randomize the layer background color)

    CGFloat red = arc4random() / (CGFloat)INT_MAX;

    CGFloat green = arc4random() / (CGFloat)INT_MAX;

    CGFloat blue = arc4random() / (CGFloat)INT_MAX;

    self.view.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];

    //perform animation (anything you like)

    [UIView animateWithDuration:1.0 animations:^{

        //scale, rotate and fade the view

        CGAffineTransform transform = CGAffineTransformMakeScale(0.01, 0.01);

        transform = CGAffineTransformRotate(transform, M_PI_2);

        coverView.transform = transform;

        coverView.alpha = 0.0;

    } completion:^(BOOL finished) {

        //remove the cover view now we‘re finished with it

        [coverView removeFromSuperview];

    }];

}

@end

 

 

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

参数解析:

duration：动画的持续时间

delay：动画延迟delay秒后开始

options：动画的节奏控制

animations：将改变视图属性的代码放在这个block中

completion：动画结束后，会自动调用这个block

转场动画

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

参数解析:

duration：动画的持续时间

view：需要进行转场动画的视图

options：转场动画的类型

animations：将改变视图属性的代码放在这个block中

completion：动画结束后，会自动调用这个block

 

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

方法调用完毕后，相当于执行了下面两句代码：

// 添加toView到父视图

[fromView.superview addSubview:toView]; 

// 把fromView从父视图中移除

[fromView.superview removeFromSuperview];

参数解析:

duration：动画的持续时间

options：转场动画的类型

animations：将改变视图属性的代码放在这个block中

completion：动画结束后，会自动调用这个block