代码之家 › 专栏 › 技术社区 › willc2

如何使用核心动画在iPhone上的两个图像之间进行交叉淡入淡出

core-animation iphone

willc2 · 技术社区 · 15 年前

我这样做是为了学习如何在iPhone上使用核心动画可动画属性(而不是学习如何交叉淡入淡出图像本身)。

通过阅读类似的问题,我相信这可以通过动画内容的属性 UIImageView 层像这样:

UIImage *image1 = [UIImage imageNamed:@"someImage1.png"];
UIImage *image2 = [UIImage imageNamed:@"someImage2.png"];

self.imageView.image = image1;
[self.view addSubview:self.imageView];

CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"];
crossFade.duration = 5.0;
self.imageView.layer.contents = image2;
[self.imageView.layer addAnimation:crossFade forKey:@"animateContents"];

我是不是搞错了细节,还是不可能。

更新: 上面的代码生成一个空白的uiImageView。当我更改此行时:

self.imageView.layer.contents = image2.CGImage;

…我现在可以看到图像,但它不会淡入,只会立即出现。

6 回复 | 直到 6 年前

Glen Low 15 年前

你就快到了。

CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"];
crossFade.duration = 5.0;
crossFade.fromValue = image1.CGImage;
crossFade.toValue = image2.CGImage;
[self.imageView.layer addAnimation:crossFade forKey:@"animateContents"];

请注意,动画与uiImageView的实际值/内容无关。因此你需要

self.imageView.image = image2;

…设置图像的最终结果。

Arsonik 6 年前

我在某个地方找到了这个-它很管用。

迅捷

UIView.transition(with: imageView, duration: 0.33, options: .transitionCrossDissolve, animations: {
      imageView.image = image
}, completion: nil)

Objc

UIImage * toImage = [UIImage imageNamed:@"image.png"];
[UIView transitionWithView:self.view
                  duration:0.33f
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    self.imageview.image = toImage;
                } completion:NULL];

amosel 6 年前

extension UIImageView
{
    func mySetImage(image:UIImage)
    {
        guard let currentImage = self.image where currentImage != image else { return }
        let animation = CATransition()
        animation.duration = 0.3
        animation.type = kCATransitionFade
        layer.add(animation, forKey: "ImageFade")
        self.image = image
    }
}

Rahul K Rajan 10 年前

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
self.navigationController.navigationBarHidden=false;
UIImage *img=[UIImage imageNamed:@"images.jpeg"];
imgview=[[UIImageView alloc]init];
imgview.frame=CGRectMake(30,90, img.size.width, img.size.height);
[self.view addSubview:imgview];
[self animateImages];
}
- (void)animateImages
{
static int count = 0;
NSArray *animationImages = @[[UIImage imageNamed:@"images.jpeg"], [UIImage imageNamed:@"images (1).jpeg"]];
UIImage *image = [animationImages objectAtIndex:(count % [animationImages count])];

[UIView transitionWithView:imgview
                  duration:2.0f // animation duration
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    imgview.image = image;
                } completion:^(BOOL finished) {
                    [self animateImages];
                    count++;
                }];

}

Jesse Hull 10 年前

快速解决方案

let image1:UIImage = UIImage(named: "someImage1")!;
let image2:UIImage = UIImage(named: "someImage2")!;
let crossFade:CABasicAnimation = CABasicAnimation(keyPath: "contents");
crossFade.duration = 5.0;
crossFade.fromValue = image1.CGImage;
crossFade.toValue = image2.CGImage;
imageView.layer.addAnimation(crossFade, forKey:"animateContents");

Ed Marty 15 年前

我的建议是只用两个 UIImageView 在彼此之上。顶部的图像1,底部的图像2:

- (void) crossfade {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:.5];
    imageView1.alpha = !imageView1.alpha;
    [UIView commitAnimations];
}

当你调用它时,它将在两个图像之间淡出。如果只想进行一次淡入淡出,并在完成后删除第一个图像:

- (void) crossfade {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:.5];
    [UIView setAnimationDelegate:imageView1];
    [UIView setAnimationDidStopSelector:@selector(removeFromSuperview)];
    imageView1.alpha = 0
    [UIView commitAnimations];
}

编辑:

如果你在寻找代码不起作用的原因,那是因为你只是在设置新图像的属性,然后添加一个无用的动画。 CABasicAnimation 有 fromValue 和 toValue 这需要设置,然后将动画添加到层,它应该执行动画。不要手动设置内容。