首页 > 系统 > iOS > 正文

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

2020-07-26 02:44:43
字体:
来源:转载
供稿:网友

一、简单分析

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

复制层说明

//创建复制层-(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

三、图示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表