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

时间:2022-08-31 09:59:14

一、显示效果

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

二、原理简介

1、思路

要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大、缩小的效果实现的这种有距离感的效果。思路如下:

一、这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做“相对运动”即可。

二、让硬币从左至右移动时先变小再回复正常;从右至左移动时先变大再回复正常;这样就实现了这用有距离感的“相对运动”。

2、代码

第一步 要实现一个硬币在一定范围内实现左右往复运动,需要先固定一个范围,当运动到左边缘时让其向右运动,当运动到有边缘时让其向左运动。

这里用到了mvc的思想,先创建一个模型xldot,给这个模型添加一个direction属性,然后通过改变模型direction属性从而改变运动方向。

?
1
2
3
4
5
6
7
8
9
10
11
typedef ns_enum(nsinteger,dotditection)
{
  dotditectionleft = -1,
  dotditectionright = 1,
};
@interface xldot : uiview
//移动方向 就两种 左、右
@property (nonatomic,assign) dotditection direction;
//字体颜色
@property (nonatomic,strong) uicolor *textcolor;
@end

先初始化一个豆,放在容器的左边,方向设为向右

?
1
2
3
4
5
6
7
8
//初始化存放豆豆的的容器
_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实现刷新工作,代码如下

?
1
2
_link = [cadisplaylink displaylinkwithtarget:self selector:@selector(reloadview)];
[_link addtorunloop:[nsrunloop mainrunloop] formode:nsrunloopcommonmodes];

刷新代码如下,通过移动到左右边缘,改变direction属性

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//刷新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;
}

显示效果:

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

第二步 实现向左移动先放大再回复正常、向右运动先变小再回复正常。

代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//显示放大、缩小动画
-(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先变大再变小的特性

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

效果如下:

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

第三步 放置另一个豆豆,和第一个豆豆做“相对运动”,包括放大变小、运动方向;

保证相对距离的代码:

?
1
2
3
4
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 仿微博客户端红包加载界面 XLDotLoading效果

三、代码

github地址

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

原文链接:http://blog.csdn.net/u013282507/article/details/54907724