建设网站 (公司),学做网站要代码,wordpress 主题增加筛选,聊城网站制作工作室苹果的应用讲究用户体验 有的时候仔细想想 的确#xff0c;很多细节决定了用户体验 比如说惯性拖动 可以说之前没有任何一家厂商能把触摸惯性拖动做的像苹果的UI那么流畅 Cocos2D中实现能够惯性拖动的选择界面 完成的效果#xff1a; 制作一个简单的图层#xff0c;通过传入…苹果的应用讲究用户体验 有的时候仔细想想 的确很多细节决定了用户体验 比如说惯性拖动 可以说之前没有任何一家厂商能把触摸惯性拖动做的像苹果的UI那么流畅   Cocos2D中实现能够惯性拖动的选择界面 完成的效果 制作一个简单的图层通过传入许多的节点图层自动将节点排版并能够通过物理拖拽来选择其中的某一个节点并通知节点的代理来处理   首先新建一个cocos2d项目我用的版本是2.0,命名为SimplePhysicsDragSelectorTest 新建一个objective-c class我这里命名为SZSimplePhysicsDragSelector 在SimplePhysicsDragSelector.h文件里添加以下代码   #import cocos2d.hclass SZSimplePhysicsDragSelector; protocol SZSimplePhysicsDragSelectorDelegate NSObject optional // call when the selected icon changes -(void)onSelectedIconChanged:(SZSimplePhysicsDragSelector*)selector; endinterface 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;//合外力idSZSimplePhysicsDragSelectorDelegate s_delegate;//代理 }property (nonatomic, readonly) NSMutableArray *Icons; property (nonatomic, readonly) CCNode *SelectedIcon; property (nonatomic, assign) idSZSimplePhysicsDragSelectorDelegate Delegate;- (id)initWithIcons:(NSArray*)icons;end       这里声明了SZSimplePhysicsDragSelector需要使用到的变量和方法同时声明了SZSimplePhysicsDragSelector代理的方法 变量的作用如注释里描述的后面将会详细说到 解释下代理方法 -(void)onSelectedIconChanged:(SZSimplePhysicsDragSelector*)selector;  在图层选择的节点发生改变时将会发送此消息给代理如果改变为没有选择节点也会发送此消息   初始化 在SZSimplePhysicsDragSelector.m文件中添加以下代码 implementation SZSimplePhysicsDragSelectorsynthesize 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) * 180i为节点个数当需要选择右边的节点时实际上是将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// 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方法中我们已经启用了计时器所以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/(1distance);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/(1distance);} }   测试 好了代码完成了接下来测试一下效果 把HelloWorldLayer的初始化方法替换为以下代码 // create and initialize a LabelCCLabelTTF *label [CCLabelTTF labelWithString:Sawyers 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:Icon2x.png]];i--;}SZSimplePhysicsDragSelector *selector [[[SZSimplePhysicsDragSelector alloc] initWithIcons:icons] autorelease];selector.position self.anchorPointInPoints; selector.Delegate self;[self addChild:selector]; 运行ios模拟器你应该看到以下效果   还算满意希望大家能够用到各位的游戏中   测试代码 测试代码可以在以下链接下载 SimplePhysicsDragSelectorTest.zip  转载于:https://www.cnblogs.com/sawyerzhu/archive/2012/08/13/2636275.html