音频波动动效

一时失言乱红尘 2022-05-23 09:10 243阅读 0赞

效果 如下：

![70][]

\#import <UIKit/UIKit.h>

@interface PAAudioAnimationView : UIView

\- (void)startAnimation;

\- (void)stopAnimation;

\- (void)setSoundsValue:(CGFloat)value;

@end

\#import "PAAudioAnimationView.h"

@interfacePAAudioAnimationView()

@property (nonatomic, assign) CGFloat itemLineWidth;

@property (nonatomic, assign) CGFloat itemLineSeparate;

@property (nonatomic, strong) UIColor \*itemColor;

@property (nonatomic, strong) UIColor \*itemBackColor;

@property (nonatomic, strong) CADisplayLink \*displayLink;

@property (nonatomic, assign) CGFloat soundsValue;

@end

@implementation PAAudioAnimationView

\- (instancetype)init\{

if (self = \[super init\]) \{

\_itemLineWidth = 3;

\_itemLineSeparate = 4;

\_soundsValue = 0;

\_itemColor =  \[UIColorcolorWithRed:255/255.0green:96/255.0blue:0/255.0alpha:1/1.0\];

\_itemBackColor =  \[UIColorcolorWithRed:230/255.0green:230/255.0blue:230/255.0alpha:1/1.0\];

returnself;

\- (void)setFrame:(CGRect)frame\{

\[super setFrame:frame\];

\[selfsetItems\];

\[selfstopLayer\];

\- (void)setSoundsValue:(CGFloat)value\{

\_soundsValue = value;

\- (void)setItems\{

\[selfremoveAllSubLayers\];

CGFloat width = self.frame.size.width;

NSInteger numberItem = (width - self.itemLineWidth) / (\_itemLineWidth \+ \_itemLineSeparate);

CGFloat layer\_w = \_itemLineWidth;

CGFloat layer\_x = \_itemLineSeparate;

CGFloat layer\_h = self.frame.size.height;

CGFloat layer\_y = self.frame.size.height \- layer\_h;

CGFloat min\_x = (width - 48 \- 34 \* 2) / 2;

CGFloat max\_x = (width - (width - 48 \- 34 \* 2) / 2);

for (int i = 0; i < numberItem; i++) \{

layer\_x = \_itemLineSeparate \+ (\_itemLineSeparate \+ \_itemLineWidth) \* i;

if (layer\_x > min\_x && layer\_x < max\_x) \{

continue;

layer\_y = \[self layer\_y:i\];

layer\_h = \[self layer\_h:layer\_y\];

UIBezierPath \*itemLinePath = \[UIBezierPathbezierPath\];

\[itemLinePath moveToPoint:CGPointMake(0, layer\_y)\];

\[itemLinePath addLineToPoint:CGPointMake(0, layer\_y + layer\_h)\];

CAShapeLayer \*itemline = \[CAShapeLayerlayer\];

itemline.lineCap       = kCALineCapButt;

itemline.lineJoin      = kCALineJoinRound;

\[itemline setLineWidth:layer\_w \* 2\];

itemline.strokeColor   = \[self.itemColor CGColor\];

itemline.path = \[itemLinePath CGPath\];

UIView \*dynamicView = \[\[UIView alloc\]initWithFrame:CGRectMake(layer\_x, layer\_y, layer\_w, layer\_h)\];

dynamicView.backgroundColor = self.itemBackColor;

dynamicView.layer.masksToBounds = YES;

dynamicView.layer.cornerRadius = layer\_w / 2;

dynamicView.tag = 111;

\[dynamicView.layer addSublayer:itemline\];

\[self addSubview:dynamicView\];

\- (CGFloat)layer\_y:(int)i\{

CGFloat layer\_y = 0;

if (i % 4 == 0) \{

layer\_y = (self.height \- self.height \* 2 / 4) / 2;

\}else if (i % 4 == 1)\{

layer\_y = (self.height \- self.height \* 3 / 4) / 2;

\}else if (i % 4 == 2)\{

layer\_y = 0;

\}else\{

layer\_y = (self.height \- self.height \* 3 / 4) / 2;;

return layer\_y;

\- (CGFloat)layer\_h:(CGFloat)layer\_y\{

return (self.height \- layer\_y \* 2);

\- (void)removeAllSubLayers\{

for (UIView \*view in self.subviews) \{

\[view removeFromSuperview\];

\- (void)updateItemLevel\{

NSArray \*subViews = self.subviews;

for (int i = 0; i < subViews.count; i++) \{

UIView \*subView = subViews\[i\];

if (subView.tag == 111) \{

NSArray \*layers = subView.layer.sublayers;

CAShapeLayer \*lineItem = (CAShapeLayer\*)layers.firstObject;

CGFloat height = arc4random() % (NSInteger)self.frame.size.height \* 2;

height \*= self.soundsValue;

CGFloat value = (1 \- height \* 1.0 / self.frame.size.height);

value = value < 0 ? 0 : value;

lineItem.strokeStart = value;

lineItem.strokeEnd = 1;

\- (void)stopLayer\{

NSArray \*subViews = self.subviews;

for (int i = 0; i < subViews.count; i++) \{

UIView \*subView = subViews\[i\];

if (subView.tag == 111) \{

NSArray \*layers = subView.layer.sublayers;

CAShapeLayer \*lineItem = (CAShapeLayer\*)layers.firstObject;

lineItem.strokeStart = 1;

lineItem.strokeEnd = 1;

\#pragma mark - displayLink 定时器  动画

\- (CADisplayLink \*)displayLink\{

if (!\_displayLink) \{

\_displayLink = \[CADisplayLinkdisplayLinkWithTarget:selfselector:@selector(start)\];

return\_displayLink;

\- (void)start\{

\[selfupdateItemLevel\];

\- (void)startAnimation\{

self.displayLink.frameInterval = 6;

\[self.displayLinkaddToRunLoop:\[NSRunLoopcurrentRunLoop\] forMode:NSRunLoopCommonModes\];

\- (void)stopAnimation\{

if (self.displayLink) \{

\[self.displayLink invalidate\];

self.displayLink = nil;

\[self stopLayer\];

@end

[70]: /images/20220523/86e323c694dc430096a140913c4a2029.png

音频波动动效

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关用了很多动效，介绍 4个很 Nice 的 Vue 路由过渡动效！

相关实现动效星空背景

相关支付中loading动效

相关 android5 Ripple和Reveal动效

相关 css代码皮卡丘动效

相关用jQuery实现手风琴动效

相关音频波动动效

相关 vue-router 中的过渡动效

相关购物车动效添加和svg动效提示

相关实现体检动效、数据滚动条动效和加载动效