音量振动条的效果图
相信大家对老版音乐播放界面的音量振动条都还有印象,那时候的音乐播放就是像上图一样的界面,小时候的我对此是深感神奇的,而今天我就来实现这个功能去找回童年的记忆。
关键点分析: 多个图层,设置动画的缩放,延时操作。
具体实现: 在这里如果创建多个视图,然后一个个去设置它们的动画延时时间无疑是非常浪费精力的,在这里我们就可以用到一个比较实用的东西了:复制图层(CAReplicatorLayer),它可以对一个图层进行复用,而我们这里的图层的动画动画都是类似的,用它再合适不过了。而它的用法也很简单,只要将要复用的图层调用addSublayer这个方法加入就行了。
实现代码:
@interface ViewController (){
UIView *backgroundView;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//设置灰色背景
backgroundView = [[UIView alloc]initWithFrame:CGRectMake(20, 100, 360, 300)];
backgroundView.backgroundColor = [UIColor grayColor];
[self.view addSubview:backgroundView];
[self addLayer];
}
//设置图层
- (void)addLayer{
//复制图层,可以把图层里面的所有子层复制,创建一个和背景视图一样大的复制图层
CAReplicatorLayer *repl = [CAReplicatorLayer layer];
repl.frame = backgroundView.bounds;
[backgroundView.layer addSublayer:repl];
//用来复用的图层位置和动画的设置
CALayer *layer = [CALayer layer];
layer.backgroundColor = [UIColor whiteColor].CGColor;
layer.position = CGPointMake(15, 300);
layer.anchorPoint = CGPointMake(0.5, 1);
layer.bounds = CGRectMake(0, 0, 30, 270);
[repl addSublayer:layer];
//核心动画实现伸缩
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform.scale.y";
animation.toValue = @0.5;
animation.duration = 1;
animation.repeatCount = MAXFLOAT;
//设置动画的反转效果
animation.autoreverses = YES;
[layer addAnimation:animation forKey:nil];
//设置复制子层的数量,包括原始层
repl.instanceCount = 9;
//设置子层的偏移量,相对于原始层偏移
repl.instanceTransform = CATransform3DMakeTranslation(40, 0, 0);
//设置复制层动画延迟时间
repl.instanceDelay = 0.2;
//设置子层的颜色,如果原始层不是白色,这里设置为绿色或其他的颜色会有问题
repl.instanceColor = [UIColor greenColor].CGColor;
//设置颜色的渐变量
repl.instanceGreenOffset = -0.1;
}