最近得空做了一个小的新闻类APP，基本上都是照着News Digest的模子刻出来的，之所以这个为参考，是因为觉得News Digest这个APP做得真的很酷炫！
猛戳这里获取整个项目源代码
项目前端主要由swift编写，本地数据用CoreData，后端由Node.js编写，后台数据库用MongoDB。
News Digest(雅虎新闻)模仿秀第一弹
News Digest(雅虎新闻)模仿秀第二弹
News Digest(雅虎新闻)模仿秀第三弹
这期我们来说一下倒计时动画的实现，先上效果图：
倒计时效果图
这里要分两部分来讲，一部分是圆圈动画的填充，一部分是时间的快速滚动，位于项目CustomView/MenuView和CustomView/CountdownView
- 圆圈动画的执行
init(timeType: TimeType) {
super.init(frame: defaultFrame)
type = timeType
self.backgroundColor = UIColor.clearColor()
// CAShaperLayer Setting
circleShadowLayer.frame = self.bounds
circleShadowLayer.fillColor = UIColor.clearColor().CGColor
circleShadowLayer.lineWidth = 2.0
circleShadowLayer.strokeEnd = 1.0
circleShadowLayer.strokeColor = UIColor.RGBColor(255, green: 255, blue: 255, alpha: 0.2).CGColor
circleLayer.frame = self.bounds
circleLayer.fillColor = UIColor.clearColor().CGColor
circleLayer.lineWidth = 2.0
circleLayer.strokeEnd = 0
circleLayer.strokeColor = UIColor.RGBColor(0, green: 121, blue: 166, alpha: 1).CGColor
self.layer.addSublayer(circleShadowLayer)
self.layer.addSublayer(circleLayer)
}
这里的circleShadowLayer，就是动图底层那一个灰色的圈，我们设置strokeEnd = 1.0(就是说完全填充，形成一个闭环)，这个strokeEnd是从0.0-1.0范围
override func layoutSubviews() {
super.layoutSubviews()
defaultCircleRadius = (WIDTH - 100) < (self.bounds.height - 32) ? (WIDTH - 100)/2.0 : defaultCircleRadius
circleShadowLayer.frame = self.bounds
circleShadowLayer.path = circlePath().CGPath
circleLayer.frame = self.bounds
circleLayer.path = circlePath().CGPath
}
//MARK: - CirclePath
func circlePath() -> UIBezierPath {
return UIBezierPath.init(ovalInRect: circleFrame())
}
func circleFrame() -> CGRect {
var circleFrame = CGRect(x: 0, y: 0, width: 2*defaultCircleRadius, height: 2*defaultCircleRadius)
circleFrame.origin.x = CGRectGetMidX(circleShadowLayer.bounds) - CGRectGetMidX(circleFrame)
circleFrame.origin.y = CGRectGetMidY(circleShadowLayer.bounds) - CGRectGetMidY(circleFrame)
return circleFrame
}
circleFrame方法是设置圆圈的frame，让它形成位于圆心的，半径为defaultCircleRadius的圆，然后用UIBezierPath绘制路径，每次调用layoutSubviews方法把路径赋值给circleLayer
layoutSubviews调用时机：
- 直接调用setLayoutSubviews。
- addSubview的时候。
- 当view的frame发生改变的时候。
- 滑动UIScrollView的时候。
- 旋转Screen会触发父UIView上的layoutSubviews事件。
- 改变一个UIView大小的时候也会触发父UIView上的layoutSubviews事件。
期初我打算用UIView.animateWithDuration来赋值circleLayer的strokeEnd参数，然后发现无论我设置duration是多少，动画执行时间都是一样的，后来查了一下资料才发现UIView.animateWithDuration只能动画改变这几个参数
/*
* UIView.animateWithDuration(13.2, animations: {
* self.circleLayer.strokeEnd = CGFloat(interval/43200)
* })
* 这里执行方式不可以使用UIView.animateWithDuration，只能用CAAnimations
* UIView动画执行只能改变一下几个参数
*
* The following properties of the UIView class are animatable:
* @property frame
* @property bounds
* @property center
* @property transform
* @property alpha
* @property backgroundColor
* @property contentStretch
*/
所以动画执行strokeEnd的改变只能使用CAAnimations，只需要把strokeEnd的数值赋值给toValue，然后设置执行时间即可
func animationExecute() {
circleLayer.addAnimation(self.circleAnimationImplement(1.6, delay: 0.3, toValue: interval!/43200.0), forKey: nil)
}
// Animation Implement
private func circleAnimationImplement(duration: NSTimeInterval, delay: Double, toValue: Double) -> CABasicAnimation {
let animation = CABasicAnimation.init(keyPath: "strokeEnd")
animation.duration = duration < 0.8 ? 0.8 : duration
animation.beginTime = CACurrentMediaTime() + delay
animation.fromValue = 0.0
animation.toValue = toValue
animation.removedOnCompletion = false // 这里如果不是false fillMode属性不起作用
animation.fillMode = kCAFillModeForwards; // 保留动画后的样子
// 设置Delegate
animation.delegate = self
return animation
}
- 时间的快速滚动效果
其实中间就是一个UILabel，然后动态修改它的attributedText即可
这个数字快速滚动效果，我是模仿下面这位大大的代码写的
滚动的数字：FlickerNumber
如果需要详细了解，戳上面这个链接就可以详细了解.
总的来说，大概实现思路就是:
- 设定起始数字/终止数字/执行时间等
- 设定数字滚动的频率，比如说1/30等等
- 然后根据终止数字*频率/执行时间，就获得每次数字变化的值
- 最后一个NSTimer以频率来执行改变UILabel的值
- 滚动圈圈下面那个日期选择
具体就不细说了，就一个UICollectionView
今天就到这里了。
网友评论