基于iOS实现音乐震动条效果
作者:愤怒的小明
这篇文章主要为大家详细介绍了基于iOS实现音乐震动条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
一、简单分析
音乐震动条不需要与用户交互。我们可以使用复制层来操作。添加震动条。添加动画。
复制层说明
//创建复制层 -(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
三、图示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。