iOS 类似虾米音乐侧滑动画解析（1）

来源：互联网发布：国外linux软件网站编辑：程序博客网时间：2024/05/14 04:02

类似虾米音乐侧滑动画，董事长高晓松 CEO宋柯 CCO 何炅。提倡收费，音乐分享，CD。

关于这种动画侧滑的实现方式，不少前辈大神已经做出了多种实现方式与讲解，而我在做阐述就显得相形见绌。分享前辈老师们做出的例子。

1、http://download.csdn.net/download/yuanxx321/6990925; RESideMenu库 http://blog.csdn.net/icetime17/article/details/46883915 简单理解RESideMenu；

2、https://github.com/yuyedaidao/YQSlideMenuControllerDemo；讲解 http://www.jianshu.com/p/3a350bb9d9ee；

3、https://github.com/johnlui/SwiftSideslipLikeQQ； Swift版。

具体的实现demo可以下载以上例子进行学习参考，而我们也是做理解性的分析，在分析中寻求更多的思考与突破，寻求更好的算法。

分析，透过观看东西动画，可以看到两个view有着切换。暂定为上面内容的为contentView (A) ,下面菜单为menuView (B)。A视图有滑动手势，在滑动的过程中A的位置随滑动有不断的变化，而且大小也是有变化的。通过观察，我们可以确定这基本是线性变化的关系，那么怎么确定变化的比例值，既随着手势的滑动A视图的大小以及位置是怎么改变的。

我们找滑动的最终状态进行分析，找出线性的比例值。运用Mark Man测量最终状态A视图与屏幕视图的关系。这是4.7吋iPhone 6的屏幕，其分辨率是1334 * 750像素。

进一步的需要确定触摸移动距离与A视图位置大小的关系。

其中A视图左边界距到屏幕左边界的距离占整个屏幕的比例为（750 - 132）/ 750 = 0.8244; A的高度占整个屏幕为（1334 - 118*2）/ 1334 = 0.8231;基于算法简单，我设定为常数c1、c2。将手指的移动距离设定为x，x作为变量，而因变量y为缩比率。有我们强大的数学功底，我们可以找出两个条件，解出y与x的关系。

所以，观察得到，当x = 0时，y = 1 ；x = c1 时 y = c2。由这个两个式子可以得出，y = (（c2 - 1）/ c1 ) *x + 1;（其中 c1 = 0.8244，c2 = 0.8231）;A视图中心向右移动的距离和手指移动的距离相等。我们假设A与B视图，我们已经定义好，那么在基于y与x的关系，可以在contentView (A) UIPanGestureRecoginzer事件中，进行如下的算法与关系的操作。

- (void)panGestureRecognizer:(UIScreenEdgePanGestureRecognizer *)recognizer{
CGPoint point = [recognizertranslationInView:self.view];
if (recognizer.state ==UIGestureRecognizerStateBegan) {
//添加阴影，在http://www.jianshu.com/p/3a350bb9d9ee下载工程，YQSlideMenuController里有完整步骤，可参考。
}elseif(recognizer.state ==UIGestureRecognizerStateChanged){
float trueDistance = distance + point.x; //实时距离。
//计算上文提到的y与x的关系方法。
//平移与缩放的动画
A.view.center = CGpointMake(self.view.center.x + trueDistance,self.view.center.y); //中心点平移
A.view.transform =CGAffineTransformScale(CGAffineTransformIdentity,y,y); CGAffineTransformScale 缩放方法。
}elseif(recognizer.state ==UIGestureRecognizerStateEnded){
//根据位置做自动停靠，也可结合手势滑动的方向做自动停靠，
}

}

对contentView (A) 的分析就暂时分享到这里，

下一节对 menuView (B)的展示进行分析，并总结出整体流程。

0 0