ripple ios

ripple是涟漪的意思,接下来实现的动画你将一块石头投入静止的水面所看到的一样.

ripple动画是通过一个scale动画和alpha动画组合起来的, 最后别忘了设置重复次数哦.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
func addRippleAnimation() {
    let shapeLayer = CAShapeLayer()
    shapeLayer.lineWidth = 0.2
    shapeLayer.strokeColor = UIColor.blueColor().CGColor
    let width: CGFloat = 2.0
    let path = UIBezierPath(roundedRect: CGRectMake(0, 0, width, width), cornerRadius: width/2.0)
    shapeLayer.path = path.CGPath
    shapeLayer.fillColor = UIColor.clearColor().CGColor
    shapeLayer.position = view.center
    shapeLayer.bounds = path.bounds
    //添加layer
    view.layer.addSublayer(shapeLayer)

    //scale animation
    let scalAni = CABasicAnimation(keyPath: "transform.scale")
    scalAni.fromValue = NSValue(CATransform3D: CATransform3DIdentity)
    scalAni.toValue = NSValue(CATransform3D: CATransform3DMakeScale(60, 60, 1))

    //alpha animation
    let alphaAni = CABasicAnimation(keyPath: "opacity")
    alphaAni.fromValue = 1
    alphaAni.toValue  = 0

    let groupAni = CAAnimationGroup()
    groupAni.animations  = [scalAni, alphaAni]
    groupAni.duration = 1.0
    groupAni.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    groupAni.removedOnCompletion = false
    groupAni.repeatCount = HUGE //重复次数为无限大

    shapeLayer.addAnimation(groupAni, forKey: nil)

}