音乐波形图动画效果

音乐波形图动画效果

 

注意

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

 

效果

 

源码

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

细节

 

时间: 2016-04-14

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

Flash制作简单的音乐波形动画效果

通过对一个影片剪辑的x轴坐标不同位置的复制,以及控制复制出来的影片剪辑的x轴缩放比例来完成效果. 具体步骤 1,  运行flash mx,新建一个图形元件,在编辑区里面绘制一个4*30像素的无边框矩形. 2,  新建一个影片剪辑,从库中把这个图形元件拖放到影片剪辑中. 3,  返回到主场景,把影片剪辑放置在场景的第1帧.并在属性面板中给影片剪辑命名为"line". 4,  选中第1帧,打开as面板,添加如下as: max = 40;  //最大值  setProperty("

解析MATERIAL DESIGN中交互动画效果之FAB

  进入正题,先看效果: 这是基于我目前正在制作的一款音乐播放器为功能原型的FAB案列: 当触发底部的"正在播放音乐"栏上的暂定按钮时,当前音乐暂停,且音乐栏将收拢形成一个圆形的Floating Button,当点击FAB所代表的播放按钮后,则FAB扩展为之前的"正在播放音乐"栏,继续播放音乐. Google在其MaterialDesign Guideline中将其描述为: Toolbar The floating action button can transfo

duilib制作窗体动画效果

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

Javascript动画效果(4)_javascript技巧

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

正确地使用动画效果可以显著提升支付体验

摘要: 设计支付表单看似一件简单的事情,但是如果仔细考虑一下,支付表单实际上是用户在线购买的关键一环,填写支付表单意味着消费者认可你的服务.这个过程的用户体验应该做得尽可 设计支付表单看似一件简单的事情,但是如果仔细考虑一下,支付表单实际上是用户在线购买的关键一环,填写支付表单意味着消费者认可你的服务.这个过程的用户体验应该做得尽可能好,而正确地使用动画效果可以显著提升支付体验. 动画效果不应该仅仅为了好看,而是应该帮助用户更好地了解发生了什么,以及如何高效地使用产品.判断动画效果好坏的一个原则

如何通过动画效果优化支付过程的用户体验?

摘要: 设计支付表单看似一件简单的事情,但是如果仔细考虑一下,支付表单实际上是用户在线购买的关键一环,填写支付表单意味着消费者认可你的服务.这个过程的用户体验应该做得尽可 设计支付表单看似一件简单的事情,但是如果仔细考虑一下,支付表单实际上是用户在线购买的关键一环,填写支付表单意味着消费者认可你的服务.这个过程的用户体验应该做得尽可能好,而正确地使用动画效果可以显著提升支付体验. 动画效果不应该仅仅为了好看,而是应该帮助用户更好地了解发生了什么,以及如何高效地使用产品.判断动画效果好坏的一个原则

从顶部出现窗体动画效果

问题描述 从顶部出现窗体动画效果 这个都是从底部,从顶部怎么做呀?请您这边就是说我们这边的文件信息提示,我们这边的文件,实现不了我的这个功能

在Fireworks中制作淡入淡出动画效果

淡出|淡入 淡入淡出动画效果 用fireworks做的淡入淡出效果,有人说看PNG格式看不出真正的步骤,所以在此补上这样一篇教程. 对象的淡入淡出效果是firewoks可以创建的普通效果之一,对两个链接对象进行插帧的时候,其中一个对象的不透明度设置为0%,一个对象的不透明度设置为100%,就可以获得淡入淡出效果. 制作步骤: 一.首先新建一个文件,画一个圆,在FILL面板中设置edge:feather:10,设feather的目的是在运动过程中边缘不至于太生硬,影响效果.点中圆,按F8键,选择t

UILabel混合显示动画效果

UILabel混合显示动画效果   效果   源码 https://github.com/YouXianMing/Animations // // MixedColorProgressViewController.m // Animations // // Created by YouXianMing on 16/1/5. // Copyright 2016年 YouXianMing. All rights reserved. // #import "MixedColorProgressView