UIImageView animation based on volume level feedback

Question

I have a requirement to create a audio level visualizer with a custom pattern. I have the image set as png's. My current approach is like this

1) Get the audio level of the microphone

2) Load the relevant image to the UIImageView based on the volume level.

// audio level timer
self.levelTimer = [NSTimer scheduledTimerWithTimeInterval: 0.001 target: self selector: @selector(levelTimerCallback:) userInfo: nil repeats: YES];

ImageView

- (void)levelTimerCallback:(NSTimer *)timer {
[self.audioRecorder updateMeters];
const double ALPHA = 0.05;
double peakPowerForChannel = pow(10, (0.05 * [self.audioRecorder peakPowerForChannel:0]));
lowPassResults = ALPHA * peakPowerForChannel + (1.0 - ALPHA) * lowPassResults;

//NSLog(@"Average input: %f Peak input: %f Low pass results: %f", [self.audioRecorder averagePowerForChannel:0], [self.audioRecorder peakPowerForChannel:0], lowPassResults);

if (lowPassResults > 0.0 && lowPassResults <= 0.05){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim1"];
}
if (lowPassResults > 0.06 && lowPassResults <= 0.10){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim2"];
}
if (lowPassResults > 0.11 && lowPassResults <= 0.15){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim3"];
}
if (lowPassResults > 0.16 && lowPassResults <= 0.20){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim4"];
}
if (lowPassResults > 0.21 && lowPassResults <= 0.25){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim5"];
}
if (lowPassResults > 0.26 && lowPassResults <= 0.30){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim6"];
}
if (lowPassResults > 0.31 && lowPassResults <= 0.35){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim7"];
}
if (lowPassResults > 0.36 && lowPassResults <= 0.40){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim8"];
}
if (lowPassResults > 0.41 && lowPassResults <= 0.45){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim9"];
}
if (lowPassResults > 0.46 && lowPassResults <= 0.50){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim10"];
}
if (lowPassResults > 0.51 && lowPassResults <= 0.55){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim11"];
}
if (lowPassResults > 0.56 && lowPassResults <= 0.60){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim12"];
}
if (lowPassResults > 0.61 && lowPassResults <= 0.65){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim13"];
}
if (lowPassResults > 0.66 && lowPassResults <= 0.70){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim14"];
}
if (lowPassResults > 0.71 && lowPassResults <= 0.75){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim15"];
}
if (lowPassResults > 0.76 && lowPassResults <= 0.80){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim16"];
}
if (lowPassResults > 0.81 && lowPassResults <= 0.85){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim17"];
}
if (lowPassResults > 0.86 && lowPassResults <= 0.90){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim18"];
}
if (lowPassResults > 0.86){
    imgViewRecordAnimation.image = nil;
    imgViewRecordAnimation.image = [UIImage imageNamed:@"anim19"];
}

}

But the output is not smooth as a real visualizer animation. What should be the best approach? Share there's any better ways to do this.

Couple of images

enter image description here

This sounds like it could be the same as this issue: http://stackoverflow.com/questions/2834573/how-to-animate-the-change-of-image-in-an-uiimageview — dudeman, Jun 24 '15 at 16:25
Why are you setting image to nil every time before se tting image property (`imgViewRecordAnimation.image = nil;`) ? — arturdev, Jul 01 '15 at 11:50

Trident · Answer 1 · 2015-06-25T18:09:35.563

If you feel the image changes is looking jerky, you better apply animations on them. By the way, you do not need to set nil to imgViewRecordAnimation.image, as you are setting proper images after that all the times, which will introduce unnecessary delay. You can also make all the if statements to else if, otherwise each time all the if statements get executed.

Coming to the solution, you can simply follow the link that @MileAtNobel posted. Or if you do not want to do much code changes, you can apply simple animation on backgroundColor property. You can remove the timer also, check the below code and see if the code is working good. I also tried to optimize the code with close resemblance, I hope this improves the performance.

BOOL flagToContinue ; //assign NO to this flag to stop updating the images

-(void)levelTimerCallback
{
    NSLog(@"Volume Logic Begins") ;//Volume level logic begins
    [self.audioRecorder updateMeters];
    const double ALPHA = 0.05;
    double peakPowerForChannel = pow(10, (0.05 * [self.audioRecorder peakPowerForChannel:0]));
    lowPassResults = ALPHA * peakPowerForChannel + (1.0 - ALPHA) * lowPassResults ;
    NSLog(@"Volume Logic ends") ;//Volume level logic ends

    [UIView animateWithDuration:0.001f
              delay:0.0f
            options: UIViewAnimationOptionCurveLinear
         animations:^{
           mgViewRecordAnimation.backgroundColor = [UIColor colorWithPatternImage:[NSString stringWithFormat:@"anim%d", (int)ceil(lowPassResults * 20)]];
         }
         completion:^(BOOL finished) {
           if(finished && flagToContinue) [self levelTimerCallback];
    }];
}

Thanks for the answer, But still same, not smooth as normal image animation — smartsanja, Jun 25 '15 at 17:49
In that case you should see how much time is it taking to find out the volume. Take time stamps before starting and after ended(as mentioned in my code) and see the time difference, I think your volume logic is taking more time, thats why the animations are not smooth. — Trident, Jun 25 '15 at 18:11

score 2 · Answer 2 · answered Jul 01 '15 at 08:06

Ok, I will not give you a direct solution, but will try to suggest a solution, which you will have to try. So, instead of changing the image of the imageView, write a custom control. Create a subclass of a view. Override the drawrect method. In that, either you can draw the required pattern depending upon the control value or you draw the image itself. But the first approach is recommended. Custom drawing is smooth as compared to changing the image. Please try it out and let me know it this works.

UIImageView animation based on volume level feedback

2 Answers2