Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >水波进度、加载动画、文字进度

水波进度、加载动画、文字进度

作者头像
且行且珍惜_iOS
发布于 2018-05-22 09:12:56
发布于 2018-05-22 09:12:56
2.7K0
举报

水波.gif

上面的效果主要用到了CALayer的一些子类,CGConTextRef ,贝塞尔曲线和CADisplayLink等 。。。 Demo里封装好的,可以直接拿来用! 网上关于这些的资料特别多,我就不在这啰嗦了,给几个链接,自行修炼去吧..... 几种常用Layer的使用解析 贝塞尔曲线与CAShapeLayer简单使用 CADisplayLink结合UIBezierPath的神奇妙用 http://www.jianshu.com/p/c35a81c3b9eb Core Animation系列之CADisplayLink IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

2.gif

上面的效果感谢来自于简书作者 霖溦,在原作者的基础上作了些改变,详细实现可以去原文章查看,iOS 特种label:镂空文字、类歌词进度显示文字

以上效果的Demo请前往https://github.com/wslcmk/progressLabelAndWaterProgress.git

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.10.08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用CAShapeLayer绘图
之前讲过使用UIBezierPath在UIView的drawRect中绘图, 今天我们讲下另外一种方式: CAShaperLayer
周希
2019/10/15
1.2K0
使用CAShapeLayer绘图
iOS CAShapeLayer和UIBezierPath的使用
1.CAShapeLayer简介 CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。 CAShapeLayer继承自CALayer,可以使用CALayer的所有属性值。 CAShapeLayer需要与 贝塞尔曲线 配合使用才有意义(这是个人经验)。 使用CAShapeLayer与贝塞尔曲线可以画出你想要的图形。 相对于Core Graphics绘制图片,使用CAShapeLayer有以下一些优点: 渲染快速。CAShapeLayer使用了硬件加速(使用CPU渲染),绘制同一
傅_hc
2018/07/04
2.1K0
绘图-圆环进度条实现详解
前言 实现了一款时下比较流行的环状进度动图,以下是源码解析 使用 Core Graphics 和 定时器 实现环形进度动图 圆环进度.gif 核心源码 # 使用 [self setNeedsDisp
進无尽
2018/09/12
2.3K0
绘图-圆环进度条实现详解
IOS开发系列——UIView专题之三:自定义绘制篇【整理,部分原创】
iOS的绘图操作是在UIView类的drawRect方法中完成的,所以如果我们要想在一个UIView中绘图,需要写一个扩展UIView的类,并重写drawRect方法,在这里进行绘图操作,程序会自动调用此方法进行绘图。
江中散人_Jun
2022/03/08
1.2K0
老司机带你走进Core Animation 之几种动画的简单应用
之所以要写这几种简单应用呢,是为了帮大家扩展一下思维,基于CAAnimation和CADisplayLink其实我们可以做到很多事情,不过我们都还是需要一个思路。有的时候可能,拿到一个效果,我们一眼就可以看出来,哦,使用核心动画就可以搞定,然而真正上手的时候就会发现,哦,没有想象的那么简单,为什么我达到的效果不对呢?一般情况下有两种可能,要么是思路不完整,要么是思路根本就不对。CAAnimation固然灵活,但要是使用方法不当的话,也会事倍功半。所以呢,今天老司机就针对以下几种情况来介绍截个动画的实现方式。(说这么多其实就是因为这段时间一直研究这个,的确也没研究别的,哈哈哈)
老司机Wicky
2018/08/22
8740
老司机带你走进Core Animation 之几种动画的简单应用
iOS动画三板斧(二)--CoreAnimation动画介绍使用附加
第二板斧就是用的最多的CoreAnimation动画库,简称是CA,所以动画类都是CA开头。所有的动画类都在 QuartzCore 库中,在iOS7之前使用需要#import <QuartzCore/QuartzCore.h>,iOS7之后系统已经将其自动导入了。CoreAnimation动画都是作用在layer上。 先来看下动画类的层级关系:
Haley_Wong
2018/08/22
1.2K0
iOS动画三板斧(二)--CoreAnimation动画介绍使用附加
iOS 动画笔记 (一)
你也肯定喜欢炫酷的动画! 在APP中,动画就是一个点睛之笔!可以给用户增加一些独特的体验感,估计也有许多的和我一样的,看着那些觉得不错的动画,也就只能流口水的孩子,毕竟可能不知道从哪里下手去写!动画学习的过程我会总结一个系列的出来,总结一下iOS中动画的一个学习的过程,以及当中出现的一些问题也会和大家分享。现总结几点在学习动画之前的知道的一些点,这些能帮助我们写好学好动画。 一:从这里 Quartz2D 开始 在我的学习过程中,我是先从 Quartz2D 开始学习的,它里面的贝塞尔曲线在我们
Mr.RisingSun
2018/01/12
8630
iOS 动画笔记 (一)
前端: 轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很多便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5-Dooring编辑器 中的水波动画.
徐小夕
2021/03/12
1.5K0
前端: 轻松教你使用纯css实现水波动画
绘图-UIBezierPath
UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。 所以 UIBezierPath 是基于 Core Graphics 实现的一项绘图技术。
進无尽
2018/09/12
1.4K0
绘图-UIBezierPath
iOS动画系列之八:使用CAShapeLayer绘画动态流量图1. CAShapeLayer2. 实战:绘制一个镂空图层动画3. 使用CAShapeLayer绘画动态流量图
这篇文章通过使用CAShapeLayer和UIBezierPath来画出一个动态显示剩余流量的小动画。 最终实现的效果如下: Paste_Image.png 动态效果图: shapeLayerAni.
stanbai
2018/06/28
1.8K0
iOS开源小项目-WSL
WSL是一款拥有 音乐播放,新闻,壁纸,画板,简易地图,计时器等等功能的小项目,是我自己早期学习时做着玩的,并没上架;UI是自己设计,所以挺吃藕的,粗糙的,没做适配,是在6尺寸下开发的 ,还希望不要嫌弃了O(∩_∩)O哈哈~,接口是抓取安卓壁纸、天天动听、IPadDown新闻的接口!此小项目仅作为学习参考用!下面稍微介绍下此APP的功能模块,有需要的可以去去 我的github ,欢迎star! (gif有点大,有的压缩的失真了,,,,) 0 、启动界面 第一次安装运行会有APP的介绍页面,对于启动的动画
且行且珍惜_iOS
2018/05/22
2.7K3
高性能设置圆角,告别离屏渲染
今天来写一个老生常谈的话题,也是一个面试的高频问题,我也在面试时不止一次被问到过这个问题——如何高性能的设置圆角。就用他作为2017年春节上班之后的第一篇文章。
Originalee
2018/08/30
9750
老司机带你走进Core Animation 之CAShapeLayer和CATextLayer
老司机带你走进Core Animation 之CAShapeLayer和CATextLayer
老司机Wicky
2018/08/22
1.6K0
老司机带你走进Core Animation 之CAShapeLayer和CATextLayer
iOS开发CoreGraphics核心图形框架之一——CGPath的应用
    CoreGraphics核心图形框架相较于UIKit框架更加偏于底层。在Objective-C工程中,CoreGraphics其中方法都是采用C语言风格进行编写的,同时其并不支持Objective-C的自动引用计数,在使用这个框架进行编程时,开发者要手动对内存进行管理。在Swift工程中,Apple使用Swift语言对CoreGraphics矿建进行了重构,将CGPath,CGMutablePaht等都重新定义为了类。CGPath可以理解为图形的路径,在Objective-C工程中,其实系统定义的一个内部结构体,开发者不可以直接使用,开发者CGPathRef和CGMutablePathRef别名作为CGPath的引用,实际上,CGPathRef和CGMutablePathRef都是CGPath结构体类型的指针,不同的是一个是const类型不可修改的,一个是可以修改的,系统定义如下:
珲少
2018/08/15
1.8K0
iOS开发CoreGraphics核心图形框架之一——CGPath的应用
CALayer系列、CGContextRef、UIBezierPath、文本属性Attributes
先上效果图: CALayer系列.gif CGContextRef、UIBezierPath、文本属性Attributes.gif 一、CAEmitterLayer 粒子属性 //设置发射器 C
且行且珍惜_iOS
2018/05/22
1.1K0
自定义View实现横向的双水波纹进度条
网上垂直的水波纹进度条很多,但横向的很少,将垂直的水波纹改为水平的还遇到了些麻烦,现在完善后发布出来,希望遇到的人少躺点坑。
Jingbin
2021/11/29
7810
绘图-几个较复杂统计图案例的实现分析
我们可以看到上图的动图是一组组合动画,共有四部分组成:坐标横竖虚线的动画、曲线的动态绘制、小圆点的动画、渐变区域的动画。下面逐个分析
進无尽
2018/09/12
1.5K0
绘图-几个较复杂统计图案例的实现分析
OC绘制基本图形1. UIKit中封装了一些最常用的绘图方法2. 贝塞尔路径常用方法列表(BezierPath)3. 保存屏幕截图,并存储至相册
好了,在之前的两篇文章里面写了Quartz2D的一些基本知识。从这篇开始写一下OC绘制基本图形的方法。 1. UIKit中封装了一些最常用的绘图方法 1.1 矩形 填充 UIRectFill(rect) 画线 UIRectFrame(rect) 1.2 字符串 绘制 [str drawInRect:rect withAttributes:attr]; 1.3 图像 拉伸 [image drawInRect:rect] 绘制 [image drawAtPoint:CGPointZero]; 平铺 [
stanbai
2018/06/28
1.6K0
iOS实践:通过核心动画完成过山车1. 思路和所用到的内容2. 辅助元素的创建(背景颜色、草坪、大地、小树、云彩)3. 雪山的实现4. 轨道的实现
呼哧,终于今天到了最后一篇啦,也是醉了,弄了两三个月。从最开始计划只写三篇就好了,结果自己没把握好,一点点加成了今天这个样子。因为增加的内容太多,也差点变成太监文,不过好在没有放弃自己。所以各位行行好,要是看上去觉得还不错,就点个赞,打赏小的点儿。这玩意儿写的我是头发乱发,两眼通红。哇哇哇哇~ 接下来要写啥,确实还没想好。现在的感觉就是胸口的一块大石头没有了,要去尽情的嗨皮!!!! 之前在一个网站上看到了一个HTML5/SVG实现的过山车动画,点这里看网页版。 觉得很棒,想想咱们iOS也完全可以实现,正好还
stanbai
2018/06/28
1.7K0
iOS QQ 基础动画组件
由于产品与运营需求需要实现形态更为丰富的动画,例如中秋节的“玉兔”彩蛋、近期的“下雪”彩蛋和后续会上线的新玩法(暂时保密)等,需要有功能更强大更全面的通用动画能力。基于此诉求,借鉴于现有的成熟动画组件的经验,构建了QQAnimationKit并在实现了一些基础的通用能力。
mickeylu
2021/11/09
8210
推荐阅读
相关推荐
使用CAShapeLayer绘图
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档