过渡动画之入门模仿系统

   <p style="text-align:center"><img src="https://simg.open-open.com/show/442c5f3b8997229a0dc5a63977e59272.png"></p>    <p>本文章将会带你学到如何实现下图 airbnb 首页类似的过渡动画，同时最重要的，你将学会怎么分析类似的动画，并且知道如何动手实现。 </p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/329cc7fc71dcf291f958c0ff453ec1fa.gif"></p>    <p>好，准备好了吗？现在开始第一篇。这一篇主要分析系统简单的动画实现原理，以及讲解坐标系、绝对坐标系、相对坐标系，坐标系转换等知识，为第二篇储备理论基础。最后实现 Mac 上的文件预览动画。</p>    <h3>01. 系统的过渡动画</h3>    <p>我很多时候做一个东西的时候，我会先想一下，我们的老东家苹果有没有做过类似的？如果有，那肯定苹果的更靠谱。看到上面那个 airbnb 动画的时候，我首先想到 Mac 上这个文件预览的动画。</p>    <p>你还能想到 iPhone 上系统自带更多的类似的动画吗？</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/91a363934cd43b8403871eea53126dba.gif"></p>    <p>这个动画应该怎么实现呢？我来描述一下这个过程，你看我说的对不对。</p>    <ul>     <li>首先你要选中这个文件夹，然后当你按下 space 键的时候，会产生一个用来做动画的元素 Object ，Object 从当前选中文件夹的位置开始运动到屏幕中央（终点位置），边运动边放大。这是打开预览的过程。</li>     <li>当你再次按下 space 键的时候，当前动画元素 Object 会从屏幕中央运动到你选中的那个文件夹的位置，边运动边缩小。这是关闭预览。</li>    </ul>    <p>有没有从这个描述中 get 到几个关键点呢？</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f16fb339d938c8541a5517670fa165e4.png"></p>    <p>如果尝试把这些关键点和动画过程串起来，是不是就应该是下面这样？动画开始，先创建用来做动画的元素（是新产生，不是拿到文件夹进行动画，因为你也看到，之前那个文件夹它仍然在那里没有动），然后计算起点位置，在把这个元素添加到起点位置，接下来计算终点位置，然后开始做动画。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a5ffd46bd117768a0e73ffe2390f549c.png"></p>    <h2>02.坐标系、绝对坐标系、相对坐标系，坐标系转换</h2>    <p>在实现之前，我们先来复习一下初中物理。</p>    <ul>     <li>这里我们只讨论二维坐标系，因为我们的动画是基于二维坐标系的。</li>     <li>如下图，我们有一台 iPhone，它的坐标原点在左上角，就是白色的坐标系，我们物理里面又叫做绝对坐标系，其他的坐标系都是参考它来定位的。</li>     <li>在我们的 iPhone 屏幕上有一个红色的矩形，它处在（60，100）的位置上（相对于绝对坐标系），它自身也有一个坐标系，让它体内的元素相对它进行定位，它的坐标系叫做相对坐标系（相对于绝对坐标系的坐标系）。</li>     <li>在屏幕中央还有一个绿色的矩形，它相对于红色的矩形定位为（40，60）（相对坐标系的坐标）。</li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/64036de1ec8a1419441786929b316321.png"></p>    <p>现在我们要计算这个绿色的矩形的绝对坐标，也就是坐标系转换。从下图计算我们可以很快算出这个值为（100, 160）。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/263816581c0daad8be5308b6db5e208a.png"></p>    <h2>03.知道上面这些有什么用？</h2>    <p>可能你看到这里会觉得这些都很简单，还用你再说一遍？而且这些好像也没什么用，对吧？</p>    <p>上面说过坐标转换的问题，在实际开发中，我们的视图 View 都是层层嵌套，所以将一个点的 frame 从一个坐标系迁移到另外一个坐标系不可能依赖于我们开发者去手动计算。因为系统需要将视图渲染到屏幕上，所以系统是知道视图关系的。好在系统提供了两个 frame 转换函数。这两个函数都是 UIView 的对象方法。</p>    <pre>  <code class="language-objectivec">- (CGRect)convertRect:(CGRect)recttoView:(nullableUIView *)view;  - (CGRect)convertRect:(CGRect)rectfromView:(nullableUIView *)view;  </code></pre>    <ul>     <li> <p>第一个函数，将一个当前 View 坐标系的 frame 转换为另一个 View 的坐标系上。比如说下图 A 中有个 B，如果要将 B 的 frame 迁移到 C 中，就应该这么写：</p> <pre>  <code class="language-objectivec">CGRecttargetFrame = [A convertRect:B.frametoView:C];  </code></pre> </li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/427dfa832fcc81386552bacd7c8bb5f1.png"></p>    <ul>     <li>同样的，如果使用第二个函数来实现将 B 的 frame 迁移到 C 中，那就应该这么写： <pre>  <code class="language-objectivec">CGRecttargetFrame = [C convertRect:B.framefromView:A];  </code></pre> </li>     <li>同时需要注意，如果想要把 B 的 frame 迁移到窗口坐标（绝对坐标系，也就是白色的坐标系），那就应该这么写： <pre>  <code class="language-objectivec">CGRecttargetFrame =  [A convertRect:B.frametoView:window];  CGRecttargetFrame = [windowconvertRect:B.framefromView:A];  </code></pre> 或者这么写： <pre>  <code class="language-objectivec">CGRecttargetFrame =  [A convertRect:B.frametoView:nil]; // 这个函数中，如果传个 nil，则代表窗口 window.  </code></pre> </li>    </ul>    <p>理清楚这些坐标转换是很有必要的，因为等会当视图关系变得很复杂的时候，假如不能理清楚，可能你自己都不知道在哪个坐标系，你会觉得明明自己写对了，但是代码跑起来就是错的。如果出现这种情况，还是应该回到起点来，理清楚这些坐标关系。</p>    <h2>04.动手实现</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b1f61ce5a8288aa493a2e85a701a6c72.gif"></p>    <ul>     <li>首先我们在 Storyborad 中创建一个 UIImageView 用来显示文件夹图标。</li>     <li>看一下 @interface 中的属性 <pre>  <code class="language-objectivec">@interface ViewController ()     @property (weak, nonatomic) IBOutletUIImageView *folderImageView;     /** 动画元素 */  @property(nonatomic, strong)UIImageView *animationImageView;     /** 是否是打开预览动画 */  @property(nonatomic, assign)BOOL isOpenOverView;     @end  </code></pre> </li>     <li>我们肯定需要一个截图工具： <pre>  <code class="language-objectivec">// 将一个 view 进行截图  -(UIImage *)snapImageForView:(UIView *)view{      UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0);      [view.layerrenderInContext:UIGraphicsGetCurrentContext()];      UIImage *aImage = UIGraphicsGetImageFromCurrentImageContext();      UIGraphicsEndImageContext();      return aImage;  }  </code></pre> </li>     <li>然后我们在 touchesBegan 方法中处理动画。大致思路遵循我一开始描述的动画过程。      <ul>       <li>一开始将要做动画的 View 进行截图；</li>       <li>再将我们要做动画的 View 的 frame 迁移到窗口坐标系中，作为动画起始位置。为什么要迁移到窗口坐标系而不是其他的坐标系呢？因为我们做动画的元素是添加到窗口上的，并且你需要将所有动画元素的 frame 统一一个坐标系，这样方便我们以最高效的方式管理我们自己创建的元素。</li>       <li>计算我们的终点位置，在这个动画里很简单，话不多说。但是在下一个仿 airbnb 的动画里，计算终点 frame 将成为一个挑战（关于你高中数学知识的一个挑战）。</li>       <li>添加动画元素一个 UIImageView 到窗口。为什么是 UIImageView 而不是其它呢？很显然我们动画有放大和缩小，所以应该是一个 frame 动画。所以我们应该选择用 UIImageView 来呈现截图的方式来实现动画。</li>       <li>最后用一个系统封装的 UIView 动画 block 来处理动画过程。 <pre>  <code class="language-objectivec">-(void)touchesBegan:(NSSet *)toucheswithEvent:(UIEvent *)event{       // 先将文件夹那个视图进行截图    UIImage *animationImage = [self snapImageForView:self.folderImageView];       // 再将文件夹视图的坐标系迁移到窗口坐标系（绝对坐标系）    CGRecttargetFrame_start = [self.folderImageView.superviewconvertRect:self.folderImageView.frametoView:nil];       // 计算动画终点位置    CGFloattargetW = targetFrame_start.size.width*magnificateMultiple;    CGFloattargetH = targetFrame_start.size.height*magnificateMultiple;    CGFloattargetX = (JPScreenWidth - targetW) / 2.0;    CGFloattargetY =(JPScreenHeight - targetH) / 2.0;    CGRecttargetFrame_end = CGRectMake(targetX, targetY, targetW, targetH);       // 添加做动画的元素    if (!self.animationImageView.superview) {        self.animationImageView.image = animationImage;        self.animationImageView.frame = targetFrame_start;        [self.view.windowaddSubview:self.animationImageView];    }       if (self.isOpenOverView) {           // 预览动画        [UIViewanimateWithDuration:1 delay:0. options:UIViewAnimationOptionCurveEaseInanimations:^{               self.animationImageView.frame = targetFrame_end;           } completion:^(BOOL finished) {           }];    }    else{           // 关闭预览动画        [UIViewanimateWithDuration:1 delay:0. options:UIViewAnimationOptionCurveEaseOutanimations:^{               self.animationImageView.frame = targetFrame_start;           } completion:^(BOOL finished) {               [self.animationImageViewremoveFromSuperview];           }];    }       self.isOpenOverView = !self.isOpenOverView;   }  </code></pre> </li>      </ul> </li>    </ul>    <p>很简单，对吧？但是我希望你是理解这个思路以后才觉得简单，而不是仅仅觉得代码实现简单，因为下一篇就没这么简单了。</p>    <p> </p>    <p>来自：http://ios.jobbole.com/92312/</p>    <p> </p>