声频频谱的动画实例

做一个如图所示的声频频谱图,要求第一个柱子从最高变换到最低,第二个柱子从低变换倒最高,后面的柱子依次按照前两组变换。

#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

results matching ""

    No results matching ""