CoreAnimation(三)-CAAnimationGrou

作者: ZhHS | 来源:发表于2016-08-31 16:34 被阅读439次

    CAAnimationGroup

    单一的动画并不能满足某些特定需求,这时就需要用到动画组,使得多个动画并发执行。如果了解过一些核心动画的基础知识,动画组就再简单不过了,不太熟悉的话请点击:CAAnimation基础
    CAAnimationGroup继承于CAAnimation,独有属性:public var animations: [CAAnimation]?,一个CAAnimation对象的数组。
    接下来,来看几组简单的CAAnimationGroup使用方法:

    • 旋转+平移
    • 效果图:


    • 代码:

            //创建图层
            let wheelLayer = CALayer()
            let wheel = UIImage(named: "车轮-(1)")!
            wheelLayer.contents = wheel.CGImage
            wheelLayer.frame = CGRect(x: 0.0, y: 667 / 2, width:wheel.size.width, height: wheel.size.height)
            view.layer.addSublayer(wheelLayer)
    
            //旋转动画
            let rollAnimation = CABasicAnimation(keyPath: "transform.rotation")
            rollAnimation.toValue = M_PI * 2
    
            //平移动画
            let translateAnimation = CABasicAnimation(keyPath: "transform.translation.x")
            translateAnimation.toValue = 375
    
            //动画组
            let animationGroup = CAAnimationGroup()
            animationGroup.duration = 2
            animationGroup.animations = [rollAnimation, translateAnimation]
            animationGroup.repeatCount = 1_000_000
            wheelLayer.addAnimation(animationGroup, forKey: nil)
    
    • 缩放+透明度
    • 效果图:


    • 代码:

            //创建图层
            let layer = CALayer()
            let symbol = UIImage(named: "+")!
            layer.contents = symbol.CGImage
            layer.frame = CGRect(x: (375 - symbol.size.width) / 2, y: (667 - symbol.size.height) / 2, width: symbol.size.width, height: symbol.size.height)
            view.layer.addSublayer(layer)
    
            //缩放动画
            let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
            scaleAnimation.fromValue = 0.0
            scaleAnimation.toValue = 10.0
    
            //透明度动画
            let opacityAnimation = CABasicAnimation(keyPath: "opacity")
            opacityAnimation.toValue = 0.0
    
            //动画组
            let animationGroup = CAAnimationGroup()
            animationGroup.animations = [scaleAnimation, opacityAnimation]
            animationGroup.duration = 2.0
            animationGroup.removedOnCompletion = false
            animationGroup.fillMode = kCAFillModeForwards
            animationGroup.repeatCount = MAXFLOAT
            layer.addAnimation(animationGroup, forKey: nil)
    
    • BezierPath+旋转
    • 效果图:


    • 代码:

            //创建图层
            let layer = CALayer()
            let satellite = UIImage(named: "NoNetwork")!
            layer.contents = satellite.CGImage
            let centerY = (667 - satellite.size.height) / 2
            layer.frame = CGRect(x: 0, y: centerY, width: satellite.size.width, height: satellite.size.height)
            view.layer.addSublayer(layer)
    
            //创建贝塞尔曲线
            let bezierPath = UIBezierPath()
            bezierPath.moveToPoint(CGPoint(x: 0, y: centerY))
            bezierPath.addQuadCurveToPoint(CGPoint(x: 375, y: centerY), controlPoint: CGPoint(x: 375/2, y: 0))
    
            //创建shapeLayer划线(后面会有单独的章节介绍)
            let shapeLayer = CAShapeLayer()
            shapeLayer.path = bezierPath.CGPath
            shapeLayer.fillColor = UIColor.clearColor().CGColor
            shapeLayer.strokeColor = UIColor.whiteColor().CGColor
            view.layer.addSublayer(shapeLayer)
    
            //旋转动画
            let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation.x")
            rotateAnimation.toValue = M_PI * 2
            rotateAnimation.duration = 1.0
            rotateAnimation.repeatCount = MAXFLOAT
    
            //BezierPath动画
            let bezierAnimation = CAKeyframeAnimation(keyPath: "position")
            bezierAnimation.path = bezierPath.CGPath
    
            //动画组
            let animationGroup = CAAnimationGroup()
            animationGroup.animations = [rotateAnimation, bezierAnimation]
            animationGroup.duration = 5.0
            animationGroup.repeatCount = MAXFLOAT
            animationGroup.autoreverses = true
            layer.addAnimation(animationGroup, forKey: nil)
    

    结语

    以上几个例子,简单的介绍了CAAnimationGroup的使用方法,若有疑问或需要Demo请留言。

    相关文章

      网友评论

        本文标题:CoreAnimation(三)-CAAnimationGrou

        本文链接:https://www.haomeiwen.com/subject/ifnqettx.html