首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

自定义图层/形状内的Swift/ios波浪填充动画

基础概念

在iOS开发中,自定义图层(Custom Layer)和形状(Shape)是用于创建复杂UI元素的重要工具。波浪填充动画(Wave Fill Animation)是一种视觉效果,通常用于模拟水波或其他动态效果。

相关优势

  1. 灵活性:自定义图层和形状允许开发者创建独特的UI元素,满足特定的设计需求。
  2. 性能:使用Core Animation框架进行动画处理,可以保证流畅的用户体验。
  3. 可扩展性:可以轻松地将动画效果集成到现有的应用中,增强用户体验。

类型

  1. CAShapeLayer:用于绘制基本形状,如矩形、圆形等。
  2. CAGradientLayer:用于创建渐变效果。
  3. CAEmitterLayer:用于创建粒子效果,可以用于模拟水波效果。

应用场景

波浪填充动画常用于以下场景:

  • 水波效果按钮
  • 加载指示器
  • 动态背景

示例代码

以下是一个使用Swift和Core Animation实现波浪填充动画的示例代码:

代码语言:txt
复制
import UIKit
import QuartzCore

class WaveView: UIView {
    
    private let shapeLayer = CAShapeLayer()
    private let animation = CABasicAnimation(keyPath: "path")
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    
    private func setupView() {
        layer.addSublayer(shapeLayer)
        setupAnimation()
    }
    
    private func setupAnimation() {
        animation.duration = 2.0
        animation.repeatCount = .infinity
        animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        let path = UIBezierPath()
        let width = bounds.width
        let height = bounds.height
        let amplitude: CGFloat = 10.0
        let frequency: CGFloat = 4.0
        
        for x in stride(from: 0, to: width, by: 1) {
            let y = height / 2 + sin(CGFloat(x) * .pi * frequency) * amplitude
            if x == 0 {
                path.move(to: CGPoint(x: x, y: y))
            } else {
                path.addLine(to: CGPoint(x: x, y: y))
            }
        }
        
        shapeLayer.path = path.cgPath
        animation.fromValue = path.cgPath
        animation.toValue = UIBezierPath(arcCenter: CGPoint(x: width / 2, y: height / 2), radius: width / 2, startAngle: -.pi, endAngle: .pi, clockwise: true).cgPath
        
        shapeLayer.add(animation, forKey: "wave")
    }
}

参考链接

常见问题及解决方法

  1. 动画卡顿
    • 原因:可能是由于图层复杂度过高或动画帧率设置不当。
    • 解决方法:优化图层结构,减少不必要的绘制操作;调整动画帧率,确保流畅性。
  • 动画效果不理想
    • 原因:可能是由于数学计算或路径生成逻辑有误。
    • 解决方法:仔细检查数学公式和路径生成逻辑,确保动画效果符合预期。

通过以上内容,你应该能够理解波浪填充动画的基础概念、优势、类型、应用场景以及如何实现和解决常见问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Photoshop软件应用项目(一)

界面,新建任意大小纸张,最好是横向,给他填充一个背景色,这里我就选择了比较浅一点黄色,在窗口才拦下,打开时间轴,如果你十天左右东西,可以在右上方三个横杠处,删除时间轴,如下图,新建帧动画,就会出现下面的面板...,点击确定,当然,你在之前要设定好前景色,因为画笔就是在固定区域填充前景色,一定要把画笔转化为硬边缘,杯子如果用虚化笔就不够实,高光也是同一个道理。...,将这五个圆圈都处理过后,在你相见图层上 ctrl,单击一下,形成这个图层所有元素选区,有了里面的选区后,再次转化为下面有圈圈描边图层,按 ctrl+X 剪切,剪切就是这个图层中白色圆圈形状。...,首先,用钢笔工具绘制一个底部,为波浪形状保证波浪上方能够盖住整个字体顶端,由于波浪涂层水在杯子和液体下面,所以波浪图层可以尽可能大,之后就是将这个图层复制粘贴移动位置就可以了,在这里做一个就行...,才能让这个动作连贯起来 文章重点就是拥抱梦想液态效果那是通过一个遮罩不断移动产生一个动态效果并且每张遮罩时间只有 0.05 秒当然也可以通过按住 alt 将鼠标移动到那个图层和被粘贴图层中间鼠标就会变成一个拐弯三角箭头和一个空白正方形那就是将上面的形状剪切到下面的图层上这样你只会在下面图层形状上看到这个涂层

76840
  • Kite Compositor for Mac(动画和原型设计工具)

    Mac上优秀动画和原型设计工具——Kite Compositor 。此工具可用于为MacOS或iOS应用制作动画效果和原型,可让你可视化地拖拽图层,在WYSIWYG画布上构建复杂界面。...使用JavaScript脚本环境可以增强每个环节,集合自定义逻辑和行为来实现你需要一切。...1.路径编辑使用钢笔工具,您可以在画布上直接编辑动画路径和形状图层。2.演示视图在演示文稿播放模式下全屏显示您设计。或者,在迭代时选择自己演示窗口大小。...自定义播放窗口背景颜色和透明度,以获得自定义外观。...3.生成本机核心动画代码为动画生成零依赖 Swift或Objective-C代码代码兼容iOS和Mac不再猜测某些东西应该移动速度,它应该增长到多大,或者如何在关键帧之间缓和4.自适应接口可以扩展和简单

    48520

    iOS开发常用之网络

    TextProgress - 自定义实现数字进度条:1,可以自定义数字(0-100),填充比例为当前设置数字,2,可以实现自定义填充颜色,上下部分都可以,3,可以自定义边界颜色4,实现了水波动画...TZStackView - OS 9 UIStackView功能模拟实现于iOS 7 / iOS 8。 LayoutTrait - swift一个小类库。...KYWaterWaveView - 一个内置波浪动画UIView,里面有鱼跳跃水溅起来效果。 WaveLoadingView - iOS 唯一完美的波浪进度加载指示器,实现说明。...Context-Menu.iOS - 可以为应用程序菜单添加漂亮动画内容,可自定义图标,并可根据自己喜好设计单元格和布局。...SIFloatingCollection_Swift - 可定制Apple Music风格浮动形状动画组件及演示。 Cheetah - 可用,高可读链式动画类库。

    23.6K10

    【工具】977- 10个实现炫酷UI设计效果CSS生成工具

    3、Interactions 地址:https://easings.co/ 在一系列界面上测试常见缓动曲线。或生成自己自定义贝塞尔曲线。 没有比这更顺畅交互和动画效果了。...样式截图效果如下: 5、自定义形状分隔线 地址:https://www.shapedivider.app/ 划分布局和形状已经变得非常时尚。使用此工具,你可以创建可响应波形和自定义形状分隔线。...7、Mask clip-path属性允许你通过将元素裁剪为基本形状(圆形,椭圆形,多边形或插图)或SVG源来在CSS中制作复杂形状。 CSS动画和过渡可以使用两个或多个具有相同点数剪切路径形状。...在创造页面上,你可以找到非常不同码型生成器。但是,请记住,其中一些需要高级套餐。 10、SVG波浪 地址:https://svgwave.in/ 最后一个工具是波浪效果生成器。...它使用简单,可以制作多个图层并对其进行修改。 总结 希望你觉得我文章对你有所帮助,并且希望我分享给你这些工具对你有用。 如果你还知道其他一些工具的话,请在留言区告诉我们。 感谢你阅读,编程愉快!

    1.3K20

    绘图- 镂空效果及其动画实现解析

    通过控制UIViewmaskView、CALayermask有效区域,都可以修改UIView和 UIViewlayer显示外形,从而得到镂空或者其他奇特形状及其动画。...实现关键点 图层中,因为UIViewlayer为CALayer,不像CAShapeLayer那样有Path属性,所以我们无法直接修改layer显示形状,唯一能是layer显示出奇特形状方法只有两种...使用自定义形状CAShapeLayer作为mask也可以达到使图层显示出镂空效果。同样图层显示出来区域是 CAShapeLayer外形。...,self.waveView为一个水波上涨自定义试图,其中水波上升效果是通过核心动画和 CAShapeLayerpath动态绘制实现,先了解更多可以看我其他两篇文章: 绘图-视图遮罩MaskView...positionWave"]; [self.waveCosLayer addAnimation:animation forKey:@"positionWave"]; 使用CABasicAnimation设置动画使波浪图层上移

    2.1K20

    iOS动画系列之九:实现点赞动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

    CAReplicatorLayer CAReplicatorLayer目的是为了高效生成许多相似的图层。它会绘制一个或多个图层图层,并在每个复制体上应用不同变换。什么意思?...instanceCount:拷贝图层次数,包括其所有的子图层,默认值是1,也就是没有任何子图层被复制。...sender.isSelected } 2.2 第二步:自定义button 为了能够让button具有动画效果,需要自定义这个button。...因此我们需要重写button初始化方法、button状态改变方法。 swift里面重写方法格式和OC不太一样,需要注意一下。.... **/ 发射器形状 @available(iOS 5.0, *) public let kCAEmitterLayerPoint: String //点 @available(iOS 5.0,

    1.4K20

    Lottie动画原理

    导语:Lottie动画是Airbnb开源一个支持 Android、iOS 以及 ReactNative。通过AE导出JSON文件+Lottie库可快速实现动画绘制。...,大小,形状,起始关键帧,结束关键帧等,一个个图层动画叠加起来构成最终动画效果。...图层形状shapes shape是一个形状图层数组,对应AE中图层内容中形状设置,描述形状特征,通过描边信息、颜色填充等信息组合形成一个个矢量图。...渲染节点:LOTRenderNode 类中有属性 CAShapeLayer * _Nonnull outputLayer,它负责计算线条颜色,线宽,填充色等 动画节点:LOTAnimatorNode 计算构成形状线条...下面是display调用方法,它会根据当前帧是否在该子图层显示帧范围,如果不在,则隐藏,否则赋予图层动画属性。

    5.6K71

    老司机带你走进Core Animation 之几种动画简单应用

    (说这么多其实就是因为这段时间一直研究这个,的确也没研究别的,哈哈哈) 在这篇文章中你会看到以下一些内容: iOS中GIF动图播放实现方式 iOS系统更新图标样式实现方式 自定义水波样式HUD实现方式...就是iOS中APP更新时候在ICON上不是有一个更新动画么?像下面这个样子: 仿系统更新样式 这里我们就针对这个动画实现方式进行一下探讨。...不同path可以绘制出不同形状,而且path属性又是animutable。貌似轻松地很。...先看图: 波浪指示器 其实这个效果还挺有意思,那么如何实现呢?...我们可以通过改变正弦曲线相位来使波浪左右摆动起来,改变正弦曲线k值改变波浪高度。

    85320

    Ask Apple 2022 与 SwiftUI 有关问答(下)

    在更复杂 UI 中,由于视图更新速度过快,性能( 至少在 macOS 上 )迅速下降。A:有不同策略。ObservableObject 是使视图或视图层次结构失效( 引发重新计算 )单元。...不支持整个列表填充,请对此提出反馈。...将背景扩展到安全区域Q:如果我有一个自定义容器类型,可以接受一个顶部和底部视图,是否有办法让 API 调用者将所提供视图背景扩展到安全区域,同时将内容( 如文本或按钮 )保留在安全区域?...这意味着我们不能使用 LazyVStack,或任何其他将选择与详细视图绑定自定义视图。有扩展这个功能计划吗?A:在 iOS 16.1 中,你可以在侧边栏里放一个。...其中 2 个是自定义形状( 基本上是圆角矩形,只有两个角是圆 ),其中一个是矩形。编译器抛出一个错误,说它花了太多时间来检查视图类型。

    14.8K30

    Xcode Tips

    ; Add Missing Switch Cases:填充缺失case,虽然说Xcode会自动提示Fix补全,但是在电脑提示较慢时候还是很难受; ......Check Spelling 当开启之后,我们在代码编辑过程中出现错误单词后,Xcode会将该单词下面加上红色波浪线,点击邮件并出现推荐单词以及一些操作。...Check Spelling Prompt 红色波浪线错误单词为Infoo。 Code Snippet 这是我们一定要利用起来东西,良好、丰富代码块可以有效提高我们代码编写速度。...其中我们在保存一些代码段时候可以需要留下一些变量等到使用时再填写上,我们可以使用这样方式来留下待填充值。...模拟器相关 Debug 操作 Simulator 模拟器Debug下这三个功能比较常用,其中从上到下依次: 将动画变慢,可以更好看清动画动作; 检测图层混合; 检测离屏渲染; Environment

    1.2K20

    强大高颜值iOS图表框架AAChartKit,支持柱状图、条形图、折线图、曲线图...

    基础上,封装面向对象,一组简单易用,极其精美的图表绘制控件.可能是这个星球上 UI 最精致第三方 iOS 开源图表库了(✟我以无神论者名义向上帝起誓,我真的没有在说鬼话✟) 功能特性 ***...适配 iOS 9 +, 支持iOS、 iPad OS、TV OS、macOS, 支持 Objective-C语言, 同时更有 Swift 语言版本 AAInfographics 、 Java 语言版本...细致入微用户自定义功能....有三十多种以上渲染动画效果可供选择, 用户可自由设置渲染图形时动画时间和动画类型, 关于图形渲染动画类型,具体参见 AAChartKit 动画类型. 极简主义 ....[AAChartKit-Live.gif] 特别说明 支持通过JavaScript 函数来自定义 AATooltip视图显示效果 有时系统默认 tooltip 浮动提示框显示效果无法满足使用者特殊自定义要求

    5.2K11

    2022mac永久版下载 v15.4.1附安装教程 -...

    标题可以简单、设计精美,也可以包含丰富图形和动画。使用“文本”面板,您可以管理具有数百个标题项目,并将设计轻松保存到模板库以供重复使用。...多亏了新上下文菜单,编辑自定义设计中任何图层变得更加容易和快捷。...多亏了新上下文菜单,编辑自定义设计中任何图层变得更加容易和快捷。 填充为文本和形状图层蒙版。您现在可以仅将蒙版应用于图层填充,以渲染不属于蒙版笔触和阴影。...文本和形状图层上下文菜单通过右键单击标题并选择“编辑属性”来快速编辑标题快速访问用于设置标题和图形样式设计工具。...您现在可以在节目监视器中右键单击文本或形状图层,然后从快捷菜单中选择编辑属性以打开图形面板。然后,您可以使用字体、颜色和样式选项更改标题外观。

    1.7K20

    iOS动画系列之七:实现类似Twitter启动动画1. CAKeyframeAnimation2. CAAnimationGroup3. 实现类似Twitter启动动画

    https://git.oschina.net/atypical/CAKeyFrame-_Group_Animation.git iOS动画系列之CAKeyFrame Animation和CAAnimation...Group(OC和Swift两版) 1....它类似于一个子图层,相对于父图层(即拥有该属性图层)布局,但是它却不是一个普通图层。不同于其他能够在父图层中绘制出图像图层,mask图层定义了父图层部分可见区域。...mask图层Color属性是无关紧要,真正重要图层轮廓。也就是说mask图层实心部分会被保留下来,其他则会被抛弃。...maskAni.removedOnCompletion = NO; // 动画填充模式:kCAFillModeForwards:当动画结束后,layer会一直保持着动画最后状态

    1.4K30

    iOS开发常用之图像浏览及处理

    PictureWatermark - 主要实现了给图片加文字以及图片水印功能,已封装成了UIImage类别,方便使用。 自定义宽高比相册框拍照 - 取出照片时弹出自定义视图。...在这个自定义视图上创建一个需要相框大小图层把取出图片赋值给UIImageView按缩放添加到这个层上。对uiimageView添加捏合,移动手势。...SDECollectionViewAlbumTransition - 用自定义push和pop实现了有趣iOS相册翻开动画效果。...YYImage - 功能强大iOS图像框架,支持大部分动画图像,静态图像播放/编码/解码。 PagingView.swift - 注重细节自动布局分页视图组件。...SwViewCapture.swift - SwViewCapture.swift一个用起来还不错iOS截图库。

    3.9K60

    一些iOS知识

    今天深圳总公司iOS大佬来广州,给我这个小白一对一讲解了很多iOS相关知识,受益匪浅,就赶快记下来以免以后忘记啦~ iOS相比安卓最大特点就是非开源,软件之间无法获取数据,对于要获取照片/麦克风等时候均需要获取权限才有访问资格...一、关于iphoneX适配问题 适配这个问题分为两种: 头部Nav:1、用苹果自己组件(如左图);2、自定义(如右图) (如何区分:一个app自带头部Nav只有一种颜色,且一般左边为返回,中部为文字...自带会自动适配iphoneX上面突出部分; 而写现在开发解决方法是:老项目——将其下移,突出部分填充黑色;新项目——做一套,检测为iphoneX时用。 底部Tab bar同理。...但卡片式间隙往往是写在卡片上/下面的。 三、动画制作 位移、旋转、缩放、颜色变化为较容易达到,复杂的如形状变换、3D等一般为OC与C语言编写,难度较大。...一般gif制作大小80*80px 四、可能是一些切换 banner上面的代表进程步进器可看作是最上面的图层,banner为下方图层,故banner切换时步进器不动。

    84880

    Flash软件应用项目(一)

    点击工具控制面板中贴紧控制对象工具,用直线工具围住整个画布 2.金色稻田 用直线工具描绘出桥形状,在同一图层下连接边缘围绕背景直线中任意一点,形成一个闭合回路关闭图层后面的小眼睛可以看到他是否在同一图层...3.山峦与日光 用钢笔工具画出曲线 Delete 删除不要曲线,如果钢笔工具变成了添加锚点工具无法继续绘制,先做出形状确认闭合再次填充每一个小闭合空间,所有的山峦图层间,在火车轨道图层下面这样就可以更好在删除无用线断时再次移动图像遮掩缝隙...,不需要部分留下白云最外面的轮廓最后用愿意变形工具选白云下半部分进行删除就可以画出白云,新建图层白云,可以移动是在线被选中颜色,如果线段被删掉或者断开就相当于颜色通过缝隙流到线外被另一根线笼罩形成一个新回路所以你移动是新回路覆盖颜色...写到最后 我想对大家说 flash 功能远不止这些,他也相当于是一种图形绘制软件,它最强大功能应该是他动画,这个案例只是让大家熟悉一些基本使用步骤,以及区分和其他软件相同工具区别,后期会带领大家学习这个软件最强大动画设计功能...,以及介绍 PS 中帧动画效果应用。

    99220

    自定义 SwiftUI 中符号图像外观

    这样,父元素所有符号图像都会受到影响。调色板调色板模式允许符号以多层呈现,每层具有不同颜色。这种模式非常适合创建色彩丰富多层图标。...我们应该使用可变值来传达状态变化,例如音量、电池电量或信号强度,为用户提供动态状态清晰视觉表示。为了传达深度和视觉层次,我们应该使用分层渲染模式,它可以提升某些图层,并区分符号前景和背景元素。...将符号封装在圆形或方形等形状中可以增强其可读性,特别是在较小尺寸下。填充变体由于其实心区域,使符号更具视觉强调性,非常适合用于 iOS 标签栏、滑动操作以及指示选择强调颜色场景。...在许多情况下,显示符号视图会自动选择合适变体。例如,iOS 标签栏通常使用填充变体,而导航栏则偏好轮廓变体。这种自动选择确保符号在不同上下文中有效使用,而无需明确指定。...将上述代码粘贴到 ContentView.swift 文件中。运行项目,查看效果。结论在SwiftUI中增强符号图像可以显著改善应用程序外观和感觉。

    9010

    Premiere Pro 2022 Mac最新激活版(pr视频编辑软件)22.6.0

    Premiere Pro 2022 Mac图片pr 2022新增功能详解Premiere Pro 设计工具与文本面板搜索和编辑功能相结合,让您可以为任何视频项目创建令人难以置信自定义标题和图形。...您标题可以简单、设计精美,也可以包含丰富图形和动画。使用“文本”面板,您可以管理具有数百个标题项目,并将设计轻松保存到模板库以供重复使用。...多亏了新上下文菜单,编辑自定义设计中任何图层变得更加容易和快捷。 填充为文本和形状图层蒙版。您现在可以仅将蒙版应用于图层填充,以渲染不属于蒙版笔触和阴影。...文本和形状图层上下文菜单通过右键单击标题并选择“编辑属性”来快速编辑标题快速访问用于设置标题和图形样式设计工具。...您现在可以在节目监视器中右键单击文本或形状图层,然后从快捷菜单中选择编辑属性以打开图形面板。然后,您可以使用字体、颜色和样式选项更改标题外观。图形面板也可以通过从工作区菜单中选择标题和图形来打开。

    1K10

    Ps|液态渐变效果

    3d效果,再复制图层样式给其它形状,此外还要注意各物体层次、大小及光源等效果,以达到立体逼真效果。...图3.3 3.4 接下来为圆添加发光,选择淡蓝,图层样式为线性减淡,再根据个人感受调节参数,本次具体参数如下 ?...图3.6 3.7 最后复制中心圆,并调节至各自合适位置,注意大小,可根据具体情况调整细节 ? 图3.7 3.8 选择弯度钢笔工具绘制波浪形状 ?...图3.8 3.9 再复制中心圆图层样式并拷贝到波浪状 ? 图3.9 3.10 多次绘制其它波浪形状,并添加中心圆图层样式 ? 图3.10 3.11 整体偏亮,我们使用曲线降低一下亮度 ?...图3.14 4 总结 本次教程基础操作十分简单,重点在于: 1.颜色渐变搭配,建议参照Ps自带颜色过渡带,避免使用颜色过渡带距离较远两色作为邻近渐变色; 2.使用多个发光图层样式使形状更加立体化

    2.9K40
    领券