class WaveView: UIView {var firstWaveColor = UIColor() // 第一个波浪颜色var secondWaveColor = UIColor() // 第二个波浪颜色var waveDisplaylink : CADisplayLink!var firstWaveLayer : CAShapeLayer! // 第一个波浪var secondWaveLayer : CAShapeLayer! // 第二个波浪var waveAmplitude : CGFloat = 0.0 // 波纹振幅var waveCycle : CGFloat = 0.0 // 波纹周期var waveSpeed : CGFloat = 0.0 // 波纹速度var offsetX : CGFloat = 0.0 // 波浪 x 位移var currentWavePointY : CGFloat = 0.0 // 当前波浪上市高度Y(高度从大到小 坐标系向下增长var variable : Float = 0.0 // 可变参数 更加真实 模拟波纹var increase : Bool = true // 增减变化var waterWaveWidth : CGFloat = 0.0 // 水波宽度override func awakeFromNib() {super.awakeFromNib()setUp()}override init(frame: CGRect) {super.init(frame: frame)setUp()}required init?(coder aDecoder: NSCoder) {super.init(coder: aDecoder)setUp()}private func setUp() {self.backgroundColor = UIColor.clearColor()firstWaveColor = UIColor.whiteColor()secondWaveColor = UIColor.whiteColor()dispatch_async(dispatch_queue_create("myQueue", DISPATCH_QUEUE_SERIAL)) {self.startWave()}waveCycle =  2 * CGFloat(M_PI) / self.frame.size.widthwaterWaveWidth = UIScreen.mainScreen().bounds.size.width + 10waveSpeed = CGFloat(0.05 / M_PI)currentWavePointY = 0variable = 1.6increase = falseoffsetX = 0}func startWave() {if firstWaveLayer == nil {// 创建第一个波浪firstWaveLayer = CAShapeLayer()firstWaveLayer.fillColor = firstWaveColor.CGColorfirstWaveLayer.opacity = 0.3self.layer.addSublayer(firstWaveLayer)}if secondWaveLayer == nil {// 创建第二个波浪secondWaveLayer = CAShapeLayer()secondWaveLayer.fillColor = secondWaveColor.CGColorself.layer.addSublayer(secondWaveLayer)}if waveDisplaylink == nil {// 启动调用定时器waveDisplaylink = CADisplayLink(target: self, selector: #selector(getCurrentWave(_:)))waveDisplaylink.addToRunLoop(NSRunLoop.mainRunLoop(), forMode: NSRunLoopCommonModes)}}@objc private func getCurrentWave(displayLink: CADisplayLink) {
//        这里是调整波浪状态,自行发挥
//        if (increase) {
//            variable += 0.01
//        } else {
//            variable -= 0.01
//        }
//        if (variable <= 1) {
//            increase = true
//        }
//
//        if (variable >= 1.6) {
//            increase = false
//        }waveAmplitude = CGFloat(variable * 2.5)offsetX += waveSpeedsetCurrentFirstWaveLayerPath()setCurrentSecondWaveLayerPath()}private func setCurrentFirstWaveLayerPath() {let path = CGPathCreateMutable()var y = currentWavePointYvar x : CGFloat = 0.0CGPathMoveToPoint(path, nil, 0, 0)while (true) {y = waveAmplitude * sin(waveCycle * x + offsetX) + currentWavePointYCGPathAddLineToPoint(path, nil, x, y)x += 1if x >= waterWaveWidth {break}}CGPathAddLineToPoint(path, nil, waterWaveWidth, self.frame.size.height)CGPathAddLineToPoint(path, nil, 0, self.frame.size.height)CGPathCloseSubpath(path)firstWaveLayer.path = path}private func setCurrentSecondWaveLayerPath() {let path = CGPathCreateMutable()var y = currentWavePointYvar x : CGFloat = 0.0CGPathMoveToPoint(path, nil, 0, 0)while (true) {y = waveAmplitude * cos(waveCycle * x + offsetX) + currentWavePointYCGPathAddLineToPoint(path, nil, x, y)x += 1if x >= waterWaveWidth {break}}CGPathAddLineToPoint(path, nil, waterWaveWidth, self.frame.size.height)CGPathAddLineToPoint(path, nil, 0, self.frame.size.height)CGPathCloseSubpath(path)secondWaveLayer.path = path}deinit {reset()}private func reset() {if firstWaveLayer != nil {firstWaveLayer.removeFromSuperlayer()firstWaveLayer = nil}if secondWaveLayer != nil {secondWaveLayer.removeFromSuperlayer()secondWaveLayer = nil}}}
复制代码

Swift 波浪动画相关推荐

  1. iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...

    2019独角兽企业重金招聘Python工程师标准>>> iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架 微信左滑删除效果的实 ...

  2. iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码

    iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架 微信左滑删除效果的实现与TableViewCell的常用样式介绍 实现阴影圆角并存,渐变色背景 ...

  3. HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码

    特效描述:html5 3D立体 粒子波浪动画.3D 粒子动画特效 代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...

  4. css3 线条出现动画效果,CSS3实现的线条波浪动画效果

    HTML结构 该css3线条波浪动画效果的HTML结构如下: CSS样式 然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...

  5. css ltimg gt只适应,css3动画,CSS3实战小技巧--使用CSS变量实现波浪动画

    css3动画,CSS3实用技巧--利用CSS变量实现波浪动画.今日头条新闻(www.leadip.com)为您带来相关内容的详细介绍. CSS3实用技巧--用CSS变量实现波浪动画 2017年3月,微 ...

  6. css3波浪动画特效

    css3波浪动画特效 可根据需求添加修改波浪线和背景颜色 全部代码如下 <!doctype html> <html> <head> <meta charset ...

  7. android波浪动画简书,Android Path绘制贝塞尔曲线波浪动画

    本文主讲一种动画的实现方式:在自定义View的onDraw()方法的最后调用invalidate()来实现持续绘制更新画面,在onDraw()中根据流逝的时间来计算图像当前的位置.形状,即实现了动画. ...

  8. html5波浪效果,html5 canvas粒子波浪动画特效

    特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...

  9. css3波浪纹路_css3线条波浪动画效果

    这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使用了3张波浪线条的png图片,以及少量的CSS代码,制作出逼真的线条波浪动画效果. 使用方法 HTM ...

最新文章

  1. 微信公众平台消息接口星标功能
  2. 为了不让GPU等CPU,谷歌提出“数据回波”榨干GPU空闲时间,训练速度提升3倍多...
  3. 消费机器人今年爆发!四大品类瓜分百亿蛋糕
  4. NetCore+MySql+EF 数据库生成实体模型
  5. idea点击表单按钮不做post反应
  6. java2ee和java2se_Java知识:(2)JavaSE和JavaEE
  7. Android Studio编译提示如下attribute layout_constraintBottom_toBottomOf (aka com.luck.pictureselector:layou
  8. c ++明明的随机数_从列表C ++程序中随机建议电影
  9. WdatePicker日历控件用法
  10. 点阵字库制作和使用(一)
  11. 拍照怎么搜题?(上)
  12. 没有USB 如何通过adb连接手机设备
  13. FlinkSQL建表语句与插入语句
  14. python基础教程第三版pdf 脚本之家-一篇不错的Python入门教程
  15. 计算机文件夹加密文件,如何加密计算机文件夹4种加密文件夹的方法
  16. 电脑突然无法复制粘贴的问题
  17. 大三小学期进阶课程第二十一课:reinforcement learning and data driven approaches
  18. 输入直角三角形的两个直角边的长度 a、b,求斜边 c 的长度。
  19. 2020全国普通高校大学生竞赛排行榜出炉!
  20. linux之database(数据库)一

热门文章

  1. UE4动画系统:什么是动画通知(Anim Notify)
  2. 8大主流自媒体平台运营方式分享,别再说做自媒体赚不到钱
  3. 真甲先生 38期:2019年百度快排哪家好?
  4. 关于城市道路平面交叉口红线规划的若干思考
  5. 国内优秀网址导航站总结 (转载)
  6. hp540 win7系统窗口总是闪动问题
  7. java获取 手机GPRS
  8. MT6762平台NXP NFC代码移植要点
  9. 计算机论文分类号 tp,中图法分类号(计算机专业) TP
  10. 干货|PCB电路板的组成、设计、工艺、流程及元器摆放和布线原则