用于波形颜色变化的动画图像擦除

Posted

技术标签:

【中文标题】用于波形颜色变化的动画图像擦除【英文标题】:animated image wipe for waveform color change 【发布时间】:2014-07-09 02:09:58 【问题描述】:

我有一个UIImage 的波形,它是从音频文件的样本中创建的。波形为蓝色,背景为白色。我希望蓝色波形在播放音频时变为红色以指示进度。如果我有两个相同波形的 UIImage:一个是蓝色的,一个是红色的 - 是否有某种动画图像擦除可以实现这一点?

当波形为UIView 并且我只是在蓝色 UIView 波形上绘制红色 UIView 波形时,我已经能够实现这一点,但是如果我有多个波形(我这样做 - 在表格视图中),这使我的 CPU 使用率超过 95% 并导致很多延迟 - 即使没有播放音频。我相信如果我走 UIImage 路线,事情会顺利得多,因为我只有静态图像。

有什么建议吗?

【问题讨论】:

您可以使用 transitionWithView:duration:options:animations:completion: 在两个图像之间进行淡入淡出。在这里查看我的答案,***.com/questions/24370695/… 如果我可以从左到右淡出/淡入,那可能会起作用。这可能吗? 哦,抱歉,您正在寻找从一侧到另一侧的擦除效果?我不认为你可以用这种方法做到这一点。您是否考虑过将音频数据转换为 UIBezierPath?您可以为贝塞尔路径的描边设置动画。 在早期阶段,我使用 UIBezierPath 渲染波形,然后将其捕获为图像并将图像显示在我的 tableview 单元格中。我不太确定,但我认为处理两个静态图像并不像一遍又一遍地绘制 UIBezierPath 那样占用 CPU。 【参考方案1】:

据我所知,做到这一点的唯一方法是让两个 UIImageView 一个在另一个之上,并在顶部设置一个蒙版动画,使其以从左到右的方式消失,从而显示图像下。在一个测试应用程序中,我将红色图像的图像视图放在蓝色图像的顶部。

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *redImageView;
@property (weak, nonatomic) IBOutlet UIImageView *blueImageView;
@property (strong,nonatomic) UIBezierPath *maskPath;

@end

@implementation ViewController

- (void)viewDidLoad 
    [super viewDidLoad];
    self.maskPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 0, self.redImageView.bounds.size.height)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = self.redImageView.bounds;
    maskLayer.path = self.maskPath.CGPath;
    self.redImageView.layer.mask = maskLayer;
    [self performSelector:@selector(enlargeMask:) withObject:maskLayer afterDelay:2];


-(void)enlargeMask:(CAShapeLayer *) shapeLayer 

    UIBezierPath *newPath = [UIBezierPath bezierPathWithRect:self.redImageView.bounds];
    CABasicAnimation* pathAnim = [CABasicAnimation animationWithKeyPath: @"path"];
    pathAnim.fromValue = (id)self.maskPath.CGPath;
    pathAnim.toValue = (id)newPath.CGPath;
    pathAnim.duration = 1;
    shapeLayer.path = newPath.CGPath;
    [shapeLayer addAnimation:pathAnim forKey:@"path"];


【讨论】:

我正在阅读CAShapeLayer 的苹果文档。简单地说——它画一条样条线? @Brosef,不用担心定义,它会绘制一个形状。在我的回答中,它只是一个矩形,所以当你增加它的宽度时,它会从左到右扫过整个蓝色轨迹。 明白了。我完全按照您在 blueImageView 顶部使用 redImageView 编写的代码实现了您的代码。我注意到首先出现蓝色视图,然后红色视图从左到右出现,覆盖了蓝色视图。根据你的描述,我预计红色视图会消失,露出它下面的蓝色视图。 @Brosef,这就是应该发生的事情,除了红色视图实际上并没有覆盖蓝色视图,红色视图仍在蓝色下方 - 正在发生的事情是蓝色视图正在蒙面,以便它揭示下面的东西。这是你想要的效果吗? 是的,它运行良好。我想要做的是在我的didSelectRowAtIndexPath 方法中触发放大掩码方法。我可以让它为一个单元格工作,但它会不断重复旧单元格的效果,即使我点击一个新单元格也是如此。

以上是关于用于波形颜色变化的动画图像擦除的主要内容,如果未能解决你的问题,请参考以下文章

jQuery:悬停链接时在div中动画(淡化)背景颜色或图像?

重新填充画布擦除区域的区域

如何通过 CSS3 动画淡入背景图像

如何为 UIBezierPath 上的填充颜色变化设置动画?

如何在悬停时为链接的颜色设置动画

从下到上的动画边框颜色变化?