iOS开发：仿支付宝界面拖拽按钮动画

两种方式实现模仿支付宝生活界面可拖拽定制方块button的动画效果，当长按方块，可以拖拽方块到新的位置，其他的方块自动移动布局，也可以添加、删除方块。

预览

思路

• 两种动画效果：一种是移动方块时与响铃方块交换位置，另一种是记录索引，方块到达新位置时其他方块依次迁移
• 用到了ios框架的手势识别
• 维持方块内部数据索引与界面布局一致

定义一个方块button类

////  TileView.h//  DragTiles////  Created by yxhe on 16/5/26.//  Copyright © 2016年 yxhe. All rights reserved.//#import <UIKit/UIKit.h>@class TileButton;@protocol TileButtonDelegate<NSObject>@optional- (void)tileButtonClicked:(TileButton *)tileBtn;@end@interface TileButton : UIButton@property (nonatomic, assign) id<TileButtonDelegate> delegate;@property (nonatomic, assign) NSInteger index; //index in the tile array- (void)setTileText:(NSString *)text clickText:(NSString *)clickText; //set the tile text outside the class- (void)tileLongPressed; //tile longpressed and begin to move, called outside- (void)tileSuspended; //the tile touched pressed but not moved, called outside- (void)tileSettled; //cancel press or settle the tile to new place, called outside@end

////  TileView.m//  DragTiles////  Created by yxhe on 16/5/26.//  Copyright © 2016年 yxhe. All rights reserved.//#import "TileButton.h"@interface TileButton ()@property (nonatomic, strong) UIButton *deleteButton; //the little del button@end@implementation TileButton- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if(self)    {        //set the main button style，in the tile button we can add many things        self.backgroundColor = [UIColor yellowColor];        [self setTitleColor:[UIColor redColor] forState:UIControlStateNormal];//        [self setTitleColor:[UIColor greenColor] forState:UIControlEventTouchDown];                //add the delete button        _deleteButton = [UIButton buttonWithType:UIButtonTypeCustom];                _deleteButton.frame = CGRectMake(self.bounds.size.width*6/7.0, 0, self.frame.size.width/7.0, self.frame.size.height/7.0); //use the relative coordinates        _deleteButton.backgroundColor = [UIColor redColor];        _deleteButton.transform = CGAffineTransformMakeScale(0.1, 0.1); //set the deletebutton small at the beginning        _deleteButton.hidden = YES; //hide it at the beginning        [_deleteButton addTarget:self action:@selector(deleteButtonClicked) forControlEvents:UIControlEventTouchUpInside];        [self addSubview:_deleteButton];            }        return self;}#pragma mark - called outside- (void)setTileText:(NSString *)text clickText:(NSString *)clickText{    [self setTitle:text forState:UIControlStateNormal];//    [self setTitle:clickText forState:UIControlEventTouchDown];    }- (void)tileLongPressed{    //make the tile half transparent and show the deletebutton    [_deleteButton setHidden:NO]; //show the deletebutton    [UIView animateWithDuration:0.3 animations:^{        self.alpha = 0.6;        self.transform = CGAffineTransformMakeScale(1.1, 1.1);        _deleteButton.transform = CGAffineTransformMakeScale(1.0, 1.0);    }];    }- (void)tileSuspended{    [_deleteButton setHidden:NO];    [UIView animateWithDuration:0.3 animations:^{        self.alpha = 0.6;        self.transform = CGAffineTransformMakeScale(1.0, 1.0);        _deleteButton.transform = CGAffineTransformMakeScale(1.0, 1.0);    }];}- (void)tileSettled{    [UIView animateWithDuration:0.3 animations:^{        self.alpha = 1.0;        self.transform = CGAffineTransformMakeScale(1.0, 1.0);        _deleteButton.transform = CGAffineTransformMakeScale(0.1, 0.1);    }];    [self performSelector:@selector(delayHide) withObject:nil afterDelay:0.3];}- (void)delayHide{    [_deleteButton setHidden:YES]; //the main button removed then the deletebutton automatically removed}#pragma button callback- (void)deleteButtonClicked{    NSLog(@"delete button clicked");    if([self.delegate respondsToSelector:@selector(tileButtonClicked:)])        [self.delegate tileButtonClicked:self];    }@end

在这个button类里面封装一些内容，比如处理手势长按和取消的函数，响应删除的委托事件回调（其实也可以用发送消息来做），还有button被长按后悬浮的放大透明动画，以及delete按钮缩放的动画。

主界面里面对手势的处理

- (void)onLongGresture:(UILongPressGestureRecognizer *)sender{#ifndef ALIPAY_ANIMATION    [self handleFreeMove:sender];#else    [self handleSequenceMove:sender];#endif}

动画一

//method 1: exchange the adjacent tiles, the sequence of the array elements will be disorderd- (void)handleFreeMove:(UILongPressGestureRecognizer *)sender{    TileButton *tile_btn = sender.view; //get the dragged tilebutton    switch(sender.state)    {        case UIGestureRecognizerStateBegan:            startPos = [sender locationInView:sender.view];            originPos = tile_btn.center;            [tile_btn tileSuspended];            touchState = SUSPEND;            preTouchID = tile_btn.index; //save the ID of pretouched title            break;        case UIGestureRecognizerStateChanged:        {            [tile_btn tileLongPressed];            touchState = MOVE; //the tile will move            CGPoint newPoint = [sender locationInView:sender.view];            CGFloat offsetX = newPoint.x - startPos.x;            CGFloat offsetY = newPoint.y - startPos.y;                        tile_btn.center = CGPointMake(tile_btn.center.x + offsetX, tile_btn.center.y + offsetY);                        //get the intersect tile ID            int intersectID = -1;            for(NSInteger i = 0; i < _tileArray.count; i++)                if(tile_btn != _tileArray[i] && CGRectContainsPoint([_tileArray[i] frame], tile_btn.center))                {                    intersectID = i;                    break;                }                        if(intersectID != -1)            {                //swap every tile, the index remains unchanged                __block TileButton *collisionButton = _tileArray[intersectID];                __block CGPoint tempOriginPos = collisionButton.center; //the new origin point                [UIView animateWithDuration:0.3 animations:^{                                        collisionButton.center = originPos; //move the other title to the moved tile's origin pos                    originPos = tempOriginPos; //save the temp origin point in case the block shake                                    }];                                //exchange the tile index of the array                [_tileArray exchangeObjectAtIndex:tile_btn.index withObjectAtIndex:intersectID];                                //tile_btn still point to the moving tile, just swap the index                int tempID = collisionButton.index;                collisionButton.index = tile_btn.index;                tile_btn.index = tempID;            }                    }            break;        case UIGestureRecognizerStateEnded:        {            //   [tile_btn tileSuspended];            [UIView animateWithDuration:0.3 animations:^{                tile_btn.center = originPos;            }];            if(touchState == MOVE) //only if the pre state is MOVE, then settle, otherwise leave it suspend            {                touchState = UNTOUCHED;                [tile_btn tileSettled]; //settle the tile to the new position(no need to use delay operation here)            }        }                        break;        default:            break;    }}

定义一个状态枚举，当长按手势处于不同的状态时进行状态转换，基本原理是，拖动方块过程中不断记录坐标位置，实现相邻方块交换位置。

动画二

//method 2: move the tiles inorder like Alipay, the order in array remains in sequence always- (void)handleSequenceMove:(UILongPressGestureRecognizer *)sender{    TileButton *tile_btn = sender.view; //get the dragged tilebutton    switch(sender.state)    {        case UIGestureRecognizerStateBegan:            startPos = [sender locationInView:sender.view];            originPos = tile_btn.center;            [tile_btn tileSuspended];            touchState = SUSPEND;            preTouchID = tile_btn.index; //save the ID of pretouched title            break;        case UIGestureRecognizerStateChanged:        {            [tile_btn tileLongPressed];            touchState = MOVE; //the tile will move            CGPoint newPoint = [sender locationInView:sender.view];            CGFloat offsetX = newPoint.x - startPos.x;            CGFloat offsetY = newPoint.y - startPos.y;                        tile_btn.center = CGPointMake(tile_btn.center.x + offsetX, tile_btn.center.y + offsetY);                        //get the intersect tile ID            int intersectID = -1;            for(NSInteger i = 0; i < _tileArray.count; i++)                if(tile_btn != _tileArray[i] && CGRectContainsPoint([_tileArray[i] frame], tile_btn.center))                {                    intersectID = i;                    break;                }                        if(intersectID != -1)            {                if(abs(intersectID - tile_btn.index) == 1) //if the tiles are adjacent then move directly                {                    __block TileButton *collisionButton = _tileArray[intersectID];                    __block CGPoint tempOriginPos = collisionButton.center; //the new origin point                    [UIView animateWithDuration:0.3 animations:^{                                                collisionButton.center = originPos; //move the other title to the moved tile's origin pos                        originPos = tempOriginPos; //save the temp origin point in case the block shake                                            }];                                        //exchange the tile index of the array                    [_tileArray exchangeObjectAtIndex:tile_btn.index withObjectAtIndex:intersectID];                                        //tile_btn still point to the moving tile, just swap the index                    int tempID = collisionButton.index;                    collisionButton.index = tile_btn.index;                    tile_btn.index = tempID;                                                            NSLog(@"tilebtn index:%d, intersect index:%d", [_tileArray[tile_btn.index] index], [_tileArray[collisionButton.index] index]);                                    }                else if(intersectID - tile_btn.index >1) //move the tiles to the left in order                {                    CGPoint preCenter = originPos;                    CGPoint curCenter;                    //exchange the pointer in array and swap the index,at last the tile_btn is at the new right place                    for(int i = tile_btn.index + 1; i <= intersectID; i++)                    {                        __block TileButton *movedTileBtn = _tileArray[i];                        curCenter = movedTileBtn.center;                                                [UIView animateWithDuration:0.3 animations:^{                            movedTileBtn.center = preCenter;                        }];                        preCenter = curCenter; //save the precenter                                                movedTileBtn.index--; //reduce the tile index                        _tileArray[i-1] = movedTileBtn; //move the pointer one by one                                                                    }                    originPos = preCenter;                    tile_btn.index = intersectID; //exchange the ID                    _tileArray[intersectID] = tile_btn; //now make the last pointer point to the tile_btn                    NSLog(@"new tile btn index: %d", [_tileArray[tile_btn.index] index]);                }                else //move the tile to right in order                {                    CGPoint preCenter = originPos;                    CGPoint curCenter;                    //exchange the pointer in array and swap the index,at last the tile_btn is at the new right place                    for(int i = tile_btn.index - 1; i >= intersectID; i--)                    {                        __block TileButton *movedTileBtn = _tileArray[i];                        curCenter = movedTileBtn.center;                                                [UIView animateWithDuration:0.3 animations:^{                            movedTileBtn.center = preCenter;                        }];                        preCenter = curCenter; //save the precenter                                                movedTileBtn.index++; //reduce the tile index                        _tileArray[i+1] = movedTileBtn; //move the pointer one by one                                            }                    originPos = preCenter;                    tile_btn.index = intersectID; //exchange the ID                    _tileArray[intersectID] = tile_btn; //now make the last pointer point to the tile_btn                    NSLog(@"new tile btn index: %d", [_tileArray[tile_btn.index] index]);                }                                                //test the display if the array is inorder                for(TileButton *tile in _tileArray)                    NSLog(@"tile text: %@", tile.titleLabel.text);                            }                    }            break;        case UIGestureRecognizerStateEnded:        {            //   [tile_btn tileSuspended];            [UIView animateWithDuration:0.3 animations:^{                tile_btn.center = originPos;            }];            if(touchState == MOVE) //only if the pre state is MOVE, then settle, otherwise leave it suspend                [tile_btn tileSettled]; //settle the tile to the new position(no need to use delay operation here)        }                        break;        default:            break;    }}

这种动画的区别在于，方块移动到新的位置，别的方块自动依次按顺序补齐之前的空位置，基本原理是，保存方块索引，以及起始位置和终止位置，方块按顺序移动。

删除动画

//tile delete button clicked- (void)tileButtonClicked:(TileButton *)tileBtn{    //remove the button and adjust the tilearray        NSLog(@"deletebutton delegate responds");        //remember the deleted tile's infomation    int startIndex = tileBtn.index;    CGPoint preCenter = tileBtn.center;    CGPoint curCenter;        //[_tileArray removeObject:tileBtn]; //delete the tile    //exchange the pointer in array and swap the index,at last the tile_btn is at the new right place    for(int i = startIndex + 1; i < _tileArray.count; i++)    {        __block TileButton *movedTileBtn = _tileArray[i];        curCenter = movedTileBtn.center;                [UIView animateWithDuration:0.3 animations:^{            movedTileBtn.center = preCenter;        }];        preCenter = curCenter; //save the precenter                movedTileBtn.index--; //reduce the tile index        _tileArray[i-1] = movedTileBtn; //move the pointer one by one            }        [_tileArray removeLastObject]; //every time remove the last object        //must remove the tileBtn from the view    [tileBtn removeFromSuperview]; //we can also use performselector so that button disappears with animation    //test the display if the array is inorder    for(TileButton *tile in _tileArray)        NSLog(@"tile text: %@", tile.titleLabel.text);}

当删除某个方块时，后面的方块也会自动补齐，有个动画效果。

源代码下载

csdn：仿支付宝拖拽方块

github：DragTiles