基于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

三、图示

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

时间: 2017-07-20

IOS开发实现手机震动的提示实例代码

IOS开发实现手机震动的提示实例代码 我们都知道手机有震动功能,其实呢,这个功能实现起来特别的简单,我们只需要用到几个函数就可以了: - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event - (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event - (void)motionCancelled:(UIEventSubtype)mot

iOS仿微信摇一摇动画效果加震动音效实例

众所周知, 微信中的摇一摇功能: 搜索人/歌曲/电视,同样在一些其他类APP中也有一个摇一摇签到, 摇一摇随机选号等功能,下面以微信摇一摇功能来介绍实现原理. 对于摇一摇功能, 在iOS中系统默认为我们提供了摇一摇的功能检测API. iOS 中既然已经提供了接口, 我们直接调用就好了. #import <QuartzCore/QuartzCore.h> #import <AudioToolbox/AudioToolbox.h> 实现原理 1. 监听摇一摇方法 // 摇一摇开始 -

iOS仿微信摇一摇功能

iOS仿照微信摇一摇功能实现 一.描述 需要做一个界面,仿照微信摇一摇,获取接口进行签到功能. 首先明确以下几点: 1.需要震动. 2.需要声音.(准备好mp3音效) 二.直接贴代码 / Created by 石雄伟 on 16/7/29. // Copyright © 2016年 石雄伟. All rights reserved. // #import "SignBoardViewController.h" #import <AVFoundation/AVFoundation.

iOS仿微信添加标签效果(shape实现)

一. 概述 可以说微信做的用户体验太棒了,可以做到老少皆宜,给个赞,我们也同时应该告诫自己,用户体验应该向微信看齐,微信就是我们的标杆,那我们今天也来仿一仿微信添加的标签功能.只能仿着做了,真是做不到微信的那种体验.甘拜下风. 我们上篇学习了shape属性的用法,那我们今天就用shape来做下微信的标签功能.先看一下效果. 我不仅用到了shape属性,还用到了翔哥的标签布局FlowLayout跟TagFlowLayout鸿洋的博客 二.效果图 三 .定义shape 添加标签 <?xml vers

Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果(推荐)

了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做项目的时候,老板说要加上二维码扫描功能,然后自己的屁颠屁颠的去百度,google啥的,发现很多朋友都有介绍二维码扫描的功能,然后我就跟着人家的介绍自己搞起了二维码扫描功能,跟着人家的帖子,很快我的项目就加入了扫描二维码的功能,然后自己还很开心. 随着微信的到来,二维码越来越火爆,随处能看到二维码,比如商城里面,肯德基,餐厅等等,对于二维码

iOS仿微信图片分享界面实现代码

分享功能目前几乎已成为很多app的标配了,其中微信,微博等app的图片分享界面设计的很棒,不仅能够展示缩略图,还可以预览删除.最近我在做一款社交分享app,其中就要实现图文分享功能,于是试着自行实现仿微信分享风格的功能. 核心思想: 主要是使用UICollectionView来动态加载分享图片内容,配合预览页面,实现动态添加和预览删除图片效果. 实现效果: 核心代码如下: 分享界面: // // PostTableViewController.h // NineShare // // Creat

PopupWindow仿微信浮层弹出框效果

最近公司项目需要实现类似微信的浮层弹出框.研究发现是用PopupWindow实现的.而且可以自定义位置以及出现和退出时的动画,由于太晚了就不实现动画了,需要得同学请自己研究下.由于本人新手其中的不足和缺点请见谅. 代码如下: 首先是定义顶部按钮的main.xml文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.an

Android UI设计与开发之ViewPager仿微信引导界面以及动画效果

基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧.好的,话不多说,回归正题. 这篇要实现的是一个仿微信的动画效果,虽然这种效果的实现在网上到处都有,但是我还是想站在中低端开发者的角度去告诉大家是如何实现的,当然实现的方式有很多,我也只是列出了我认为实现起来比较方便的一种方法,希望大家能够受用. 一.实现的效果图 有图才有真相,上图先: 点击按钮后

iOS仿微信相机拍照、视频录制功能

网上有很多自定义相机的例子,这里只是我临时写的一个iOS自定义相机(仿微信)拍照.视频录制demo,仅供参考: 用到了下面几个库: #import <AVFoundation/AVFoundation.h> #import <AssetsLibrary/AssetsLibrary.h> 在使用的时候需要在Info.plist中把相关权限写进去: Privacy - Microphone Usage Description Privacy - Photo Library Usage

iOS实现微信摇一摇功能

一.描述 需要做一个界面,仿照微信摇一摇,获取接口进行签到功能. 首先明确以下几点: 1.需要震动. 2.需要声音.(准备好mp3音效) 二.这边直接贴代码 / Created by 石雄伟 on 16/7/29. // Copyright © 2016年 石雄伟. All rights reserved. // #import "SignBoardViewController.h" #import <AVFoundation/AVFoundation.h> #import

Android仿微信视屏悬浮窗效果

在项目中需要对接入的腾讯云音视频,可以悬浮窗显示,悬浮窗可拖拽,并且在悬浮窗不影响其他的activity的焦点. 这个大神的文章Android基于腾讯云实时音视频仿微信视频通话最小化悬浮,他讲的是视频通话时,将远端视频以悬浮窗形式展示,根据他的代码我进行了部分简化 1.悬浮窗效果:点击缩小按钮,将当前远端视屏加载进悬浮窗,且悬浮窗可拖拽,不影响其他界面焦点:点击悬浮窗可返回原来的Activity 2.实现悬浮窗需要: 在androidManifest中申请悬浮窗权限<uses-permissio