自定义进度指示器 - 从左到右动画子视图颜色叠加 [英] Custom Progress Indicator - Animate subviews color overlay left to right

问题描述

我有一个包含许多列/子视图的容器 UIView.

I have a container UIView that contains many columns/subviews.

我想在容器 UIView 上创建一个颜色填充动画，如下图所示，从左到右，所以它只会逐渐改变子视图的颜色.

I want to create a color fill animation on the container UIView, left to right as demonstrated on the image below, so it gradually changes the colors of only the subviews.

如何实现?我猜我必须创建一个蒙版并将其移动到这个容器 UIView 上?但是如何实现掩码仅适用于子视图?

How to achieve this? Im guessing i would have to create a mask and move it over this container UIView? But then how to achieve that the mask only applies to the subviews?

这是播放音频文件的进度指示器，因此需要准确指示当前时间位置.此外，我必须能够拥有不同大小的形状，因为它们代表音频波

this is a progress indicator for a playing audio file, so it needs to indicate the current time position precisely. Also i must be able to have the shapes in different sizes as they represent audio waves

推荐答案

我会按照你描述的方式去做.我会把你的音频波形画成一个面具，从而揭示它们背后的任何东西.然后在蒙版后面右侧放置/动画一个彩色矩形以指示音乐进度是微不足道的:

I would do it the opposite to the way you describe it. I would draw your audio wave shapes as a mask, thus revealing whatever is behind them. It is then trivial to position / animate a colored rectangle rightwards behind the mask to indicate the progress through the music:

换句话说，颜色不是叠加层而是底层.

In other words, the color is not an overlay but an underlay.

这篇关于自定义进度指示器 - 从左到右动画子视图颜色叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！