基於音量級別反饋的UIImageView動畫

Question

我有一個需求來創建具有自定義模式的音頻級可視化器。我的圖像設置爲PNG的。 我目前的做法是這樣的

1）獲取麥克風

2）加載基於音量到UIImageView的相關圖像的音頻電平。

// 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"]; 
} 

} 

但輸出不順暢作爲一個真正的可視化動畫。什麼應該是最好的方法？分享有更好的方法來做到這一點。

夫婦圖像

Answer 1

如果你感覺圖像變化正在乾的，你最好對他們適用的動畫。順便說一句，您不需要設置nil到imgViewRecordAnimation.image，因爲您在所有時間之後都會設置適當的圖像，這會引入不必要的延遲。你也可以將所有的if語句做成if，否則每次if語句都被執行。

即將到來的解決方案，您可以簡單地按照@MileAtNobel發佈的鏈接。或者，如果您不想執行大量代碼更改，則可以在backgroundColor屬性上應用簡單的動畫。你也可以刪除計時器，檢查下面的代碼，看看代碼是否工作正常。我也試圖優化與代碼非常相似的代碼，我希望這可以提高性能。

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]; 
    }]; 
} 

Answer 2

好吧，我不會給你一個直接的解決方案，但將嘗試提出一個解決方案，你將不得不嘗試。 因此，不要更改imageView的圖像，而要編寫自定義控件。 創建視圖的子類。覆蓋該直接方法。在這種情況下，您可以根據控制值繪製所需的圖案，也可以繪製圖像本身。但建議採用第一種方法。 與更改圖像相比，自定義繪圖很流暢。 請嘗試一下，讓我知道這個作品。