自定义过渡动画-阿里云开发者社区

自定义过渡动画

2023-01-08 119

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 自定义过渡动画

上一篇中说到过渡动画，使用CATransition，但是CATransition提供的动画类型太少了，而且苹果通过 UIView

+transitionFromView:toView:duration:options:completion: +transitionWithView:duration:opt ions:animations:方法提供了Core Animation的过渡效果，除了UIViewAnimationOptionTransitionCrossDissolve外，其他常量和CATransition的type提供的常量完全无关也不同。

UIView特性提供的动画

UIView特性中提供的几个常量如下：

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

使用方法请看下面代码：

 [UIView transitionWithView:imageView duration:1.0
                       options:UIViewAnimationOptionTransitionCurlDown
                    animations:^{
                        //cycle to next image
                        UIImage *currentImage = imageView.image;
                        NSUInteger index = [images indexOfObject:currentImage];
                        index = (index + 1) % [images count];
                        imageView.image = images[index];
                    }
                    completion:NULL];

这个方法想必大家都很熟悉，博主也是在看到这里时才恍然大悟，原来这个方法是这样的，它不属于Core Animation，但却提供了Core Animation的过渡效果。

以上所说为UIView的特性提供的Core Animation过渡效果，在开发中属于比较常见的。

自定义动画

系统提供的动画毕竟是有限的，当一个动画用系统的属性解决不了怎么办？这事后就要自定义动画了，怎么自定义呢？我们都知道旋转，缩放，平移，把这些过程通过UIView的特性展现出来就组合成了一系列的动画，先看使用方法：

//截图 
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, YES, 0.0);
[imageView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *coverImage = UIGraphicsGetImageFromCurrentImageContext();
//拿到截图的图片，放置在原图位置坐操作
UIView *coverView = [[UIImageView alloc] initWithImage:coverImage];
coverView.frame = CGRectMake(80, 80, 150, 150);
[self.view addSubview:coverView];
//update the view color(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;
        UIImage *currentImage = imageView.image;
        NSUInteger index = [images indexOfObject:currentImage];
        index = (index + 1) % [images count];
        imageView.image = images[index];
    } completion:^(BOOL finished) {
        //remove the cover view now we're finished with it
        [coverView removeFromSuperview];
    }];