Swift :UIView扩展+直播间麦克风波纹扩散动画

2023-11-21 11:40

本文主要是介绍Swift :UIView扩展+直播间麦克风波纹扩散动画,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

功能需要,用贝塞尔曲线写了一个波纹动画分享一下

效果图:

在这里插入图片描述
知识点:

  1. 扩展不能直接加属性,用runtime方式添加
  //bord宽度  默认1.5var FQBordWith:CGFloat?{get{return (objc_getAssociatedObject(self,"FQBordWith") as? CGFloat)}set(newValue){objc_setAssociatedObject(self, "FQBordWith", newValue, .OBJC_ASSOCIATION_ASSIGN)}}
  1. 注意 block 的循环引用 [weak self]
 self.FQTimer = Timer.scheduledTimer(withTimeInterval: TimeInterval(longTime), repeats: true, block: { [weak self](timer:Timer) inif let strongSelf = self { //精髓用法index += 1;if index > number {strongSelf.invalidTimer()return}strongSelf.start()}})

文件代码如下:

//
//  UIView+FQWave.swift
//  FQWaveDemo
//
//  Created by jiashiqi on 2020/4/7.
//  Copyright © 2020 jiashiqi. All rights reserved.
//import Foundation
import UIKitextension UIView{//bord宽度  默认1.5var FQBordWith:CGFloat?{get{return (objc_getAssociatedObject(self,"FQBordWith") as? CGFloat)}set(newValue){objc_setAssociatedObject(self, "FQBordWith", newValue, .OBJC_ASSOCIATION_ASSIGN)}}//动画时间 默认2var FQAnimationTime:CGFloat? {get{return (objc_getAssociatedObject(self,"FQAnimationTime") as? CGFloat)}set(newValue){objc_setAssociatedObject(self, "FQAnimationTime", newValue, .OBJC_ASSOCIATION_ASSIGN)}}//开始透明度 默认 0.8var FQStartAlph:CGFloat? {get{return (objc_getAssociatedObject(self,"FQStartAlph") as? CGFloat)}set(newValue){objc_setAssociatedObject(self, "FQStartAlph", newValue, .OBJC_ASSOCIATION_ASSIGN)}}//比例 默认1.5var FQScale:CGFloat? {get{return (objc_getAssociatedObject(self,"FQScale") as? CGFloat)}set(newValue){objc_setAssociatedObject(self, "FQScale", newValue, .OBJC_ASSOCIATION_ASSIGN)}}//颜色 默认redvar FQColor:UIColor? {get{return (objc_getAssociatedObject(self,"FQColor") as? UIColor)}set(newValue){objc_setAssociatedObject(self, "FQColor", newValue, .OBJC_ASSOCIATION_ASSIGN)}}var FQTimer:Timer?{get{return (objc_getAssociatedObject(self,"FQTimer") as? Timer)}set(newValue){objc_setAssociatedObject(self, "FQTimer", newValue, .OBJC_ASSOCIATION_ASSIGN)}}//开始动画public func startAnimation(circleNumber:NSInteger){if (self.FQTimer != nil) {self.invalidTimer()}var index = 0let number = circleNumber == 0 ? 1 : circleNumber// 每一个圈需要的时间let longTime:CGFloat = (self.FQAnimationTime ?? 2.0) / CGFloat(number)self.FQTimer = Timer.scheduledTimer(withTimeInterval: TimeInterval(longTime), repeats: true, block: { [weak self](timer:Timer) inif let strongSelf = self {index += 1;if index > number {strongSelf.invalidTimer()return}strongSelf.start()}})}//结束动画public func stopAnimation(){self.layer.removeAllAnimations()self.layer.superlayer?.perform(#selector(CALayer.removeFromSuperlayer))self.invalidTimer()}private func invalidTimer(){self.FQTimer?.invalidate();self.FQTimer = nil;}private func start(){//中心点let layer:CAShapeLayer = CAShapeLayer();layer.position = CGPoint(x: self.frame.size.width / 2, y: self.frame.size.height / 2)layer.bounds = CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height)layer.opacity = 0layer.backgroundColor = UIColor.clear.cgColor//画圆圈let path:UIBezierPath = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height))layer.path = path.cgPathlayer.strokeColor = (self.FQColor ?? UIColor.red).withAlphaComponent((self.FQStartAlph ?? 0.8)).cgColorlayer.lineWidth = (self.FQBordWith ?? 1.5)layer.fillColor = UIColor.clear.cgColorself.layer.addSublayer(layer)//动画//圈透明度let opacity:CABasicAnimation = CABasicAnimation(keyPath: "opacity")opacity.fromValue = (self.FQStartAlph ?? 0.8)opacity.toValue = 0//圈的发散let scale:CABasicAnimation = CABasicAnimation(keyPath: "transform.scale")scale.fromValue = 1.1scale.toValue = (self.FQScale ?? 1.5)//圈的宽度let border:CABasicAnimation = CABasicAnimation(keyPath: "lineWidth")border.fromValue = (self.FQBordWith ?? 1.5)border.toValue = 1border.duration = 0.2//动画组let animationGroup:CAAnimationGroup = CAAnimationGroup()animationGroup.animations = [opacity,scale,border]animationGroup.duration = CFTimeInterval(self.FQAnimationTime ?? 2.0)animationGroup.isRemovedOnCompletion = true;animationGroup.fillMode = CAMediaTimingFillMode.forwards;animationGroup.repeatCount = MAXFLOAT;layer.add(animationGroup, forKey: nil)}
}

dome下载:下载地址

如有问题,可留言解决。

这篇关于Swift :UIView扩展+直播间麦克风波纹扩散动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/402128

相关文章

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用(关键)2. InteractionSource3.

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

Java常用注解扩展对比举例详解

《Java常用注解扩展对比举例详解》:本文主要介绍Java常用注解扩展对比的相关资料,提供了丰富的代码示例,并总结了最佳实践建议,帮助开发者更好地理解和应用这些注解,需要的朋友可以参考下... 目录一、@Controller 与 @RestController 对比二、使用 @Data 与 不使用 @Dat

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验(UX)是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时,提供良好的用户体验(UX)是至关重要

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

Qt QWidget实现图片旋转动画

《QtQWidget实现图片旋转动画》这篇文章主要为大家详细介绍了如何使用了Qt和QWidget实现图片旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、效果展示二、源码分享本例程通过QGraphicsView实现svg格式图片旋转。.hpjavascript

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06