如何在应用模糊的情况下交叉淡化 UIImageView 的图像

Posted 2023-03-13

【中文标题】如何在应用模糊的情况下交叉淡化 UIImageView 的图像

【英文标题】：How to cross-fade the image of UIImageView with blur applied

【发布时间】：2015-04-22 22:59:02

【问题描述】：

我正在尝试交叉淡入淡出到新图像。这是一个添加了 UIVisualEffectView 的 UIImageView：

self.bgBlurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
self.visualEffectView = [[UIVisualEffectView alloc] initWithEffect:self.bgBlurEffect];

self.visualEffectView.frame = self.bgImageView.bounds;
[self.bgImageView addSubview:self.visualEffectView];

这是我尝试淡入新图像的方式：

UIImage *toImage = [UIImage imageNamed:imgName];

CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"];
crossFade.duration = 2.5;
crossFade.delegate = self;
crossFade.fromValue = (id)self.bgImageView.image.CGImage;
crossFade.toValue = (id)toImage.CGImage;
[self.bgImageView.layer addAnimation:crossFade forKey:@"animateContents"];
self.bgImageView.image = toImage;

这实际上在模拟器中有效，但在设备（iPhone 6）上，图像完全变灰 2.5 秒，然后新图像立即出现。有关如何解决此问题的任何想法？

编辑：这也不起作用：

[UIView transitionWithView:self.bgImageView
                  duration:2.5
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^
                    self.bgImageView.image = toImage;
                 completion:nil];

【参考方案1】：

也许这种方法适用于淡入淡出动画：

self.bgImageView.image = toImage;

CATransition *fadeTransition = [CATransition animation];
fadeTransition.duration = 2.5;
fadeTransition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
fadeTransition.type = kCATransitionFade;

[self.bgImageView.layer addAnimation:fadeTransition forKey:nil];

【讨论】：

那行不通。 self.bgImageView.image = toImage; 立即设置新图像。然后 2.5 秒后它变得模糊。

@soleil 尝试将 visualEffectView 添加到您要添加 bgImageView 的同一个视图中，并确保它在 bgImageView 上方以便它模糊它（您还需要给它相同的框架以便它将涵盖所有内容）。我试过了，它对我有用。