iOS实现正弦函数渐变动画，波浪线渐变动画的实现思路

最新推荐文章于 2024-06-13 09:49:08 发布
最新推荐文章于 2024-06-13 09:49:08 发布
阅读量664 收藏
点赞数
分类专栏： ios 文章标签： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15509071/article/details/126159085
版权

在iOS里面单独的波浪线使用CAShapeLayer设置strokeColor，创建CGMutablePathRef使用正弦函数sin获取y值，连接成点CGPathAddLineToPoint得到一条曲线，然后赋值给图层 self.waveLayer.path = path即可。但是这样没有渐变。

在iOS里面单独的渐变使用CAGradientLayer，设置colors，设置locations可以生成渐变的矩形，但不是线，不能动。

而且上面两者无法结合在一起。CAGradientLayer没有strokeColor，CAShapeLayer没有colors。

如何实现呢？可以实现的思路是使用layer.mask

这个mask可以控制显示的区域，mask也是layer类型，放一张png格式的渐变图，mask透明并且正弦函数移动，显示的效果就是带渐变的波浪线。

具体代码可以参考这个实现https://www.jianshu.com/p/b032844f5462?utm_campaign=maleskine...&utm_content=note&utm_medium=seo_notes

_小呵呵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS：绘制波浪
韩博主
06-24 1042
视频录制是效果看起来挺好的，转成GIF后播放就不流畅了。不过不影响。 先展示一下引用波浪控件的代码吧 //波浪 - 底部 _waveView = [[WaveView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height - 98, self.view.frame.size.width, 98)]; [_waveView showWaveNum:3 OffsetK:10 AngularSpeed:1.5*M_PI.
border渐变 ios_iOS实现曲线渐变
weixin_42420393的博客
12-29 200
圆形渐变最近产品提了一个需求，要求进度条的进度可以大于1。效果如下效果图上卡，实际上并不卡。在开始做之前，看了github上所有的progress相关的代码，发现并没有人实现过这样的效果。苹果apple watch应用实现了，但是不知道苹果是怎么实现的。这个效果的难度就在于 曲线渐变 和 进度能大于1。cocoa touch提供的api都是直线渐变。而进度可以大于1要求曲线的首和尾颜色不能想近，应...
ios-自定义带有渐变色的波浪动画.zip
07-11
1、波纹动画主要依赖于CAShapeLayer的绘制，使用帧动画实现；需要使用多个CAShapeLayer通过y值变换组成（这里我只是用了2个CAShapeLayer）。 2、渐变色由CAGradientLayer完成。 ``` - (void)changeFirstWaveLayerPath { CGMutablePathRef path = CGPathCreateMutable(); CGFloat y = _wavePointY; CGPathMoveToPoint(path, nil, 0, y); for (float x = 0.0f; x <= _waveWidth; x ) { y = _waveAmplitude * 1.6 * sin((250 / _waveWidth) * (x * M_PI / 180) - _waveOffsetX * M_PI / 270) _wavePointY; CGPathAddLineToPoint(path, nil, x, y); } CGPathAddLineToPoint(path, nil, _waveWidth, 0); CGPathAddLineToPoint(path, nil, 0, 0); CGPathCloseSubpath(path); _shapeLayer1.path = path; CGPathRelease(path); } - (void)changeSecondWaveLayerPath { CGMutablePathRef path = CGPathCreateMutable(); CGFloat y = _wavePointY; CGPathMoveToPoint(path, nil, 0, y); for (float x = 0.0f; x <= _waveWidth; x ) { y = _waveAmplitude * 1.6 * sin((250 / _waveWidth) * (x * M_PI / 180) - _waveOffsetX * M_PI / 180) _wavePointY; CGPathAddLineToPoint(path, nil, x, y); } CGPathAddLineToPoint(path, nil, _waveWidth, 0); CGPathAddLineToPoint(path, nil, 0, 0); CGPathCloseSubpath(path); _shapeLayer2.path = path; CGPathRelease(path); } ``` 方法调用： ``` _waveOffsetX = _waveSpeed; [self changeFirstWaveLayerPath]; [self changeSecondWaveLayerPath]; [self.layer addSublayer:self.gradientLayer1]; self.gradientLayer1.mask = _shapeLayer1; [self.layer addSublayer:self.gradientLayer2]; self.gradientLayer2.mask = _shapeLayer2; ```
iOS水波动画效果
tsunamier的博客
11-21 2393
1：实现原理：两条不同内填充色的波浪向相对方向平移，产生波动效果，使用的技术：CAShapeLayer,UIBezierPath 2：实现效果 3：实现步骤： 画两条贝塞尔曲线，由于需要交叉产生效果，当前屏幕和屏幕外相同宽度的部分画线，然后按照固定的速度移动，每到移动到屏幕边缘的时候重新设置波浪线的路径，波浪的交叉重贴的部分产生的效果就是锁需要的效果具体实现代码如下： #impor
推荐开源项目：WaterWave - 让你的iOS应用荡漾起生动的波浪动画
最新发布
gitblog_00010的博客
06-13 464
推荐开源项目：WaterWave - 让你的iOS应用荡漾起生动的波浪动画 WaterWaveiOS上的波浪动画项目地址:https://gitcode.com/gh_mirrors/wat/WaterWave 1. 项目介绍 WaterWave 是一个专为 iOS 设计的开源库，它带来了令人惊艳的波浪动画效果。通过这个库，开发者可以在自己的应用程序中轻松创建出动态、逼真的水面波动效果，为用户的...
iOS贝塞尔曲线,折线,曲线,波浪线
09-20
可用于绘制走势图,折线图,图表类制作.
iOS 时钟、波浪线动画
04-23
iOS 时钟、波浪线动画
ios-贝塞尔曲线实现渐变动画效果.zip
07-11
本示例"ios-贝塞尔曲线实现渐变动画效果.zip"聚焦于如何通过贝塞尔曲线（Bezier Curve）来创建出具有平滑过渡特性的渐变描点动画。贝塞尔曲线是一种在计算机图形学中广泛使用的数学工具，它能够帮助我们精确地控制...
iOS 实现简单的加载等待动画示例（思路与实现）
08-30
下面是实现简单的加载等待动画示例的思路与实现方法。 1. 自定义 View 类 首先，需要创建一个自定义的 View 类，命名为 XDColorCircle。这个类将负责绘制加载等待动画。 2. 渐变图层 在 XDColorCircle 类中，...
ios波浪实现思路
02-12
"ios波浪实现思路"这个项目就是针对这样一个目标，它利用数学函数，特别是正弦函数（sin函数），来模拟逼真的波浪动画。下面我们将深入探讨如何在iOS应用中使用sin函数来创建波浪动画。 首先，我们要理解正弦函数。...
AnimatedGradientView:iOS强大的渐变动画使iOS变得简单
05-12
AnimatedGradientView是一个UIView子类，可轻松将动画渐变添加到您的iOS应用。 它纯粹是用Swift编写的。 。 特征 轻松创建动画或静态渐变。 可配置的梯度方向。 使用十六进制值，RGB值或名称指定颜色（包括在iOS 11或更高版本的资产目录中指定的颜色名称）。 支持在具有多种颜色的渐变之间进行动画处理。 支持轴向，径向以及在iOS 12上的圆锥渐变。 使用startAnimating和stopAnimating函数自动设置动画或手动设置动画。 使用autoRepeat属性循环播放动画。 要了解有关如何使用AnimatedGradientView的更多信息，请查看，查看，在上进行演示，或使用下面的目录： 特征 快速开始 要求 安装 椰子足 迦太基 用法 静态渐变渐变类型 作者 执照 附加软件 构架 工具 AnimatedGradientView
ios渐变动画效果
12-27
从灰色变为亮色的动画效果
ios-波浪动画.zip
07-11
波浪动画,可拓展。 GitHub: https://github.com/zhouXiaoR/ZZWaterWave
iOS利用UIView实现渐变动画
iOS小菜鸟的专栏
08-27 5355
UIView本身有一个类方法 animateWithDuration 可以简单实现动画效果 简单从平移、缩放、透明度三个方向,都是修改frame来实现 平移效果的实现代码 /** * 平移 */ - (IBAction)translate { // 渐变动画 // 方式一 /* // 1. 开始动画 [UIView beginAnimations
iOS 双曲线波浪动画
努力，可能成功！放弃，注定失败！
11-14 1403
今天来搞一下 双曲线波浪动画,那么什么是双曲线波浪呢 看效果 6月-24-2016 09-38-54.gif 一, 效果就是这样子 ,通过调整百分比 可以实现球形的水面的占比,那么实现的思路是什么呢 1.首先肯定是连个图层 一个深蓝色 一个浅蓝色 (我做的时候 RGB 是一样的不过是修改了透明度 ) 2.就是曲线条 当然很直观的可以看出来这个曲线 可以用 正弦 或 余弦函数实
iOS - 贝塞尔曲线,折线,曲线,波浪线
weixin_34184561的博客
04-29 595
接口调用简单, 能够调整线的弯曲程度, 能够在线上显示数据点 demo下载地址 http://download.csdn.net/detail/dylan_lwb_/8838909
ios 水波纹（波浪形式）
芷江的博客
11-23 2256
创建水波纹波浪形式方法很多，此处采用CGMutablePathRef类画线 一、正弦函数画线 #import "ZJSinWaveView.h"   @interface ZJSinWaveView () {     CGFloat waveA;//水纹振幅     CGFloat waveW ;//水纹周期     CGFloat offsetX; //位移     CGFlo...
系统学习iOS动画 —— 渐变动画
LinShunIos的博客
11-12 2602
这个是希望达成的效果： 先创建需要的控件： class ViewController: UIViewController { let timeLabel = UILabel() override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. view.addSubview(timeLabel)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值