在Cocos2d中实现能够惯性拖动的选择界面

阅读量：5316 次

发布时间：2019-06-14

本文共 10165 字，大约阅读时间需要 33 分钟。

苹果的应用讲究用户体验

有的时候仔细想想

的确，很多细节决定了用户体验

比如说惯性拖动

可以说之前没有任何一家厂商能把触摸惯性拖动做的像苹果的UI那么流畅

Cocos2D中实现能够惯性拖动的选择界面

完成的效果：

制作一个简单的图层，通过传入许多的节点，图层自动将节点排版，并能够通过物理拖拽来选择其中的某一个节点，并通知节点的代理来处理

首先新建一个cocos2d项目，我用的版本是2.0,命名为SimplePhysicsDragSelectorTest

新建一个objective-c class，我这里命名为SZSimplePhysicsDragSelector

在SimplePhysicsDragSelector.h文件里添加以下代码：

#import "cocos2d.h"@class SZSimplePhysicsDragSelector;@protocol SZSimplePhysicsDragSelectorDelegate 
     
      @optional// call when the selected icon changes-(void)onSelectedIconChanged:(SZSimplePhysicsDragSelector*)selector;@end@interface SZSimplePhysicsDragSelector : CCLayer{    CCNode *s_content;//所有节点图标的父节点    NSMutableArray *s_icons;//节点图标清单    CCNode *s_selectedIcon;//选定的节点        BOOL isDragging;//是否在拖拽状态    CGPoint lastTouchPoint;//上一个触摸点    float lastx;//上一个图层内容x坐标    float xvel;//内容在x轴上的速度    int maxX;//内容可以自然移动到的最大极限x坐标    int minX;//内容可以自然移动到的最小极限x坐标    float acceleration;//加速度    float f;//合外力        id
      
        s_delegate;//代理}@property (nonatomic, readonly) NSMutableArray *Icons;@property (nonatomic, readonly) CCNode *SelectedIcon;@property (nonatomic, assign) id
       
         Delegate;- (id)initWithIcons:(NSArray*)icons;@end

这里声明了SZSimplePhysicsDragSelector需要使用到的变量和方法，同时声明了SZSimplePhysicsDragSelector代理的方法

变量的作用如注释里描述的，后面将会详细说到

解释下代理方法：

-(void)onSelectedIconChanged:(SZSimplePhysicsDragSelector*)selector;

在图层选择的节点发生改变时将会发送此消息给代理，如果改变为没有选择节点也会发送此消息

初始化

在SZSimplePhysicsDragSelector.m文件中添加以下代码：

@implementation SZSimplePhysicsDragSelector@synthesize Delegate = s_delegate;@synthesize Icons = s_icons;@synthesize SelectedIcon = s_selectedIcon;- (id)initWithIcons:(NSArray *)icons{    self = [super init];    if (self) {        s_icons = [[NSMutableArray alloc] initWithArray:icons];        s_content = nil;        s_selectedIcon = nil;                isDragging = NO;        lastTouchPoint = CGPointZero;        lastx = 0.0f;        xvel = 0.0f;        minX = 0;        maxX = 0;        acceleration = 0.0f;        f = 0.0f;                self.isTouchEnabled = true;// 启用接收触摸事件                s_delegate = nil;    }    return self;}- (void)dealloc{    [s_icons release];    [super dealloc];}#pragma mark Override methods-(void) onEnter{    [super onEnter];    s_content = [[CCSprite alloc]init];    [self addChild:s_content];            [self scheduleUpdate];//开启计时器}-(void) onExit{    [self unscheduleUpdate];//关闭计时器    [self removeChild:s_content cleanup:YES];    [s_content release];    s_content = nil;        s_selectedIcon = nil;        [super onExit];}@end

以上代码实现了初始化&内存释放以及onEnter和onExist方法

在选择器被添加到某一个节点中时，将会自动创建一个内容节点s_content，用来存放所有的节点，并一起移动

布局节点

在onEnter方法中布局视图,并实现layout方法-(void) onEnter

-(void) onEnter{    [super onEnter];    s_content = [[CCSprite alloc]init];    [self addChild:s_content];        [self layout];        [self scheduleUpdate];}-(void) layout{    int i = 1;    for (CCNode *icon in s_icons) {        CGPoint position = ccp((i-1) * 180, 0);        float distance = fabsf(icon.position.x)/100;        icon.position = position;        if (![s_content.children containsObject:icon]) {            [s_content addChild:icon];        }        i++;    }    s_selectedIcon = [s_icons lastObject];    if ([s_delegate respondsToSelector:@selector(onSelectedIconChanged:)]) {        [s_delegate onSelectedIconChanged:self];    }        minX = - (i-1) * 180 - 100;    maxX = 100;}

解释下layout方法

将180pt作为每两个节点之间的间距，同时第一个节点在s_content中的位置应该是(0,0)所以计算得出位置的公式（间距和初始位置可以根据需要更改）

position = ccp((i-1) * 180, 0)

之后添加节点到s_content，并且设置最后一个为初始选定的节点，最后通知代理选定节点发生更改

关于极限位置(minX,maxX)是这样设定的，前面说到180作为间距，(0,0)为初始节点位置，所以最后一个节点的x坐标为(i-1) * 180（i为节点个数），当需要选择右边的节点时实际上是将s_content的位置向左移动，所以选择到最后一个节点时s_content的位置应该是－(i-1) * 180，同理第一个选择到第一个节点时s_content的位置应该是(0,0)，此外我希望极限位置能够比头尾节点位置的范围稍大，所以最终我设定

minX = - (i-1) * 180 - 100;

maxX = 100;

触摸记录

布局完成，接下来我们需要实现触摸事件消息来记录数据供模拟物理使用

在SZSimplePhysicsDragSelector.m文件中添加以下代码：

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;{    s_selectedIcon = nil;    if ([s_delegate respondsToSelector:@selector(onSelectedIconChanged:)]) {        [s_delegate onSelectedIconChanged:self];    }    UITouch *touch = [touches anyObject];    CGPoint position = [self convertTouchToNodeSpace:touch];    lastTouchPoint = position;    isDragging = true;}- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;{    UITouch *touch = [touches anyObject];    CGPoint position = [self convertTouchToNodeSpace:touch];    CGPoint translate = ccpSub(position, lastTouchPoint);    translate.y = 0;    s_content.position = ccpAdd(s_content.position, translate);    lastTouchPoint = position;}- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;{    isDragging = false;}- (void)ccTouchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;{    isDragging = false;}

这里分开说下4个触摸事件

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;

在方法中我们清空了选择的节点并通知代理选择的节点改变，标记自身状态为拖拽中

- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;

在方法中根据此刻触摸点与上一次触摸点的位置差，来移动s_content的位置，从而使内容跟随触摸移动，最后在记录下此刻的位置为上一次触摸位置，供下一次计算使用

- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;

标记自身状态为未拖拽

- (void)ccTouchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;

标记自身状态为未拖拽

这样我们已经能够辨别自身是否在拖拽状态以及正确拖拽内容

模拟物理计算

首先说明一下思路：

我们在udpate方法中我们需要检测图层的状态：

若图层在被拖拽状态，则不需要模拟物理，只需要计算出用户触摸拖拽内容在x轴上的速度

若图层在未拖拽状态，则根据已经记录下的x轴移动速度，和通过受力计算出的加速度，改变x轴移动速度，最后在根据计算出的移动速度来计算实际位移

在SZSimplePhysicsDragSelector.m文件中添加以下代码：

-(void) update:(ccTime)dt;{    [self updateMove:dt];}- (void) updateMove:(ccTime)dt{    if ( !isDragging )    {        // *** CHANGE BEHAVIOR HERE *** //        float F1 = 0.0f;        float F2 = 0.0f;        float F3 = 0.0f;        CGPoint pos = s_content.position;                //F1        // friction        F1 = - xvel * 0.1;                //F2        // prevent icons out of range        if ( pos.x < minX )        {            F2 = (minX - pos.x);        }        else if ( pos.x > maxX )        {            F2 = (maxX - pos.x);        }                //F3        // suck planet        if (fabsf(xvel) < 100 && !s_selectedIcon) {            CCNode *nearestIcon = nil;            for (CCNode *icon in s_icons) {                if (nearestIcon) {                    CGPoint pt1 = [icon.parent convertToWorldSpace:icon.position];                    float distance1 = fabsf(pt1.x - [CCDirector sharedDirector].winSize.width/2);                    CGPoint pt2 = [nearestIcon.parent convertToWorldSpace:nearestIcon.position];                    float distance2 = fabsf(pt2.x - [CCDirector sharedDirector].winSize.width/2);                    if (distance1 < distance2) {                        nearestIcon = icon;                    }                }                else {                    nearestIcon = icon;                }            }            if (nearestIcon) {                s_selectedIcon = nearestIcon;                if ([s_delegate respondsToSelector:@selector(onSelectedIconChanged:)]) {                    [s_delegate onSelectedIconChanged:self];                }            }        }                if (s_selectedIcon) {            CGPoint pt = [s_selectedIcon.parent convertToWorldSpace:s_selectedIcon.position];;            float distance = pt.x - [CCDirector sharedDirector].winSize.width/2;            F3 = - distance;        }                //CALCULATE        f = F1 + F2 + F3;        acceleration = f/1;        xvel += acceleration;        pos.x += xvel*dt;                s_content.position = pos;    }    else    {        xvel = ( s_content.position.x - lastx ) / dt;        lastx = s_content.position.x;    }}

在onEnter方法中，我们已经启用了计时器，所以udpate方法将会在每个最小时间间隔被调用

其他就如同刚才整理的那样，没什么问题，主要使这个受力问题，这个受力是我经过了好多数值的尝试后，得出的比较能符合要求的效果

内容受到的力分为

F1阻力：方向与内容移动速度方向相反，大小与移动速度快慢呈正比

F1 = - xvel * 0.1;

F2超出边界的额外受力：方向与超出边界的方向相反，大小与超出边界的距离呈正比

F2 = (minX - pos.x);或者F2 = (maxX - pos.x);

F3将选定节点吸至屏幕中央的吸力：方向从选定节点指向屏幕中央，大小与选定节点到屏幕中央的距离呈正比：

F3 = - distance;

此外有个细节，如果我们不断的施加吸力，会出现一种情况：很难将选定的节点拖拽出去，因为吸力太大了，所以在代码中添加了一个条件

fabsf(xvel) < 100，当移动速度小于100时，才产生吸力，这样你会发现拖拽顺畅多了，并且也能够在选定了节点后短时间内变为静止

还有什么？

最后在添加一个随着移动而变化节点大小的效果，让拖拽看起来更加舒服

在原有代码内添加以下内容：

-(void) layout{    int i = 1;    for (CCNode *icon in s_icons) {        CGPoint position = ccp((i-1) * 180, 0);        float distance = fabsf(icon.position.x)/100;        float scale = 1/(1+distance);        icon.position = position;        icon.scale = scale;//初始化缩放比例        if (![s_content.children containsObject:icon]) {            [s_content addChild:icon];        }        i++;    }    s_selectedIcon = [s_icons lastObject];    if ([s_delegate respondsToSelector:@selector(onSelectedIconChanged:)]) {        [s_delegate onSelectedIconChanged:self];    }        minX = - (i-1) * 180 - 100;    maxX = 100;}-(void) update:(ccTime)dt;{    [self updateMove:dt];    [self updateScale:dt];//更新缩放比例 }-(void) updateScale:(ccTime)dt;{    for (CCNode *icon in s_icons) {        CGPoint pt = [self convertToNodeSpace:[icon.parent convertToWorldSpace:icon.position]];        float distance = fabsf(pt.x)/100;        icon.scale = 1/(1+distance);    }}

测试

好了，代码完成了，接下来测试一下效果

把HelloWorldLayer的初始化方法替换为以下代码：

// create and initialize a Label        CCLabelTTF *label = [CCLabelTTF labelWithString:@"Sawyer's Test" fontName:@"Marker Felt" fontSize:64];        // ask director for the window size        CGSize size = [[CCDirector sharedDirector] winSize];            // position the label on the center of the screen        label.position =  ccp( size.width /2 , size.height/2 );                // add the label as a child to this Layer        [self addChild: label];                // add the test selector to the layer        NSMutableArray *icons = [NSMutableArray array];        int i = 10;        while (i) {            [icons addObject:[CCSprite spriteWithFile:@"Icon@2x.png"]];            i--;        }                SZSimplePhysicsDragSelector *selector = [[[SZSimplePhysicsDragSelector alloc] initWithIcons:icons] autorelease];        selector.position = self.anchorPointInPoints;         selector.Delegate = self;        [self addChild:selector];

运行ios模拟器，你应该看到以下效果：