Music vibration bar effect based on IOS

Time:2022-5-3

1、 Simple analysis

The music vibration bar does not need to interact with the user. We can use the replication layer to operate. Add vibration bar. Add animation.

Copy layer description

//Create replication layer
-(void)createRepl{
 //Replication layer
 CAReplicatorLayer * repL = [CAReplicatorLayer layer];
 repL.frame = self.contentV.bounds;
 //6 copies
 repL.instanceCount = 6;
 //Deformation, each deformation starts with respect to the previous copied sub layer
 repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
 //Animation delay execution
 repL.instanceDelay = 0.5;
 ///To set the color of the duplicate layer, set the color of the original layer to white
 repL.instanceColor = [UIColor redColor].CGColor;
 [self.contentV.layer addSublayer:repL];

 self.repL = repL;
}

2、 Code

//
// ViewController.m
// 03_ UIView75_ Music vibration bar
//
//Created by Qiwen on 17 / 7 / 21
// Copyright  ©  2017 qiwenming All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *contentV;
@property (weak,nonatomic) CAReplicatorLayer * repL;
@property (weak,nonatomic) CALayer * layer;
@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];

 //1. Create replication hierarchy
 [self createRepl];

 //2. Add volume vibration bar
 [self addVoiceBar];

 //3. Add animation
 [self addAnimation];
}


//Create replication layer
-(void)createRepl{
 //Replication layer
 CAReplicatorLayer * repL = [CAReplicatorLayer layer];
 repL.frame = self.contentV.bounds;
 //6 copies
 repL.instanceCount = 6;
 //Deformation, each deformation starts with respect to the previous copied sub layer
 repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
 //Animation delay execution
 repL.instanceDelay = 0.5;
 ///To set the color of the duplicate layer, set the color of the original layer to white
 repL.instanceColor = [UIColor redColor].CGColor;
 [self.contentV.layer addSublayer:repL];

 self.repL = repL;
}

//Add volume vibration bar
-(void)addVoiceBar{
 CALayer * layer = [CALayer layer];
 layer.frame = CGRectMake(0, self.contentV.bounds.size.height-150, 30, 150);
 layer.backgroundColor = [UIColor whiteColor].CGColor;

 layer.position = CGPointMake(0, self.contentV.bounds.size.height);
 layer.anchorPoint = CGPointMake(0, 1);

 [self.repL addSublayer:layer];
 self.layer = layer;
}

//Add animation
-(void)addAnimation{
 //Add animation 对y方向缩放
 CABasicAnimation * anim = [CABasicAnimation animation];
 //Set properties
 anim.keyPath = @"transform.scale.y";
 anim.toValue = @0;
 anim.repeatCount = MAXFLOAT;
 anim.autoreverses = YES;
 anim.duration = 0.5;
 [self.layer addAnimation:anim forKey:nil];
}

@end

3、 Illustration

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.