音乐波形图动画效果

简介:

音乐波形图动画效果

 

注意

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

 

效果

 

源码

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;

@end

@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月前
Threejs播放模型自带动画
这篇文章介绍了在Three.js中如何播放带有预设动作的模型动画,并特别提到了如何设置动画循环模式以实现一次性播放效果。
51 3
Threejs播放模型自带动画
|
2月前
宇宙星星转动特效带背景音乐引导页源码
宇宙星星转动特效带背景音乐引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
57 7
宇宙星星转动特效带背景音乐引导页源码
|
3月前
PPT 动画-树叶摆动
PPT 动画-树叶摆动
30 0
|
3月前
PPT 动画-旋转唱片
PPT 动画-旋转唱片
52 0
|
6月前
使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
51 2
使用html+css制作一个发光立方体特效
|
6月前
如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果?
如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果?
|
11月前
|
前端开发
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果
|
iOS开发
水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~
水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~
166 0
An动画基础之元件的影片剪辑效果
An动画基础之元件的影片剪辑效果
415 0
An动画基础之元件的影片剪辑效果
An动画基础之元件的影片剪辑动画与传统补间
An动画基础之元件的影片剪辑动画与传统补间
350 0
An动画基础之元件的影片剪辑动画与传统补间