iOS 动画效果开发经验总结
文章平均质量分 91
整理在开发中使用过的动画效果,并讲解开发思路和原理。
吴彦祖666
这个作者很懒,什么都没留下…
展开
-
iOS 动画解析 圆球加载动画 XLBallLoading
一、显示效果二、原理分析1、拆解动画从效果图来看,动画可拆解成两部分:放大动画、位移动画 放大动画 比较简单,这里主要来分析一下位移动画(1)、先去掉缩放效果:(2)、去掉其中的一个圆球现在基本可以看出主要原理就是让其中一个圆球绕另一个球做圆弧运动,只要确定一个圆球的运动轨迹,另一个圆球和它左相对运动即可。下面咱们重点说一下这个圆弧运动的原理。2、圆弧运动为了方便观察我们先放慢一下这个动画,然后添原创 2017-04-12 19:43:28 · 4388 阅读 · 7 评论 -
iOS 利用UICollectionView拖拽排序 实现的仿照腾讯新闻频道管理功能 XLChannelControl
一、实现效果 频道界面的显示 ------------》点击进行添加/删除--------》 按住可以进行拖拽排序 二、实现原理1、主要思路就是把所有的按钮分成两部分,上部分放置的的是已经订阅的频道,下半部分放置的是推荐的频道;把按钮放到两个集合里,然后按照按钮在集合里的顺序进行排序。 //保存上半部分卡片 NSMutable原创 2017-01-12 10:06:44 · 13544 阅读 · 5 评论 -
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 · 4217 阅读 · 0 评论 -
iOS 仿照今日头条 实现的滚动表格 XLSlideSwitch
假装有摘要原创 2017-01-04 18:00:40 · 3604 阅读 · 21 评论 -
iOS 利用UICollectionView横向滚动、余弦函数曲线特性实现居中放大的卡片浏览工具 XLCardSwitch
一、实现效果 二、原理说明利用余弦函数的曲线特性实现的图片高度变化,具体原理请参考我的另一篇博客:iOS 利用余弦函数实现卡片浏览工具三、代码说明1、创建方法 XLCardSwitch *switchView = [[XLCardSwitch alloc] initWithFrame:CGRectMake(0, 0, [self Screen原创 2017-01-06 13:15:36 · 16208 阅读 · 3 评论 -
iOS 仿微博客户端红包加载界面 XLDotLoading
一、显示效果二、原理简介1、思路要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大、缩小的效果实现的这种有距离感的效果。思路如下:一、这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做“相对运动”即可。二、让硬币从左至右移动时先变小再回复正常;从右至左移动时先变大再回复正常;这样就实现了这用有距离感的“相对原创 2017-02-07 12:57:51 · 2636 阅读 · 0 评论 -
iOS 利用余弦函数实现卡片浏览工具
一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间的变大。效果如下:二、原理说明1、上面的动画效果是根据余弦函数的曲线特性实现的,先看一下函数曲线y=cos(x),在区间-π/2 到 π/2的范围内,y的值在x的0的是后是最大的,左右则越来越小。2、可以将被滚动的卡片的高度按照0.0~1.0的比例放大缩小,效果如下:3、放置到手机屏幕原创 2016-11-09 19:40:42 · 4931 阅读 · 3 评论 -
iOS 利用正余弦曲线实现波浪形的XLWaveProgress
一、效果二、工作原理三、代码Demo下载原创 2016-11-10 21:32:48 · 8469 阅读 · 1 评论 -
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 · 911 阅读 · 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 · 27961 阅读 · 1 评论 -
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 · 3240 阅读 · 0 评论 -
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 · 854 阅读 · 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 · 7593 阅读 · 0 评论 -
iOS CAGradientLayer 实现渐变色
先说一给layer添加下渐变色的原理,渐变色使用的类是CAGradientLayer有两个要素,渐变颜色的起点和终点、渐变的颜色集合 //设置渐变颜色 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = view.bounds; [gradient原创 2016-09-22 20:31:37 · 5079 阅读 · 0 评论 -
iOS 获取圆环终点位置的坐标方法 (UIBezierPath 终点位置)
目标是下图的情况:画一个圆弧,在圆弧结束位置放置一个红色圆点这需要先假想一个坐标系效果如下由于贝塞尔曲线是顺时针方向绘制的,所以可以顺时针想像成四个象限获取位置方法步骤:1、确定所在的角度是多少2、确定象限3、后通正弦余弦函数来确定x、y值4、最终得出在整个layer 中的位置原创 2016-09-22 20:53:19 · 7192 阅读 · 5 评论 -
iOS CAShapeLayer + UIBezierPath 实现震动条调效果
一、实现原理原理很简单:通过给Layer添加一个运动路径,使Layer在这个路径下一直重复运动即可;二、代码//动画名称static NSString *AnimationName = @"ESSEQAnimation";@implementation PlayingLineView{ //线宽度 float _lineWidth; //线颜色原创 2016-11-07 11:09:56 · 1009 阅读 · 0 评论