iOS黑科技【动画特效篇-4】 浮动按钮--MovableButton

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￣)づ╭❤～
我们下期再会