声频频谱的动画实例
做一个如图所示的声频频谱图,要求第一个柱子从最高变换到最低,第二个柱子从低变换倒最高,后面的柱子依次按照前两组变换。
#import "ViewController.h"
@interface ViewController ()
@property (strong, nonatomic) IBOutlet UIView *containerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//关键的一步,只要创建一个CAReplicatorLayer复制层
//只要在这一层内创建好要创建的子层对象,然后告诉CAReplicatorLayer要创建多少组这样的子层(包括先前创建的一组也在内),
//如果做动画,每组动画需要不需要设定动画播放的间隔
CAReplicatorLayer *repeatLayer = [CAReplicatorLayer layer];
repeatLayer.backgroundColor = [UIColor blueColor].CGColor;
repeatLayer.frame = self.containerView.bounds;
repeatLayer.instanceDelay = 1;
repeatLayer.instanceCount = 3;
repeatLayer.instanceTransform = CATransform3DMakeTranslation(100, 0, 0);
[self.containerView.layer addSublayer:repeatLayer];
CALayer *layer = [CALayer layer];
layer.backgroundColor = [UIColor greenColor].CGColor;
layer.bounds = CGRectMake(0, 0, 30, 200);
layer.anchorPoint = CGPointMake(0, 1);
layer.position = CGPointMake(0,self.containerView.bounds.size.height);
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform.scale.y";
animation.toValue = @0;
animation.autoreverses = YES;
animation.removedOnCompletion = NO;
animation.repeatCount = MAXFLOAT;
animation.fillMode = kCAFillModeForwards;
animation.duration = 1;
[layer addAnimation:animation forKey:nil];
CALayer *layer2 = [CALayer layer];
layer2.backgroundColor = [UIColor redColor].CGColor;
layer2.bounds = CGRectMake(0, 0, 30, 200);
layer2.anchorPoint = CGPointMake(0, 1);
layer2.position = CGPointMake(layer.bounds.size.width + 20, self.containerView.bounds.size.height);
layer2.transform = CATransform3DMakeScale(1, 0, 0);
CABasicAnimation *animation2 = [CABasicAnimation animation];
animation2.keyPath = @"transform.scale.y";
animation2.toValue = @1;
animation2.autoreverses = YES;
animation2.removedOnCompletion = NO;
animation2.repeatCount = MAXFLOAT;
animation2.fillMode = kCAFillModeForwards;
animation2.duration = 1;
[layer2 addAnimation:animation2 forKey:nil];
[repeatLayer addSublayer:layer];
[repeatLayer addSublayer:layer2];
}
@end