iOS 动画
文章平均质量分 85
吴彦祖666
这个作者很懒,什么都没留下…
展开
-
UIView 旋转研究
1、http://www.cnblogs.com/smileEvday/archive/2013/05/25/IOSImageEdit.html2、http://blog.csdn.net/zaitianaoxiang/article/details/81863313、http://code4app.com/ios/TaiChi/547c2651933bf0d1068b5dd44、ht原创 2016-04-20 16:11:42 · 867 阅读 · 0 评论 -
iOS UIBezierPath 通过贝塞尔曲线画圆环 创建一个环形进度指示器
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:30 startAngle:(0*M_PI) endAngle:1.5f*M_PI clockwise:YES]; path.lineWidth = 10; //设置颜色 [[原创 2015-12-10 11:21:57 · 28038 阅读 · 1 评论 -
iOS CAGradientLayer 实现渐变色
先说一给layer添加下渐变色的原理,渐变色使用的类是CAGradientLayer有两个要素,渐变颜色的起点和终点、渐变的颜色集合 //设置渐变颜色 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = view.bounds; [gradient原创 2016-09-22 20:31:37 · 5106 阅读 · 0 评论 -
iOS 利用余弦函数实现卡片浏览工具
一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间的变大。效果如下:二、原理说明1、上面的动画效果是根据余弦函数的曲线特性实现的,先看一下函数曲线y=cos(x),在区间-π/2 到 π/2的范围内,y的值在x的0的是后是最大的,左右则越来越小。2、可以将被滚动的卡片的高度按照0.0~1.0的比例放大缩小,效果如下:3、放置到手机屏幕原创 2016-11-09 19:40:42 · 4972 阅读 · 3 评论 -
iOS 利用UICollectionView横向滚动、余弦函数曲线特性实现居中放大的卡片浏览工具 XLCardSwitch
一、实现效果 二、原理说明利用余弦函数的曲线特性实现的图片高度变化,具体原理请参考我的另一篇博客:iOS 利用余弦函数实现卡片浏览工具三、代码说明1、创建方法 XLCardSwitch *switchView = [[XLCardSwitch alloc] initWithFrame:CGRectMake(0, 0, [self Screen原创 2017-01-06 13:15:36 · 16309 阅读 · 3 评论 -
iOS 仿微博客户端红包加载界面 XLDotLoading
一、显示效果二、原理简介1、思路要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大、缩小的效果实现的这种有距离感的效果。思路如下:一、这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做“相对运动”即可。二、让硬币从左至右移动时先变小再回复正常;从右至左移动时先变大再回复正常;这样就实现了这用有距离感的“相对原创 2017-02-07 12:57:51 · 2649 阅读 · 0 评论 -
iOS UICollectionView无限轮播
一、最终效果二、原理说明通过UICollectionView实现横向滚动轮播效果如下图所示,当移动到左右边缘后不可以继续移动将CollectionView展开后的示意图如下:思考:要使CollectionView滚动到左边缘和右边缘时均可以继续滚动,并且从左边缘向左滚动时显示的是最后一页,从右边缘向右滚动时显示的是第一页,可以在左边插入最后一页,在右原创 2017-03-06 20:47:54 · 8851 阅读 · 1 评论 -
iOS 利用正余弦曲线实现波浪形的XLWaveProgress
一、效果二、工作原理三、代码Demo下载原创 2016-11-10 21:32:48 · 8505 阅读 · 1 评论 -
iOS 利用UICollectionView拖拽排序 实现的仿照腾讯新闻频道管理功能 XLChannelControl
一、实现效果 频道界面的显示 ------------》点击进行添加/删除--------》 按住可以进行拖拽排序 二、实现原理1、主要思路就是把所有的按钮分成两部分,上部分放置的的是已经订阅的频道,下半部分放置的是推荐的频道;把按钮放到两个集合里,然后按照按钮在集合里的顺序进行排序。 //保存上半部分卡片 NSMutable原创 2017-01-12 10:06:44 · 13588 阅读 · 5 评论 -
iOS 动画解析 圆球加载动画 XLBallLoading
一、显示效果二、原理分析1、拆解动画从效果图来看,动画可拆解成两部分:放大动画、位移动画 放大动画 比较简单,这里主要来分析一下位移动画(1)、先去掉缩放效果:(2)、去掉其中的一个圆球现在基本可以看出主要原理就是让其中一个圆球绕另一个球做圆弧运动,只要确定一个圆球的运动轨迹,另一个圆球和它左相对运动即可。下面咱们重点说一下这个圆弧运动的原理。2、圆弧运动为了方便观察我们先放慢一下这个动画,然后添原创 2017-04-12 19:43:28 · 4406 阅读 · 7 评论 -
iOS 仿照今日头条 实现的滚动表格 XLSlideSwitch
假装有摘要原创 2017-01-04 18:00:40 · 3616 阅读 · 21 评论 -
iOS 动画解析 支付宝支付动画 上
平时在用支付宝付款时,会有一个支付中的动画和一个支付完成的动画。这篇博客主要分析一下 支付中 的动画效果,效果如下:一、动画解析为了方便观察,添加了放慢加载动画的速度并添加辅助线:从图中可以看出:加载圆弧运动轨迹可分为前半段和后半段;并且圆弧的起始角度(StartAngle)和结束角度(EndAngle)在做有规律的变化;前半段: 从-0.5π到π,这一段运动中速度较快;StartAngle不变,始原创 2017-04-17 12:54:12 · 4136 阅读 · 4 评论 -
iOS 动画解析 支付宝支付动画 下
上一篇博客分析了支付中动画的实现,本篇博客是分析支付完成的动画。一、动画解析为了方便观察,放慢了动画的速度,并添加辅助线: 通过上图可知,支付完成的动画由两部分组成:圆环动画 + 对号动画二、代码实现1、圆环动画这个动画比较简单,是利用贝塞尔曲线画弧的功能。再利用CAShapeLayer的strokeEnd属性加上核心动画实现的圆环动画。-(void)circleAnimation{ //显原创 2017-04-17 16:07:22 · 1507 阅读 · 2 评论 -
爱奇艺播放按钮动画解析
一、动画过程分析1、拆分动画正常动画效果如下: 操作 现象 结论 放慢动画 这个效果可以反复多看几次,观察一下这个动画是由那几部分组成的,然后再往下看 添加辅助颜色 可以看出,整个动画有四部分组成:1、左侧竖线 2、右侧竖线 3、三角形 4、底部过渡圆弧 只保留竖线 竖线的动画包括两部分,一部分是开始的“预备”动画和结束时的“惯性”动画;第二步分是原创 2017-08-29 11:54:14 · 2549 阅读 · 0 评论 -
优酷播放按钮动画原理解析
一、动画过程分析1、拆分动画正常动画效果如下: 操作 现象 结论 放慢动画 可以看出动画是由外侧的蓝色部分和中间的红色三角组成。 去掉旋转 可以看出核心的东西就是竖和弧线的缩进、三角形的透明度变化。 只保一侧留竖线和圆弧 可以看出竖线的动画时长大概是圆弧动动画时长的一半;弧线的运动角度是π/2,两个弧线正好组成一个完整的圆环。 只保留三角动画原创 2017-08-16 16:58:14 · 2765 阅读 · 0 评论 -
iOS 圆环进度指示器 XLCircleProgress
一、实现效果二、使用方法 CGFloat circleWidth = self.view.bounds.size.width; _circle = [[XLCircleProgress alloc] initWithFrame:CGRectMake(0, 0, circleWidth, circleWidth)]; _circle.center = self.vi原创 2017-01-05 21:37:56 · 4234 阅读 · 0 评论 -
iOS 获取圆环终点位置的坐标方法 (UIBezierPath 终点位置)
目标是下图的情况:画一个圆弧,在圆弧结束位置放置一个红色圆点这需要先假想一个坐标系效果如下由于贝塞尔曲线是顺时针方向绘制的,所以可以顺时针想像成四个象限获取位置方法步骤:1、确定所在的角度是多少2、确定象限3、后通正弦余弦函数来确定x、y值4、最终得出在整个layer 中的位置原创 2016-09-22 20:53:19 · 7229 阅读 · 5 评论 -
UIWebView根据内容自适应高度
一、webView通过内容获取高度的几个方法:1、通过webview自带的自适应方法:CGSize size = [webViewsizeThatFits:CGSizeZero];CGFloatwebViewHeight = size.height;2、通过webView可滚动的范围获取高度CGFloat webViewHeight = [webView.scrol原创 2016-04-07 16:06:29 · 827 阅读 · 0 评论 -
iOS动画 实现音乐振动条
h文件:#import @interface PlayingLineView :UIView-(instancetype)initWithFrame:(CGRect)frame lineWidth:(float)lineWidth lineColor:(UIColor*)lineColor;@endm文件#import "Playin原创 2016-03-14 17:01:10 · 3285 阅读 · 0 评论 -
UITextField 设置placeholder颜色
以设置成白色为例: NSString *placeHolder = @"请输入用户名"; _textField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:placeHolder attributes:@{NSForegroundColorAttributeName:[UIColor whi原创 2016-09-23 11:06:28 · 1001 阅读 · 0 评论 -
iOS UIWebView 使用经验集合
webView.scalesPageToFit = YES;原创 2015-05-05 09:17:55 · 539 阅读 · 0 评论 -
UIAlertView 按钮顺序
原创 2016-09-14 14:29:01 · 517 阅读 · 0 评论 -
UICollectionView添加headerview/footerView
下面以创建footerview为例:1、在UICollectionViewFlowLayout中添加:flowLayout.footerReferenceSize =CGSizeMake(ScreenWidth, 30);2、创建自定义的Footerview,继承于UICollectionReusableView ,这里命名为:"MyFooterView"3、注册这原创 2016-08-17 16:16:43 · 13582 阅读 · 0 评论 -
UINavigationController 右滑返回
https://github.com/forkingdog/FDFullscreenPopGesture原创 2016-05-24 17:53:43 · 776 阅读 · 0 评论 -
UIButton 扩大按钮的响应区域
第一种方法:创建一个类目:UIButton+EnlargeTouchArea ,用类方法进行调用使用方法:导入UIButton+EnlargeTouchArea.hUIButton *button = [UIButton new];[button setEnlargeEdge:20];或:[button setEnlargeEdgeWithTop:20 right:20 bot原创 2016-04-27 11:23:05 · 7607 阅读 · 0 评论 -
UIWebView 网页与js交互 webKit
参考:1、iOS中UIWebView使用JS交互 - 机智的新手2、UIWebView长按图片生成保存菜单3、利用javascript和canvas获取UIWebView网页里的图片(不用再下载)4、iOS 8 WebKit框架概览(上)5、iOS 8 WebKit框架概览(下)原创 2016-04-20 18:01:42 · 457 阅读 · 0 评论 -
iOS 绘制虚线
CAShapeLayer *shapeLayer = [CAShapeLayerlayer]; // 设置虚线颜色[shapeLayer setStrokeColor:[[UIColorcolorWithRed:223/255.0 green:223/255.0blue:223/255.0 alpha:1.0f]CGColor]]; // 3=线的宽度 1=原创 2015-12-10 10:58:58 · 927 阅读 · 0 评论 -
iOS CAShapeLayer + UIBezierPath 实现震动条调效果
一、实现原理原理很简单:通过给Layer添加一个运动路径,使Layer在这个路径下一直重复运动即可;二、代码//动画名称static NSString *AnimationName = @"ESSEQAnimation";@implementation PlayingLineView{ //线宽度 float _lineWidth; //线颜色原创 2016-11-07 11:09:56 · 1020 阅读 · 0 评论 -
iOS 自定义UITabbar边框问题
去掉ios自带表框原创 2014-05-06 12:13:12 · 2985 阅读 · 1 评论 -
iOS UITableView 设置分割线样式
一、隐藏分割线:原创 2014-05-06 11:55:21 · 1505 阅读 · 0 评论 -
iOS UITabbar隐藏tabbar方法
Tabbar隐藏的方式原创 2014-05-06 13:43:47 · 818 阅读 · 0 评论 -
iOS UILabel利用NSMutableString显示不同样式的文字(富文本)
*在开发时,有时需要在同一个label中设置不同大小、不同颜色的文字,下面就对这种情况介绍一下具体解决办法一、显示效果二、原理说明UILabel有一个属性是 attributedText*注意这个属性的注释,如果添加 attributedText 后,上面的其它属性将会被忽略,也就是 text、font、textColor、shadowColor、shadowOff原创 2015-12-08 08:51:27 · 2994 阅读 · 0 评论