音乐波形图动画效果

音乐波形图动画效果

 

注意

经过测试，后期会发热严重，有优化的必要，但目前还没有处理。

 

效果

 

源码

https://github.com/YouXianMing/Animations

//

// MusicBarAnimationController.m

// Animations

// Created by YouXianMing on 16/1/15.

// Copyright © 2016年 YouXianMing. All rights reserved.

#import "MusicBarAnimationController.h"

#import "GCD.h"

@interface MusicBarAnimationController ()

@property (nonatomic, strong) GCDTimer *timer;

@implementation MusicBarAnimationController

- (void)setup {

 [super setup];

 self.view.backgroundColor = [UIColor blackColor];

 CGFloat width = self.contentView.frame.size.width;

 CGFloat height = self.contentView.frame.size.height;

 CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];

 [self.contentView.layer addSublayer:replicatorLayer];

 replicatorLayer.frame = CGRectMake(0, 0, width, height);

 replicatorLayer.position = self.view.center;

 replicatorLayer.borderWidth = 0.5f;

 replicatorLayer.instanceCount = width / 8;

 replicatorLayer.masksToBounds = YES;

 replicatorLayer.instanceTransform = CATransform3DMakeTranslation(-8.0, 0.0, 0.0);

 replicatorLayer.instanceDelay = 0.5f;

 CALayer *layer = [CALayer layer];

 layer.frame = CGRectMake(width - 4, height, 4, height);

 layer.backgroundColor = [UIColor blackColor].CGColor;

 layer.cornerRadius = 2.f;

 [replicatorLayer addSublayer:layer];

 self.timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];

 [self.timer event:^{

 CABasicAnimation *colorAnimation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];

 colorAnimation.toValue = (id)[UIColor colorWithRed:arc4random() % 256 / 255.f

 green:arc4random() % 256 / 255.f

 blue:arc4random() % 256 / 255.f

 alpha:1].CGColor;

 CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];

 positionAnimation.toValue = @(layer.position.y - arc4random() % ((NSInteger)height - 64));

 CAAnimationGroup *group = [CAAnimationGroup animation];

 group.duration = 1.f;

 group.autoreverses = true;

 group.repeatCount = CGFLOAT_MAX;

 group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

 group.animations = @[colorAnimation, positionAnimation];

 [layer addAnimation:group forKey:nil];

 } timeIntervalWithSecs:1.f delaySecs:1.f];

 [self.timer start];

@end

细节

 

1）导入素材，建动画。 在library中，右键Animations   Animation Clips   Animation Clip，打开Animation Clip Editor。
第41天：匀速、缓动运动和图片无缝滚动 一、匀速运动和缓动运动 缓动运动公式：leader=leader+(target-leader)/10;//leader为初始值0，target为结束值,10可以改变，值越大，速度越慢 1 DOCTYPE html 5 运动