当前位置： 移动技术网 > 移动技术>移动开发>IOS > 基于iOS实现音乐震动条效果

基于iOS实现音乐震动条效果

2019年07月24日  | 移动技术网移动技术  | 我要评论

一、简单分析

音乐震动条不需要与用户交互。我们可以使用复制层来操作。添加震动条。添加动画。

复制层说明

//创建复制层
-(void)createrepl{
 //复制层
 careplicatorlayer * repl = [careplicatorlayer layer];
 repl.frame = self.contentv.bounds;
 //复制6份
 repl.instancecount = 6;
 //形变，每一个形变都是相对于上一个复制出来的子层开始的
 repl.instancetransform = catransform3dmaketranslation(45, 0, 0);
 //动画延时执行
 repl.instancedelay = 0.5;
 ///要设置复制层的颜色 原始层的颜色要设为白色.
 repl.instancecolor = [uicolor redcolor].cgcolor;
 [self.contentv.layer addsublayer:repl];

 self.repl = repl;
}

二、代码

//
// viewcontroller.m
// 03_uiview75_音乐震动条
//
// created by 杞文明 on 17/7/21.
// copyright © 2017年 杞文明. all rights reserved.
//

#import "viewcontroller.h"

@interface viewcontroller ()
@property (weak, nonatomic) iboutlet uiview *contentv;
@property (weak,nonatomic) careplicatorlayer * repl;
@property (weak,nonatomic) calayer * layer;
@end

@implementation viewcontroller

- (void)viewdidload {
 [super viewdidload];

 //1.创建复制层次
 [self createrepl];

 //2.添加音量震动条
 [self addvoicebar];

 //3.添加动画
 [self addanimation];
}


//创建复制层
-(void)createrepl{
 //复制层
 careplicatorlayer * repl = [careplicatorlayer layer];
 repl.frame = self.contentv.bounds;
 //复制6份
 repl.instancecount = 6;
 //形变，每一个形变都是相对于上一个复制出来的子层开始的
 repl.instancetransform = catransform3dmaketranslation(45, 0, 0);
 //动画延时执行
 repl.instancedelay = 0.5;
 ///要设置复制层的颜色 原始层的颜色要设为白色.
 repl.instancecolor = [uicolor redcolor].cgcolor;
 [self.contentv.layer addsublayer:repl];

 self.repl = repl;
}

//添加音量震动条
-(void)addvoicebar{
 calayer * layer = [calayer layer];
 layer.frame = cgrectmake(0, self.contentv.bounds.size.height-150, 30, 150);
 layer.backgroundcolor = [uicolor whitecolor].cgcolor;

 layer.position = cgpointmake(0, self.contentv.bounds.size.height);
 layer.anchorpoint = cgpointmake(0, 1);

 [self.repl addsublayer:layer];
 self.layer = layer;
}

//添加动画
-(void)addanimation{
 //添加动画 对y方向缩放
 cabasicanimation * anim = [cabasicanimation animation];
 //设置属性
 anim.keypath = @"transform.scale.y";
 anim.tovalue = @0;
 anim.repeatcount = maxfloat;
 anim.autoreverses = yes;
 anim.duration = 0.5;
 [self.layer addanimation:anim forkey:nil];
}

@end

三、图示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网