蘋果的應(yīng)用講究用戶體驗(yàn)

有的時(shí)候仔細(xì)想想

的確，很多細(xì)節(jié)決定了用戶體驗(yàn)

比如說慣性拖動(dòng)

可以說之前沒有任何一家廠商能把觸摸慣性拖動(dòng)做的像蘋果的UI那么流暢

?

Cocos2D中實(shí)現(xiàn)能夠慣性拖動(dòng)的選擇界面

完成的效果：

制作一個(gè)簡單的圖層，通過傳入許多的節(jié)點(diǎn)，圖層自動(dòng)將節(jié)點(diǎn)排版，并能夠通過物理拖拽來選擇其中的某一個(gè)節(jié)點(diǎn)，并通知節(jié)點(diǎn)的代理來處理

?

首先新建一個(gè)cocos2d項(xiàng)目，我用的版本是2.0,命名為SimplePhysicsDragSelectorTest

新建一個(gè)objective-c class，我這里命名為SZSimplePhysicsDragSelector

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

?

#import "cocos2d.h"@class SZSimplePhysicsDragSelector; @protocol SZSimplePhysicsDragSelectorDelegate <NSObject> @optional // call when the selected icon changes -(void)onSelectedIconChanged:(SZSimplePhysicsDragSelector*)selector; @end@interface SZSimplePhysicsDragSelector : CCLayer {CCNode *s_content;//所有節(jié)點(diǎn)圖標(biāo)的父節(jié)點(diǎn)NSMutableArray *s_icons;//節(jié)點(diǎn)圖標(biāo)清單CCNode *s_selectedIcon;//選定的節(jié)點(diǎn) BOOL isDragging;//是否在拖拽狀態(tài)CGPoint lastTouchPoint;//上一個(gè)觸摸點(diǎn)float lastx;//上一個(gè)圖層內(nèi)容x坐標(biāo)float xvel;//內(nèi)容在x軸上的速度int maxX;//內(nèi)容可以自然移動(dòng)到的最大極限x坐標(biāo)int minX;//內(nèi)容可以自然移動(dòng)到的最小極限x坐標(biāo)float acceleration;//加速度float f;//合外力id<SZSimplePhysicsDragSelectorDelegate> s_delegate;//代理 }@property (nonatomic, readonly) NSMutableArray *Icons; @property (nonatomic, readonly) CCNode *SelectedIcon; @property (nonatomic, assign) id<SZSimplePhysicsDragSelectorDelegate> Delegate;- (id)initWithIcons:(NSArray*)icons;@end

?

?

?

這里聲明了SZSimplePhysicsDragSelector需要使用到的變量和方法，同時(shí)聲明了SZSimplePhysicsDragSelector代理的方法

變量的作用如注釋里描述的，后面將會(huì)詳細(xì)說到

解釋下代理方法：

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

?在圖層選擇的節(jié)點(diǎn)發(fā)生改變時(shí)將會(huì)發(fā)送此消息給代理，如果改變?yōu)闆]有選擇節(jié)點(diǎn)也會(huì)發(fā)送此消息

?

初始化

在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];//開啟計(jì)時(shí)器 }-(void) onExit {[self unscheduleUpdate];//關(guān)閉計(jì)時(shí)器 [self removeChild:s_content cleanup:YES];[s_content release];s_content = nil;s_selectedIcon = nil;[super onExit]; }@end

?

以上代碼實(shí)現(xiàn)了初始化&內(nèi)存釋放以及onEnter和onExist方法

在選擇器被添加到某一個(gè)節(jié)點(diǎn)中時(shí)，將會(huì)自動(dòng)創(chuàng)建一個(gè)內(nèi)容節(jié)點(diǎn)s_content，用來存放所有的節(jié)點(diǎn)，并一起移動(dòng)

?

布局節(jié)點(diǎn)

在onEnter方法中布局視圖,并實(shí)現(xiàn)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作為每兩個(gè)節(jié)點(diǎn)之間的間距，同時(shí)第一個(gè)節(jié)點(diǎn)在s_content中的位置應(yīng)該是(0,0)所以計(jì)算得出位置的公式（間距和初始位置可以根據(jù)需要更改）

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

之后添加節(jié)點(diǎn)到s_content，并且設(shè)置最后一個(gè)為初始選定的節(jié)點(diǎn)，最后通知代理選定節(jié)點(diǎn)發(fā)生更改

關(guān)于極限位置(minX,maxX)是這樣設(shè)定的，前面說到180作為間距，(0,0)為初始節(jié)點(diǎn)位置，所以最后一個(gè)節(jié)點(diǎn)的x坐標(biāo)為(i-1) *?180（i為節(jié)點(diǎn)個(gè)數(shù)），當(dāng)需要選擇右邊的節(jié)點(diǎn)時(shí)實(shí)際上是將s_content的位置向左移動(dòng)，所以選擇到最后一個(gè)節(jié)點(diǎn)時(shí)s_content的位置應(yīng)該是－(i-1) *?180，同理第一個(gè)選擇到第一個(gè)節(jié)點(diǎn)時(shí)s_content的位置應(yīng)該是(0,0)，此外我希望極限位置能夠比頭尾節(jié)點(diǎn)位置的范圍稍大，所以最終我設(shè)定

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

maxX = 100;

?

觸摸記錄?

布局完成，接下來我們需要實(shí)現(xiàn)觸摸事件消息來記錄數(shù)據(jù)供模擬物理使用

在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個(gè)觸摸事件

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
在方法中我們清空了選擇的節(jié)點(diǎn)并通知代理選擇的節(jié)點(diǎn)改變，標(biāo)記自身狀態(tài)為拖拽中

- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
在方法中根據(jù)此刻觸摸點(diǎn)與上一次觸摸點(diǎn)的位置差，來移動(dòng)s_content的位置，從而使內(nèi)容跟隨觸摸移動(dòng)，最后在記錄下此刻的位置為上一次觸摸位置，供下一次計(jì)算使用

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

標(biāo)記自身狀態(tài)為未拖拽

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

標(biāo)記自身狀態(tài)為未拖拽

這樣我們已經(jīng)能夠辨別自身是否在拖拽狀態(tài)以及正確拖拽內(nèi)容

?

模擬物理計(jì)算

首先說明一下思路：

我們?cè)趗dpate方法中我們需要檢測(cè)圖層的狀態(tài)：

若圖層在被拖拽狀態(tài)，則不需要模擬物理，只需要計(jì)算出用戶觸摸拖拽內(nèi)容在x軸上的速度

若圖層在未拖拽狀態(tài)，則根據(jù)已經(jīng)記錄下的x軸移動(dòng)速度，和通過受力計(jì)算出的加速度，改變x軸移動(dòng)速度，最后在根據(jù)計(jì)算出的移動(dòng)速度來計(jì)算實(shí)際位移

?

在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// frictionF1 = - xvel * 0.1;//F2// prevent icons out of rangeif ( pos.x < minX ){F2 = (minX - pos.x);}else if ( pos.x > maxX ){F2 = (maxX - pos.x);}//F3// suck planetif (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;}//CALCULATEf = 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方法中，我們已經(jīng)啟用了計(jì)時(shí)器，所以u(píng)dpate方法將會(huì)在每個(gè)最小時(shí)間間隔被調(diào)用?

其他就如同剛才整理的那樣，沒什么問題，主要使這個(gè)受力問題，這個(gè)受力是我經(jīng)過了好多數(shù)值的嘗試后，得出的比較能符合要求的效果

內(nèi)容受到的力分為

F1阻力：方向與內(nèi)容移動(dòng)速度方向相反，大小與移動(dòng)速度快慢呈正比

F1 = - xvel * 0.1;

F2超出邊界的額外受力：方向與超出邊界的方向相反，大小與超出邊界的距離呈正比

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

F3將選定節(jié)點(diǎn)吸至屏幕中央的吸力：方向從選定節(jié)點(diǎn)指向屏幕中央，大小與選定節(jié)點(diǎn)到屏幕中央的距離呈正比：

F3 = - distance;

此外有個(gè)細(xì)節(jié)，如果我們不斷的施加吸力，會(huì)出現(xiàn)一種情況：很難將選定的節(jié)點(diǎn)拖拽出去，因?yàn)槲μ罅?#xff0c;所以在代碼中添加了一個(gè)條件

fabsf(xvel) < 100，當(dāng)移動(dòng)速度小于100時(shí)，才產(chǎn)生吸力，這樣你會(huì)發(fā)現(xiàn)拖拽順暢多了，并且也能夠在選定了節(jié)點(diǎn)后短時(shí)間內(nèi)變?yōu)殪o止

?

還有什么？

最后在添加一個(gè)隨著移動(dòng)而變化節(jié)點(diǎn)大小的效果，讓拖拽看起來更加舒服

在原有代碼內(nèi)添加以下內(nèi)容：

-(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);} }

?

測(cè)試

好了，代碼完成了，接下來測(cè)試一下效果

把HelloWorldLayer的初始化方法替換為以下代碼：

// create and initialize a LabelCCLabelTTF *label = [CCLabelTTF labelWithString:@"Sawyer's Test" fontName:@"Marker Felt" fontSize:64];// ask director for the window sizeCGSize size = [[CCDirector sharedDirector] winSize];// position the label on the center of the screenlabel.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 layerNSMutableArray *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];

運(yùn)行ios模擬器，你應(yīng)該看到以下效果：

?

還算滿意，希望大家能夠用到各位的游戲中

?

測(cè)試代碼

測(cè)試代碼可以在以下鏈接下載

SimplePhysicsDragSelectorTest.zip

?

轉(zhuǎn)載于:https://www.cnblogs.com/sawyerzhu/archive/2012/08/13/2636275.html

總結(jié)

以上是生活随笔為你收集整理的在Cocos2d中实现能够惯性拖动的选择界面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。