iOS 仿微博客户端红包加载界面 XLDotLoading效果
一、显示效果
二、原理简介
1、思路
要实现这个效果需要先知道这两个硬币是怎样运动的，然后通过放大、缩小的效果实现的这种有距离感的效果。思路如下：
一、这两个硬币是在一定范围内做相对运动的，可以先使一个硬币在一个固定范围内做左右的往复运动，另一个硬币和它做“相对运动”即可。
二、让硬币从左至右移动时先变小再回复正常；从右至左移动时先变大再回复正常；这样就实现了这用有距离感的“相对运动”。
2、代码
第一步 要实现一个硬币在一定范围内实现左右往复运动，需要先固定一个范围，当运动到左边缘时让其向右运动，当运动到有边缘时让其向左运动。
这里用到了MVC的思想，先创建一个模型XLDot，给这个模型添加一个Direction属性，然后通过改变模型direction属性从而改变运动方向。
typedef NS_ENUM(NSInteger,DotDitection)
{
DotDitectionLeft = -1,
DotDitectionRight = 1,
};
@interface XLDot : UIView
//移动方向 就两种 左、右
@property (nonatomic,assign) DotDitection direction;
//字体颜色
@property (nonatomic,strong) UIColor *textColor;
@end
先初始化一个豆，放在容器的左边，方向设为向右
//初始化存放豆豆的的容器 _dotContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 200)]; _dotContainer.center = self.center; [self addSubview:_dotContainer]; XLDot *dot = [[XLDot alloc] initWithFrame:CGRectMake(0, 0, [self dotWidth],[self dotWidth])]; dot.backgroundColor = [UIColor redColor]; dot.direction = DotDitectionRight; [_dotContainer addSubview:dot];
通过CADisplayLink实现刷新工作，代码如下
_link = [CADisplayLink displayLinkWithTarget:self selector:@selector(reloadView)]; [_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
刷新代码如下，通过移动到左右边缘，改变direction属性
//刷新UI
-(void)reloadView
{
XLDot *dot1 = _dots.firstObject;
//改变移动方向、约束移动范围
//移动到右边距时
if (dot1.center.x >= _dotContainer.bounds.size.width - [self dotWidth]/2.0f) {
CGPoint center = dot1.center;
center.x = _dotContainer.bounds.size.width - [self dotWidth]/2.0f;
dot1.center = center;
dot1.direction = DotDitectionLeft;
[_dotContainer bringSubviewToFront:dot1];
}
//移动到左边距时
if (dot1.center.x <= [self dotWidth]/2.0f) {
dot1.center = CGPointMake([self dotWidth]/2.0f, dot1.center.y);
dot1.direction = DotDitectionRight;
[_dotContainer sendSubviewToBack:dot1];
}
//更新第一个豆的位置
CGPoint center1 = dot1.center;
center1.x += dot1.direction * [self speed];
dot1.center = center1;
}
显示效果：
第二步 实现向左移动先放大再回复正常、向右运动先变小再回复正常。
代码如下：
//显示放大、缩小动画
-(void)showAnimationsOfDot:(XLDot*)dot
{
CGFloat apart = dot.center.x - _dotContainer.bounds.size.width/2.0f;
//最大距离
CGFloat maxAppart = (_dotContainer.bounds.size.width - [self dotWidth])/2.0f;
//移动距离和最大距离的比例
CGFloat appartScale = apart/maxAppart;
//获取比例对应余弦曲线的Y值
CGFloat transfomscale = cos(appartScale * M_PI/2.0);
//向右移动则 中间变大 两边变小
if (dot.direction == DotDitectionLeft) {
dot.transform = CGAffineTransformMakeScale(1 + transfomscale/4.0f, 1 + transfomscale/4.0f);
//向左移动则 中间变小 两边变大
}else if (dot.direction == DotDitectionRight){
dot.transform = CGAffineTransformMakeScale(1 - transfomscale/4.0f,1 - transfomscale/4.0f);
}
}
原理是利用余弦函数曲线-π/2到π/2先变大再变小的特性
效果如下：
第三步 放置另一个豆豆，和第一个豆豆做“相对运动”，包括放大变小、运动方向；
保证相对距离的代码：
CGFloat apart = dot1.center.x - _dotContainer.bounds.size.width/2.0f; CGPoint center2 = dot2.center; center2.x = _dotContainer.bounds.size.width/2.0f - apart; dot2.center = center2;
效果如下：
稍加润色后：
三、代码
以上所述是小编给大家介绍的iOS 仿微博客户端红包加载界面 XLDotLoading效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
iOS中使用UItableviewcell实现团购和微博界面的示例
使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文件控件tag值操作 数据模型部分: YYtg.h文件 复制代码 代码如下: // // YYtg.h // 01-团购数据显示(没有配套的类) // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserv
-
iOS开发之路--微博“更多”页面
最终效果图: MoreViewController.m // // MoreViewController.m // 20_帅哥no微博 // // Created by beyond on 14-8-4. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import "MoreViewController.h" @interface MoreViewController () { // more.plist根是字典
-
iOS开发之路--微博新特性页面
BeyondAppDelegate.m // // BeyondAppDelegate.m // 20_帅哥no微博 // // Created by beyond on 14-8-3. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import "BeyondAppDelegate.h" #import "BeyondViewController.h" #import "NewFe
-
iOS开发之路--微博OAuth授权_取得用户授权的accessToken
最终效果图: OauthViewController.m // // OauthViewController.m // 20_帅哥no微博 // // Created by beyond on 14-8-5. // Copyright (c) 2014年 com.beyond. All rights reserved. // 授权控制器,仅运行一次,取得了当前用户的access_token和uid之后,存档,切换窗口的主控制器 #import "OauthViewController.h&quo
-
完整的iOS新浪微博分享功能开发
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 做新浪分享 需先去http://open.weibo.com/apps注册开发者app 很简单! 第1步 第2步 3 设置你的应用的信息 找到自己的appkey 还需要设置自己的kAppRedirectURL测试可以随便写个! 开发部分在下面ios新浪微博分享(2)这部分: 开发需要下载官方的sdkhttp://open.weibo.com/wiki/SDK#iOS_SDK 本人下载的版本 新建一个viewco
-
iOS开发之路--微博骨架搭建
最终效果图: BeyondViewController.m // // BeyondViewController.m // 20_帅哥no微博 // // Created by beyond on 14-8-3. // Copyright (c) 2014年 com.beyond. All rights reserved. // 这个就是主控制器,分为两块,下面是Dock栏,上面是显示不同的子控制器的view,子控制器最好用导航控制器包装一下,这样子控制器就自带了导航条,左按钮,标题,右按钮 /
-
iOS新浪微博、腾讯微博分享功能实例
一个是新浪微博,腾讯微博的分享按钮,一个是他们的绑定情况(其实就是是否授权).点击微博分享中新浪或腾讯按钮,就进行相应的授权(若没授权),显示微博内容,而后发布微博.设置界面中的绑定,就是相关的应用授权. 呵呵,其实也蛮简单滴. 首先分别从新浪微博开放平台(http://open.weibo.com/).腾讯微博开放平台(http://dev.t.qq.com/)中注册应用,获取到Appkey,AppSecret和AppURL(其中 AppURL是要自己填写的). 然后分别下载相关的SDK. h
-
iOS仿微博图片浏览器
KNPhotoBrower 高仿微博图片浏览器 PhotoBrower.gif 一.功能描述及要点 1.加载网络九宫格图片,collectionView,scrollView 2.SDWebImage下载图片,KNProgressHUD显示加载进度 3.高仿微博,显示动画,KNToast提示 二.方法调用 1.创建KNPhotoBrower,并传入相应的参数 // 每一个图片控件对象, 对一一对应 KNPhotoItems ,再将多个KNPhotoItems 对象放入数组 KNPhotoItem
-
iOS仿微博客户端一条微博的展示效果
前言 做一个微博客户端的第三方是自学的第一个实践的项目,自从从事iOS工作之后,就把这个项目给搁置了.趁现在过年回来有些空闲时间,再次修改(总觉得项目就是不停地修改).并且记录一点东西,以后可再回头看看从前走过的路,挖过的坑.这是一条微博的展示,不是整个项目. 废话不多说,先上效果图: 拆分控件 在开始动手写代码之前,我们得先确定怎么去实现这样子的布局,也就是分析需要用到哪些控件. 观察微博客户端,整体是可滑动的,而且界面展示比较规律的,所以应该是使用UITableView实现的.那么一条微博应
-
iOS 仿微博客户端红包加载界面 XLDotLoading效果
一.显示效果 二.原理简介 1.思路 要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大.缩小的效果实现的这种有距离感的效果.思路如下: 一.这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做"相对运动"即可. 二.让硬币从左至右移动时先变小再回复正常:从右至左移动时先变大再回复正常:这样就实现了这用有距离感的"相对运动". 2.代码 第一步 要实现一个硬币在一定范围内实现左右往复运动,需要先固定一个范
-
iOS仿抖音视频加载动画效果的实现方法
前言 这几天一直跟开源的抖音demo斗智斗勇,今天跟大家分享的是抖音中或者快手中加载视频的动画,这个加载效果还是挺实用,下面话不多说了,来随着小编一起学习学习吧 上图看成品 实现原理 首先我创建一个视图 @interface ViewController () @property (nonatomic, strong) UIView *playLoadingView; @end @implementation ViewController - (void)viewDidLoad { [super
-
Android实现仿iOS菊花加载圈动画效果
常见的实现方式 切图,做旋转动画 自定义View,绘制效果 gif图 1.切图会增加体积,但相对简单,不过在换肤的场景下,会使用不同颜色,需要准备多张图,不够灵活. 2.由于自定义的好处,不同颜色只需要提供自定义属性,换肤时切换属性设置即可,比较灵活. 3.gif图普遍比较大,而且加载gif没有原生支持,需要引入第三方库,而且消耗内存比较大,不推荐. 效果图: 完整代码 自定义属性: <?xml version="1.0" encoding="utf-8"?&
-
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片
-
asp.net Application_AcquireRequestState事件,导致Ajax客户端不能加载
开发环境IIS7下一切正常,但是部署到IIS6服务器以后, 每次刷新页面总出现Ajax客户端不能加载的问题. 复制代码 代码如下: protected void Application_AcquireRequestState(object sender, EventArgs e) { string oldToken = Session["token"].ToString(); } MSDN上说: Application_AcquireRequestState, 当ASP.NET获取当前
-
Android仿支付宝笑脸刷新加载动画的实现代码
看到支付宝的下拉刷新有一个笑脸的动画,因此自己也动手实现一下.效果图如下: 一.总体思路 1.静态部分的笑脸. 这一部分的笑脸就是一个半圆弧,加上两颗眼睛,这部分比较简单,用于一开始的展示. 2.动态笑脸的实现. 2.1.先是从底部有一个圆形在运动,运动在左眼位置时把左眼给绘制,同时圆形继续运动,运动到右眼位置时绘制右眼,圆形继续运动到最右边的位置. 2.2.当上面的圆形运动到最右边时候,开始不断绘制脸,从右向左,脸不断增长,这里脸设置为接近半个圆形的大小. 2.3.当脸画完的时候,开始让脸旋转
-
ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面
-
iOS开发中UIWebView的加载本地数据的三种方式
UIWebView是IOS内置的浏览器,可以浏览网页,打开文档 html/htm pdf docx txt等格式的文件. safari浏览器就是通过UIWebView做的. 服务器将MIME的标识符等放入传送的数据中告诉浏览器使用那种插件读取相关文件. uiwebview加载各种本地文件(通过loadData方法): UIWebView加载内容的三种方式: 1 加载本地数据文件 指定文件的MIMEType 编码格式使用@"UTF-8" 2加载html字符串(可以加载全部或者部分html
-
android仿爱奇艺加载动画实例
本篇文章介绍了android仿爱奇艺加载动画实例,具体代码如下: 效果图: 用到的知识点: Path ValueAnimator 如果对Path和ValueAnimator还不熟悉推荐去看这几个大神的Blog自定义view的目前讲的最适合我的文章 ,自定义view的详细教程和实践,这个也是教程和实践,感谢他们的付出!(希望大家可以认真看完,可以得到很多启发). 拆解动画 一个圆先顺时针的慢慢画出来(圆不是一个闭合的圆) 这一步是一个组合动画,圆慢慢的消失,同时三角形顺时针旋转 这里的难点主要就是