孟宪亮的技术博客

记录成长中的一点一滴

爱奇艺播放按钮动画解析

一、动画过程分析1、拆分动画正常动画效果如下: 操作 现象 结论 放慢动画 这个效果可以反复多看几次,观察一下这个动画是由那几部分组成的,然后再往下看 添加辅助颜色 可以看出,整个动画有四部分组成:1、左侧竖线 2、右侧竖线 3、三角形 4、底部过渡圆弧 ...

2017-08-29 11:54:14

阅读数 1248

评论数 0

优酷播放按钮动画原理解析

一、动画过程分析1、拆分动画正常动画效果如下: 操作 现象 结论 放慢动画 可以看出动画是由外侧的蓝色部分和中间的红色三角组成。 去掉旋转 可以看出核心的东西就是竖和弧线的缩进、三角形的透明度变化。 只保一侧留竖线和圆弧 可以看出竖线的动画时长大...

2017-08-16 16:58:14

阅读数 1882

评论数 0

iOS 动画解析 支付宝支付动画 下

上一篇博客分析了支付中动画的实现,本篇博客是分析支付完成的动画。一、动画解析为了方便观察,放慢了动画的速度,并添加辅助线: 通过上图可知,支付完成的动画由两部分组成:圆环动画 + 对号动画二、代码实现1、圆环动画这个动画比较简单,是利用贝塞尔曲线画弧的功能。再利用CAShapeLayer的str...

2017-04-17 16:07:22

阅读数 1048

评论数 2

iOS 动画解析 支付宝支付动画 上

平时在用支付宝付款时,会有一个支付中的动画和一个支付完成的动画。这篇博客主要分析一下 支付中 的动画效果,效果如下:一、动画解析为了方便观察,添加了放慢加载动画的速度并添加辅助线:从图中可以看出:加载圆弧运动轨迹可分为前半段和后半段;并且圆弧的起始角度(StartAngle)和结束角度(EndAn...

2017-04-17 12:54:12

阅读数 2776

评论数 3

iOS 动画解析 圆球加载动画 XLBallLoading

一、显示效果二、原理分析1、拆解动画从效果图来看,动画可拆解成两部分:放大动画、位移动画 放大动画 比较简单,这里主要来分析一下位移动画(1)、先去掉缩放效果:(2)、去掉其中的一个圆球现在基本可以看出主要原理就是让其中一个圆球绕另一个球做圆弧运动,只要确定一个圆球的运动轨迹,另一个圆球和它左相...

2017-04-12 19:43:28

阅读数 2861

评论数 3

iOS UICollectionView无限轮播

一、最终效果 二、原理说明 通过UICollectionView实现横向滚动轮播效果如下图所示,当移动到左右边缘后不可以继续移动 将CollectionView展开后的示意图如下: 思考:要使CollectionView滚动到左边缘和右边缘时均可以继续滚动,并且从左边缘向左滚动时显...

2017-03-06 20:47:54

阅读数 5772

评论数 0

iOS 仿微博客户端红包加载界面 XLDotLoading

一、显示效果 二、原理简介 1、思路 要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大、缩小的效果实现的这种有距离感的效果。思路如下: 一、这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做“相对运动”即可。 二、让硬币从左至右...

2017-02-07 12:57:51

阅读数 1999

评论数 0

iOS 利用UICollectionView拖拽排序 实现的仿照腾讯新闻频道管理功能 XLChannelControl

一、实现效果      频道界面的显示 ------------》点击进行添加/删除--------》 按住可以进行拖拽排序              二、实现原理 1、主要思路就是把所有的按钮分成两部分,上部分放置的的是已经订阅的频道,下半部分放置的是推荐的频道;把按钮放到两个集合里,然后按...

2017-01-12 10:06:44

阅读数 7874

评论数 5

iOS 利用UICollectionView横向滚动、余弦函数曲线特性实现居中放大的卡片浏览工具 XLCardSwitch

一、实现效果      二、原理说明 利用余弦函数的曲线特性实现的图片高度变化,具体原理请参考我的另一篇博客: iOS 利用余弦函数实现卡片浏览工具 三、代码说明 1、创建方法 XLCardSwitch *switchView = [[XLCardSwitch alloc] ini...

2017-01-06 13:15:36

阅读数 8820

评论数 0

iOS 圆环进度指示器 XLCircleProgress

一、实现效果 二、使用方法 CGFloat circleWidth = self.view.bounds.size.width; _circle = [[XLCircleProgress alloc] initWithFrame:CGRectMake(0, 0, circl...

2017-01-05 21:37:56

阅读数 2326

评论数 0

iOS 仿照今日头条 实现的滚动表格 XLSlideSwitch

假装有摘要

2017-01-04 18:00:40

阅读数 2713

评论数 21

iOS 利用正余弦曲线实现波浪形的XLWaveProgress

一、效果 二、工作原理 三、代码 Demo下载

2016-11-10 21:32:48

阅读数 6287

评论数 1

iOS 利用余弦函数实现卡片浏览工具

一、实现效果 通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间的变大。效果如下: 二、原理说明 1、上面的动画效果是根据余弦函数的曲线特性实现的,先看一下函数曲线y=cos(x),在区间-π/2 到 π/2的范围内,y的值在x的0的是后是最大的,左右则越来越小。 2、可以将被滚动...

2016-11-09 19:40:42

阅读数 2548

评论数 1

iOS CAShapeLayer + UIBezierPath 实现震动条调效果

一、实现原理 原理很简单:通过给Layer添加一个运动路径,使Layer在这个路径下一直重复运动即可; 二、代码 //动画名称 static NSString *AnimationName = @"ESSEQAnimation"; @implementation Playin...

2016-11-07 11:09:56

阅读数 669

评论数 0

UITextField 设置placeholder颜色

以设置成白色为例: NSString *placeHolder = @"请输入用户名"; _textField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:placeHo...

2016-09-23 11:06:28

阅读数 365

评论数 0

iOS 获取圆环终点位置的坐标方法 (UIBezierPath 终点位置)

目标是下图的情况: 画一个圆弧,在圆弧结束位置放置一个红色圆点 这需要先假想一个坐标系效果如下 由于贝塞尔曲线是顺时针方向绘制的,所以可以顺时针想像成四个象限 获取位置方法步骤: 1、确定所在的角度是多少 2、确定象限 3、后通正弦余弦函数来确定x、y值 4、最终得出在整个layer 中...

2016-09-22 20:53:19

阅读数 4580

评论数 5

iOS CAGradientLayer 实现渐变色

先说一给layer添加下渐变色的原理,渐变色使用的类是CAGradientLayer 有两个要素,渐变颜色的起点和终点、渐变的颜色集合 //设置渐变颜色 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; ...

2016-09-22 20:31:37

阅读数 3875

评论数 0

UIAlertView 按钮顺序

2016-09-14 14:29:01

阅读数 303

评论数 0

UICollectionView添加headerview/footerView

下面以创建footerview为例: 1、在UICollectionViewFlowLayout中添加: flowLayout.footerReferenceSize = CGSizeMake(ScreenWidth, 30); 2、创建自定义的Footerview,继承于UICollect...

2016-08-17 16:16:43

阅读数 10145

评论数 0

UINavigationController 右滑返回

https://github.com/forkingdog/FDFullscreenPopGesture

2016-05-24 17:53:43

阅读数 495

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭