iOS滚珠菜单动效
来源：互联网 发布：常用网络协议端口号 编辑：程序博客网 时间：2024/06/02 19:02
原文地址：http://blog.csdn.net/xiongbaoxr/article/details/51818265
代码实现效果 gitHub地址：https://github.com/BearRan/FlowMenuAnimation
原图效果
http://www.tuyiyi.com/v/46575.html
前言：
注意！由于collisionBoundsType是iOS9.0之后才有的，所以运行本demo时一定要是9.0之后的系统，不然会出现异常。而且屏幕适配暂时没调，所以iPhone6S运行最佳。
本来一味着想用CAAnimation来实现，却发现CABasicAnimation和CAKeyFrameAnimation完全不够用。有一位网友提醒我用有物理效果的UIDynamic这个试试，但是之前没有接触过这一块，也就只能现学现卖了。本章只说明滚珠的难点和动效实现，其他部分的动效就简单的带过了。关于UIDynamic如何使用本文也不做讲解，文章结尾会放置一些比较好的链接。难点：
- 滚珠路径如何绘制
- 滚珠动画该分解成几个步骤
- 如何分解滚珠的物理效果
难点解析：
1.滚珠路径如何绘制
使用BezierPath是毋庸置疑的，但是如何勾勒出来呢？用代码一点一点地调太费时间了。建议使用Sketch和CodePaint共同完成。
dmg资源：http://blog.csdn.net/xiongbaoxr/article/details/50989283
如何使用可以参考这篇博客：http://blog.csdn.net/xiongbaoxr/article/details/50890565
Sketch：可以方便地勾勒出路径，并且生成SVG文件。
CodePaint：可以将SVG的路径文件转换成代码
大致步骤如下：
把效果图截取一张，拖到Sketch做背景
新建图层，使用钢笔工具临摹背景图勾勒出路径
注意：勾勒时可以选择非镜像的控制点，这样方便调整曲线
接着点击Sketch右下角的倒出按钮，格式选为SVG格式
将生成的SVG文件拖入到codePaint中，拖入成功后会直接看到如下界面
看到代码路径后可以整段copy出来，当然，我建议把所有的点抽离出来，方便做适配
代码绘制凹槽动画
demo的AppDelegate.h中有以下这些开关，可以自己调配，方便观察
单个滚珠动效演示，这样看应该比较容易理解。其实我是盖了一个新的图层专门用来做滚珠动效的。
控制点就是用普通的UIAniamtion实现的，在动画之行的过程中，通过CADisplayLink实时观察Point的PresentLayer的position来不停的重绘贝塞尔曲线。
2.滚珠动画该分解成几个步骤
主要分为以下步骤
阶段一：滚珠一起滚落下来时到最高点的阶段；
阶段二：滚珠滚落到最高点后回流的的阶段；
阶段三：滚珠消失阶段；
3.如何分解滚珠的物理效果
UIDynamic有以下物理效果
- UIGravityBehavior：重力行为
- UICollisionBehavior：碰撞行为
- UISnapBehavior：捕捉行为
- UIPushBehavior：推动行为
- UIAttachmentBehavior：附着行为
- UIDynamicItemBehavior：动力元素行为
UIGravityBehavior：重力行为
不再解释
<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#pragma mark 重力行为</span>- (UIGravityBehavior *)addGravityBehavior:(<span class="hljs-property" style="box-sizing: border-box;">id</span> <UIDynamicItem>)<span class="hljs-property" style="box-sizing: border-box;">item</span>{ UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] init]; [gravityBehavior addItem:<span class="hljs-property" style="box-sizing: border-box;">item</span>]; [_animator addBehavior:gravityBehavior];<span class="hljs-command" style="box-sizing: border-box;"> return</span> gravityBehavior;}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>UICollisionBehavior：碰撞行为
适用于：UIView和父类view的边界碰撞，以及和其他UIView碰撞
这里可以配合重力行为来设定小球的运动路径
<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#pragma mark 碰撞行为</span>- (UICollisionBehavior *)addCollisionBehavior:(<span class="hljs-property" style="box-sizing: border-box;">id</span> <UIDynamicItem>)<span class="hljs-property" style="box-sizing: border-box;">item</span>{ UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc] init]; [collisionBehavior addItem:<span class="hljs-property" style="box-sizing: border-box;">item</span>]; [collisionBehavior addBoundaryWithIdentifier:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"path"</span> forPath:_beizerPath]; [_animator addBehavior:collisionBehavior];<span class="hljs-command" style="box-sizing: border-box;"> return</span> collisionBehavior;}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>UISnapBehavior：捕捉行为
顾名思义，不解释
UIPushBehavior：推动行为
使用瞬间或持续的力并按照某一方向作用于某个UIView
用于开始或结束时的小球推动
<code class="hljs perl has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#pragma mark 显现动画，第一个球向右的推力</span>- (UIPushBehavior <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">*)</span>addPushBehavior_inFirstBtn{ UIButton <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">*tempBtn</span> = _btnArray[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]; UIPushBehavior <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">*pushBehavior</span> = [[UIPushBehavior alloc] initWithItems:<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@[</span>tempBtn] mode:UIPushBehaviorModeInstantaneous]; pushBehavior.pushDirection = CGVectorMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>); pushBehavior.magnitude = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.6</span>; [_animator addBehavior:pushBehavior]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> pushBehavior;}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>UIAttachmentBehavior：附着行为
UIView和某个UIView的相互吸附行为
此处用于小球见的相互吸附作用
<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#pragma mark 添加球与球之间的附着行为</span>- (UIAttachmentBehavior *)addAttachmentBehavior_item:(<span class="hljs-property" style="box-sizing: border-box;">id</span> <UIDynamicItem>)<span class="hljs-property" style="box-sizing: border-box;">item</span> attachToItem:(<span class="hljs-property" style="box-sizing: border-box;">id</span> <UIDynamicItem>)attachToItem{ SpecialBtn *tempBtn = (SpecialBtn *)<span class="hljs-property" style="box-sizing: border-box;">item</span>; UIAttachmentBehavior *attachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem:<span class="hljs-property" style="box-sizing: border-box;">item</span> attachedToItem:attachToItem]; [attachmentBehavior setLength:tempBtn.width + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>]; [attachmentBehavior setDamping:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.01</span>]; [attachmentBehavior setFrequency:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>]; [_animator addBehavior:attachmentBehavior];<span class="hljs-command" style="box-sizing: border-box;"> return</span> attachmentBehavior;}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>UIDynamicItemBehavior：动力元素行为
一些其他的物理元素，比如摩擦力，线速度阻力，角速度阻力等
<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">#pragma mark 动力元素行为- (UIDynamicItemBehavior *)addDynamicItemBehavior:(id <UIDynamicItem>)item{ UIDynamicItemBehavior *itemBehavior = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">[[UIDynamicItemBehavior alloc] initWithItems:@[item]]</span>; itemBehavior.resistance = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; itemBehavior.allowsRotation = YES; itemBehavior.angularResistance = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4.0</span>; itemBehavior.friction = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.8</span>; [_animator addBehavior:itemBehavior]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> itemBehavior;}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>阶段一：滚珠一起滚落下来时到最高点的阶段
球与球之间的附着行为 + 重力行为＋碰撞行为+ 动力元素行为+ 第一个球向右的推力
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma mark 显现动画</span>- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)showBtnsAnimation{ _animatorStatus = kAnimatorStatus_open; [_animator removeAllBehaviors]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (showPath) { _pathLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.path</span> = _beizerPath<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGPath</span>; _pathLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.fillColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> clearColor]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGColor</span>; _pathLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.strokeColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> orangeColor]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGColor</span>; _pathLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.lineWidth</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>; [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.layer</span> addSublayer:_pathLayer]; } <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> btn_gap = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> setXX:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; i < [_btnArray count]; i++) { SpecialBtn *tempBtn = _btnArray[i]; tempBtn<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.tag</span> = i; [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addSubview:tempBtn]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设定初始位置</span> [tempBtn setX:(tempBtn<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.width</span> + btn_gap) * ([_btnArray count] - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> - i) + btn_gap]; [tempBtn setY:-tempBtn<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.height</span>]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 添加球与球之间的附着行为</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (i > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) { [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addAttachmentBehavior_item:_btnArray[i] attachToItem:_btnArray[i - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>]]; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 重力行为</span> UIGravityBehavior *gravityBehavior = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addGravityBehavior:tempBtn]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (i == [_btnArray count] - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 最后一个球处理重力行为</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> dealLastBtnGravityBehavior:gravityBehavior tempBtn:tempBtn]; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 碰撞行为</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addCollisionBehavior:tempBtn]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 动力元素行为</span> UIDynamicItemBehavior *itemBehavior = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addDynamicItemBehavior:tempBtn]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (i == [_btnArray count] - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 最后一个球增加密度,以防止出现的时候，由于惯性的原因导致飞起来</span> itemBehavior<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.density</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.8</span>; } } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 第一个球向右的推力</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addPushBehavior_inFirstBtn];}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li></ul>阶段二：滚珠滚落到最高点后回流的的阶段
球与球之间的附着行为 + 重力行为＋碰撞行为+ 动力元素行为+ 最后一个球向左push
<code class="hljs rust has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; i < [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">_</span>btnArray count]; i++) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 添加球与球之间的附着行为</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (i > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) { UIAttachmentBehavior *attachmentBehavior = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addAttachmentBehavior_item:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">_</span>btnArray[i] attachToItem:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">_</span>btnArray[i - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>]]; [attachmentBehavior setFrequency:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>]; [attachmentBehavior setLength:tempBtn.width + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>]; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 重力行为</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addGravityBehavior:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">_</span>btnArray[i]]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 碰撞行为</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addCollisionBehavior:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">_</span>btnArray[i]]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 动力元素行为</span> UIDynamicItemBehavior *itemBehavior = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addDynamicItemBehavior:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">_</span>btnArray[i]]; itemBehavior.angularResistance = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15.0</span>; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 最后一个球向左push</span> UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[tempBtn] mode:UIPushBehaviorModeContinuous]; pushBehavior.pushDirection = CGVectorMake(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>); pushBehavior.magnitude = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.3</span>; [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">_</span>animator addBehavior:pushBehavior];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>阶段三：滚珠消失阶段
球与球之间的附着行为 + 重力行为＋碰撞行为+ 动力元素行为+ 最后一个球向左push（和阶段二几本一致，只是推动的力大了一些）
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma mark 消退动画</span>- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)closeBtnsAniamtion{ <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSLog</span>(@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"-- closeBtnsAniamtion"</span>); _animatorStatus = kAnimatorStatus_close; SpecialBtn *lastBtn = (SpecialBtn *)[_btnArray lastObject]; [_animator removeAllBehaviors]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; i < [_btnArray count]; i++) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 添加球与球之间的附着行为</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (i > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) { UIAttachmentBehavior *attachmentBehavior = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addAttachmentBehavior_item:_btnArray[i] attachToItem:_btnArray[i - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>]]; [attachmentBehavior setFrequency:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>]; [attachmentBehavior setLength:lastBtn<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.width</span> + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>]; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 重力行为</span> UIGravityBehavior *gravityBehavior = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addGravityBehavior:_btnArray[i]]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (i == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) { [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> dealFirstDisappearBtnGravityBehavior:gravityBehavior tempBtn:_btnArray[i]]; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 碰撞行为</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addCollisionBehavior:_btnArray[i]]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 动力元素行为</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> addDynamicItemBehavior:_btnArray[i]]; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 最后一个球向左push</span> UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[lastBtn] mode:UIPushBehaviorModeContinuous]; pushBehavior<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.pushDirection</span> = CGVectorMake(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>); pushBehavior<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.magnitude</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.0</span>; [_animator addBehavior:pushBehavior];}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li></ul>结束语：
以上即是滚珠动画的核心步骤和讲解。平时事情也多，抽了2周的业余时间做的。
如果有任何不足欢迎联系我：648070256@qq.com
UIDynamic资料相关网址:
Core Animation详解（三）－UIDynamic Animation
http://www.th7.cn/Program/IOS/201502/389463.shtml
WWDC 2013 Session笔记 - UIKit Dynamics入门
https://onevcat.com/2013/06/uikit-dynamics-started/
iOS动画——DynamicAnimate 力学动画
http://www.cnblogs.com/madpanda/p/4742563.html
- 顶
- 0
0 0
- iOS滚珠菜单动效
- iOS滚珠菜单动效
- iOS滚珠菜单动效
- IOS动效设计
- ios 动效
- iOS动效
- iOS 之Button动效
- 无限级联动菜单
- DropDownList连动菜单
- 3级联动菜单
- 级联动数据库菜单
- DynamicOptionList连动菜单
- jsp连动菜单
- 四级联动菜单
- iOS图片曲线，抛物线动效
- UI设计：ios 动效设计
- iOS 狂霸酷炫拽之Button动效
- JS二级连动菜单
- UVALive 2037 Digital Rivers 【打表&二分】
- Matlab2015a调用Python程序
- POJ 1017 Packets（简单贪心）
- 第3条：避免创建不必要的对象
- Autolayout03 - 视图居中
- iOS滚珠菜单动效
- .Net WebApi接口集成Swagger进行美化和调试教程
- 农业垂直搜索引擎四》文本处理模块的设计与实现
- Android Databinding 从入门到转行（一）初步介绍
- 二分模板
- java 类的加载器含义及分类
- CoordinatorLayout与滚动的处理
- 监听TextView的变动
- hbase shell 输入无法使用退格键删除解决办法
