Scrapy+Flask+Mongodb+Swift开发攻略三

　　此篇为Scrapy+Flask+Mongodb+Swift开发攻略三，通过之前两篇攻略，我们应该掌握了以下内容：

• 　　学会了如何用python的scrapy框架来趴一些数据。
• 　　学会了把爬虫爬来的数据存入mongodb。
• 　　学会了怎么用Flask写一个简单的接口。

　从第三篇攻略开始，我们会把注意力集中在如何写一个iOS app上。

看第一张图,如图1所示：　　

　　图1所示的是我们的app大概样子。

　　关注我微博的人应该知道之前我做了一个card效果，主要也是为了写这个界面，由于card那个效果应该是整个页面最复杂的了。所以我们今天先讲一个简单，就是图1显示PASSES的那个圆形view。

　  下面是动画加载的大概顺序：

　　1.首先是一个圆形的环的形成动画。

　　2.然后是数字的滚动效果。

　　3.细看的话，数字滚动的速度是不同的，十位数滚动的稍慢。个位数略快一些。那么首先脑子里的想法就是这肯定不能用一个label来显示，用两个label来分别显示个位和十位比较好做动画。

　　因此，此篇攻略我们先来做最简单的圆环形成的动画。

　　那很简单，用CAShapelayer来做strokeEnd动画就行了。

　　我们新建一个类，继承自UIView，然后改名叫StartView.如图2所示：

　　然后呢，给这个类添加一个属性。

　　var progressLayer: CAShapeLayer = CAShapeLayer()

　　然后重写我们的init方法。

　　加入如图3所示的代码:

　图3　　

现在我们的StarView类是图4这样的。

　　然后让我们先看看效果，在Viewcontroller里添加一个我们刚刚写的StarView，运行模拟器。结果已经有一个圆环了。

　　刚才我说过，要做出画出圆环的那种动画要使用一个叫做strokeEnd的动画。为什么呢?

　　在我早期的一篇blog中讲过，CABasicAnimation的keypath来源于何处。

　　其实keypath就是来源于CALayer的所有属性，也就是说，layer的所有属性都能放到keypath里做动画，而CAShapeLayer有一个叫做strokeEnd的属性，专门是用来检测CAShapeLayer的path属性是否被赋值，如果赋值的话就画出path的路径。so，我们就可以用这个strokeEnd属性做一些绘画的动画。

　　直接看代码。如图5所示的代码：

　图5

　　这里我定义了一个函数，专门用来执行这个画圆环的动画，然后把动画时长设置为0.5.

　　然后我们来运行一下。如图6所示：

　　确实是执行了画圆环的操作，但是问题来了。绘画的起点并不正确，起点是在三点钟方向，而我们的原型是需要在12点钟方向开始画。

　　出现的问题就在progressLayer.path = UIBezierPath(ovalInRect: self.bounds).CGPath 这句话上。

　　由于这个函数就是默认创建一个起点在三点钟方向的oval(圆形)，所以我们通过这个函数创建的圆环是没有办法指定起点的。

　　现在我们有两个解决方案，第一个是让我们的layer逆时针方向做一个90度的transform，那么我们的子layer也逆时针旋转了九十度，刚好从3点钟方向旋转到了12点钟方向。

　　可是这种解决方案并不合适。因为会留下很多后遗症。

　　比如说，你如果后期需要在cashapelayer加一些东西的话，所有的子layer全部会旋转。

　　所以我们需要改变progressLayer的path的创建方式。如图7所示：

图7

　　我们用画弧线的方法画一个圆，因为这种方法可以指定startAngle和endAngle。运行一下，如图8所示：

　　从图8的结果上看，已经能正确显示了。

　　接下来是我们的滚动Label。

　　这种能上下滚动的label最好的方法就是创建一个scrollView，然后在scrollview中添加十个label，label的内容就是数字0-10.

　　ok，我们新建一个类。

　　　　然后加入如图9所示的代码。

　　新建这个enum的原因就是我们的十位数和个位数弹跳的速率不同，所以我们在初始化的时候加入了一个type，用来区别创建的是十位数label还是个位数label。

　　然后就是创建了一个scrollview，在竖直的方向添加了十个label。

　　并且设置了一下每个label的字体，颜色等等属性。

　　然后创建一个开始动画的方法。

　　然后我们运行一下。如图10所示：

　　好的，label可以滚动了。那么其实问题也来了。

　　这两个scroll的滚动速度是一样的，而我们的需求是十位数的速度要慢一点。

　　熟悉各个不同的模块的人有各自的熟悉领域，比如可能熟悉scrollView的同学会知道scrollView有一个属性叫做decelerationRate 可以改变滑动速率，熟悉mssql的了解mssql的内容。但是这个属性有两个问题，1是只有在pageEnable开启的情况下才能生效，2是无法很细致的改动。

　　所以我们用另一个方法，用UIView的animation方法。

　　代码如下，如图11所示：

　　图11

　　相信不用我做过多解释大家也能看懂。就是更改scrollView的contentoffset。

　　好了，核心组件已经完成。那么我们把它组装起来。

　　最后运行效果如图12所示。

　　最后项目地址在这：https://github.com/zangqilong198812/HotGirls

　 之后我会出一些mssql的博客，敬请关注。