您的位置：首页 > 移动开发 > IOS开发

iOS滚珠菜单动效

2016-07-19 14:19 441 查看


原文地址：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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航