iOS黑科技【动画特效篇】第四期
本期带来一款实用性强同时又具备高B格的控件--浮动按钮，实现原理也不复杂，短短几行代码就能带来非常出色的用户体验！
movableButton.gif
git来一波，和系统button创建方法一模一样，简单实用：
https://github.com/XMDashen/XMMovableButtonDemo.git
原理解析：
浮动按钮和系统按钮的最大区别就是一个可以移动，而另一个不可以...囧
所以要实现按钮的移动，直接继承UIButton，在button监听触摸移动事件里实现就可以啦
基本思路是将前后两次触摸移动的偏移量设置到button上，如果没有移动偏移量则判断为点击，调用点击事件
//移动时
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
[super touchesMoved:touches withEvent:event];
UITouch * touch = [touches anyObject];
//本次触摸点
CGPoint current = [touch locationInView:self];
//上次触摸点
CGPoint previous = [touch previousLocationInView:self];
CGPoint center = self.center;
//中心点移动触摸移动的距离
center.x += current.x - previous.x;
center.y += current.y - previous.y;
//限制移动范围
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
CGFloat xMin = self.frame.size.width * 0.5f;
CGFloat xMax = screenWidth - xMin;
CGFloat yMin = self.frame.size.height * 0.5f+64;
CGFloat yMax = screenHeight - self.frame.size.height * 0.5f - 49;
if (center.x > xMax) center.x = xMax;
if (center.x < xMin) center.x = xMin;
if (center.y > yMax) center.y = yMax;
if (center.y < yMin) center.y = yMin;
self.center = center;
//移动距离大于0.5才判断为移动了(提高容错性)
if (current.x-previous.x>=0.5 || current.y - previous.y>=0.5) {
self.isMoved = YES;
}
}
注意要限制button的移动范围不要超出屏幕拉不回来了。
用isMoved来记录button的移动状态，判断是否移动，为了提高容错性将移动距离判定为0.5用户体验较好（否则有时点击会产生微小的移动，判断为移动导致点击失效，用户会不高兴的(｡•ˇ‸ˇ•｡)）。
//是否移动
@property (nonatomic,assign) BOOL isMoved;
//移动结束时
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
if (!self.isMoved) {
//如果没有移动，则调用父类方法，触发button的点击事件
[super touchesEnded:touches withEvent:event];
}
self.isMoved = NO;
//回到一定范围
// CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
// CGFloat x = self.frame.size.width * 0.5f;
//
// [UIView animateWithDuration:0.25f animations:^{
// CGPoint center = self.center;
// center.x = self.center.x > screenWidth * 0.5f ? screenWidth - x : x;
// self.center = center;
// }];
//关闭高亮状态
[self setHighlighted:NO];
}
中间注释掉的实现的是button自动滚到屏幕边沿的功能（如阿里旺旺的悬浮球），靠近屏幕哪边就会自动滚到屏幕那边，不会影响用户屏幕中央的操作。
注意关闭按钮高亮，否则点击后会很难看，影响用户体验。
这一期就到这里了，亲们有什么意见和问题记得及时反馈哦，喜欢的话点个关注给个赞(づ￣3￣)づ╭❤～
我们下期再会
