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

 更新时间:2017年02月07日 13:54:15   作者:孟宪亮  
这篇文章主要介绍了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; 

效果如下:

稍加润色后:

三、代码

GitHub地址

以上所述是小编给大家介绍的iOS 仿微博客户端红包加载界面 XLDotLoading效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Unity3D实验室之iOS真机闪退的解决方法

    Unity3D实验室之iOS真机闪退的解决方法

    下面小编就为大家分享一篇Unity3D实验室之iOS真机闪退的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 浅谈关于如何检测iOS14本地网络权限的一些思路

    浅谈关于如何检测iOS14本地网络权限的一些思路

    这篇文章主要介绍了浅谈关于如何检测iOS14本地网络权限的一些思路,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • iOS开发之触摸事件

    iOS开发之触摸事件

    iOS设备都是可以多点触摸的,是指手指放在iOS设备的屏幕上从屏幕上拖动或抬起。系统当前视图响应触摸事件,若无响应则向上层传递,构成响应者链。触摸事件的函数有4个。
    2016-04-04
  • iOS实现微信/QQ显示最近拍摄图片的功能实例代码

    iOS实现微信/QQ显示最近拍摄图片的功能实例代码

    如果你刚刚拍摄了图片,在使用微信/QQ发生消息时会显示“你可能要发送的图片”,这个功能非常人性化,怎么实现的呢?下面小编给大家分享iOS实现微信/QQ显示最近拍摄图片的功能实例代码,一起看看吧
    2017-03-03
  • IOS开发之判断两个数组中数据是否相同实例详解

    IOS开发之判断两个数组中数据是否相同实例详解

    这篇文章主要介绍了IOS开发之判断两个数组中数据是否相同实例详解的相关资料,需要的朋友可以参考下
    2017-02-02
  • IOS9.0 LaunchScreen.StroyBoard自定义启动图片详解

    IOS9.0 LaunchScreen.StroyBoard自定义启动图片详解

    这篇文章主要介绍了IOS9.0 LaunchScreen.StroyBoard自定义启动图片详解的相关资料,需要的朋友可以参考下
    2017-02-02
  • 详解IOS图层转场动画

    详解IOS图层转场动画

    这篇文章主要为大家详细介绍了IOS图层转场动画, CATransition类实现层的转场动画,能够为层提供移出屏幕和移入屏幕的动画效果,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • iOS实现裁剪框和图片剪裁功能

    iOS实现裁剪框和图片剪裁功能

    这篇文章主要为大家详细介绍了iOS实现裁剪框和图片剪裁功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • xcode 详解创建静态库和动态库的方法

    xcode 详解创建静态库和动态库的方法

    这篇文章主要介绍了xcode 详解创建静态库和动态库的方法的相关资料,这里对创建静态库和动态库的方法详细介绍,需要的朋友可以参考下
    2017-01-01
  • iOS中的缓存计算和清除完整实例代码

    iOS中的缓存计算和清除完整实例代码

    iOS设备使用时间长了,一些应用程序的缓存垃圾文件就会越存越多,这些文件堆积多了就会拖慢系统速度。因此,小编整理了iOS中的缓存计算和清除实例
    2017-04-04

最新评论