Swift-动画效果

作者: GoGooGooo | 来源:发表于2016-01-15 13:56 被阅读2891次
    • 通过设置视图的transform属性实现动画(效率低,简单)

    • CABasicAnimation实现动画(高效)

    • CAKeyframeAnimation实现动画(根据路径实现帧动画)


    一、transform

    设置视图对象的transform属性,可以实现各种动画效果。

    1,移动
    指在同一平面内,将控件按照某个直线方向平移一定的距离。

    //每次都从当前位置平移
    self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, -2.1, -2.1)
     
    //每次都从最开始的位置计算平移
    self.imageView.transform = CGAffineTransformMakeTranslation(2.3, 2.3)
    

    2,旋转

    //连续旋转
    UIView.beginAnimations(nil, context: nil)
    UIView.setAnimationDuration(3.0) //设置动画时间
    self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, CGFloat(-M_PI/2))
    UIView.commitAnimations()
     
    //独立旋转,以初始位置旋转
    self.imageView.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI/4))
    

    3,缩放

    //连续缩放
    UIView.beginAnimations(nil, context: nil)
    UIView.setAnimationDuration(3.0) //设置动画时间
    self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 1.5 ,1.5)
    UIView.commitAnimations()
     
    //独立缩放,以初始位置缩放
    self.imageView.transform = CGAffineTransformMakeScale(1.3, 1.3)
    

    4,反转

    //返回初始状态
    self.imageView.transform = CGAffineTransformIdentity
     
    //连续反转
    UIView.beginAnimations(nil, context: nil)
    UIView.setAnimationDuration(3.0) //设置动画时间
    self.imageView.transform = CGAffineTransformConcat(self.imageView.transform,
        CGAffineTransformInvert(self.imageView.transform))
    UIView.commitAnimations()
     
    //独立反转,以初始位置反转
    self.imageView.transform = CGAffineTransformInvert(self.imageView.transform)
    

    二、CABasicAnimation

    1. CABasicAnimation类只有三个属性:
      fromValue:开始值
      toValue:结束值
      Duration:动画的时间

    2. 通过animationWithKeyPath键值对的方式设置不同的动画效果
      transform.scale
      transform.scale.x
      transform.scale.y
      transform.rotation.z
      opacity
      margin
      zPosition
      backgroundColor
      cornerRadius
      borderWidth
      bounds
      contents
      contentsRect
      cornerRadius
      frame
      hidden
      mask
      masksToBounds
      opacity
      position
      shadowColor
      shadowOffset
      shadowOpacity
      shadowRadius

    3. 使用样例
      (1)改变透明度动画(逐渐消失)

    let animation = CABasicAnimation(keyPath: "opacity")
    animation.fromValue = 1.0
    animation.toValue = 0.0
    animation.duration = 3.0
    self.imageView.layer.addAnimation(animation, forKey: "Image-opacity")
    self.imageView.alpha = 0
    

    (2)从小变大动画(还原为默认尺寸)

    let animation = CABasicAnimation(keyPath: "bounds.size")
    animation.fromValue = NSValue(CGSize: CGSizeMake(2.0, 2.0))
    animation.toValue = NSValue(CGSize: self.imageView.frame.size)
    animation.duration = 3.0
    self.imageView.layer.addAnimation(animation, forKey: "Image-expend")
    

    三、CAKeyframeAnimation

    1. CAKeyframeAnimation介绍
      CAKeyframeAnimation可以实现关键帧动画,这个类可以实现某一属性按照一串的数值进行动画,就像是一帧一帧的制作出来一样。

    2. 使用样例(设置五个关键点坐标,图片依次按关键点移动)

    let animation = CAKeyframeAnimation(keyPath: "position")
     
    //设置5个位置点
    let p1 = CGPointMake(0.0, 0.0)
    let p2 = CGPointMake(300, 0.0)
    let p3 = CGPointMake(0.0, 400)
    let p4 = CGPointMake(300, 400)
    let p5 = CGPointMake(150, 200)
     
    //赋值
    animation.values = [NSValue(CGPoint: p1), NSValue(CGPoint: p2),
        NSValue(CGPoint: p3), NSValue(CGPoint: p4), NSValue(CGPoint: p5)]
     
    //每个动作的时间百分比
    animation.keyTimes = [NSNumber(float: 0.0), NSNumber(float: 0.4),
        NSNumber(float: 0.6), NSNumber(float: 0.8), NSNumber(float: 1.0), ]
     
    animation.delegate = self
    animation.duration = 6.0
     
    self.imageView.layer.addAnimation(animation, forKey: "Image-Move")
    

    可以设置动画代理,监听开始和结束动作

    animation.delegate = self
     
    override func animationDidStart(anim: CAAnimation!) {
        println("动画开始")
    }
     
    override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
        println("动画结束")
    }
    

    相关文章

      网友评论

        本文标题:Swift-动画效果

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