音乐波形图动画效果

注意

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

效果

源码

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

细节

时间: 2025-01-03 15:50:49

音乐波形图动画效果的相关文章

Swift版本仿网易云音乐播放音乐动画效果

个人技术博客站欢迎您 创建一个继承于UIView的视图我们叫他XTActivityView /// 立方柱的个数 var numberOfRect = 0; /// 立方柱的颜色 var rectBackgroundColor: UIColor? /// 立方柱初始化大小 var defaultSize: CGSize? /// 立方柱之间的间距 var space: CGFloat = 0.0 进行初始化 override init(frame: CGRect) { super.init(fr

Javascript动画效果(四)

Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢? 首先我们我们完成该效果的html和css代码,代码如下: html部分代码: <div id="move"> <a href="#"><i><img src="images/1

duilib制作窗体动画效果

转载请说明原出处,谢谢~·http://blog.csdn.net/zhuhongshu/article/details/49026605 最近一段时间没写博客了,感觉最近没有遇到什么必须解决的bug.在一年前我把自己写的仿酷狗音乐播放器Demo写到博客时,我在博客末尾写过以后会做异形窗体和窗体动画的功能.异形窗体在半年前大概做完并且集成到我的库里了,但是窗体动画Demo没有写到博客.之前就有网友问我窗体动画的制作方法,一直懒着没写,不好意思···. 今天把窗体动画的制作思路和Demo说明一下.

AnimCheckBox按钮点击动画效果《IT蓝豹》

AnimCheckBox按钮点击动画效果 AnimCheckBox按钮点击动画效果,点击选中后勾选框选择效果,很不错的动画功能.项目来源:https://github.com/lguipeng/AnimCheckBox本项目主要介绍:本项目主要自定义AnimCheckBox 集成View,提供选择的监听接口OnCheckedChangeListener主要由drawCircle()方法和drawHook(Canvas canvas):  private void drawCircle(Canva

iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

iOS 之动画效果

/** type *  各种动画效果  其中除了'fade', `moveIn', `push' , `reveal' ,其他属于私有的API. *  ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用. *  @"cube"                     立方体翻滚效果 *  @"moveIn"    

Core Animation 动画效果介绍

在开始之前呢,先了解一下UIView和CALayer大体的区别(重点列举了以下四点): UIView继承自 UIResponder,因此UIView 可以处理响应事件,而CALayer继承自NSObject,所以它只是负责内容的创建,绘制. UIView负责对内容的管理,而CALayer则是对内容的绘制 UIView中有关位置的属性只有frame.bounds.center,而CALayer除了具备这些属性之外还有anchorPoint.position. 通过修改CALayer可以实现UIVi

带感”的边框交互动画效果

  效果的原理其实就是"四条边"发生宽度和高度的变化,上下两边是宽度变化,左右两边是高度的变化: 它们发生变化的方向也可以可控的,根据坐标设置即可控制. 下面我们直接上代码: 首先准备基础代码,那四条边并不是真正的border,而是通过标签加以宽高写出来,然后定位到四个方向: <!-- html --> <div class="box"> <div class="topL"></div> <d

iOS开发 QQ粘性动画效果

QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.html 主题 iOS开发 qq的app中要是有新的联系人发消息过来,相应联系人的cell右边会有一个红色的圆圈表示消息条数.如果去触碰那个圆圈,可以发现它竟然会跟着手指的移动而移动. 在一定范围内,手指离开屏幕,会发现红色圆圈会自动弹性的回到原来的位置.而如果超出一定距离,这个圆圈会做一个销毁的动画,