iOS动画教你编写Slack的Loading动画进阶篇_IOS

前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画，看着挺炫，但是是安卓版的，寻思的着仿造着写一篇iOS版的，下面是我写这个动画的分解~ 

老规矩先上图和demo地址：

刚看到这个动画的时候，脑海里出现了两个方案，一种是通过drawRect画出来，然后配合CADisplayLink不停的绘制线的样式；第二种是通过CAShapeLayer配合CAAnimation来实现动画效果。再三考虑觉得使用后者，因为前者需要计算很多，比较复杂，而且经过测试前者相比于后者消耗更多的CPU，下面将我的思路写下来：

相关配置和初始化方法

在写这个动画之前，我们把先需要的属性写好，比如线条的粗细，动画的时间等等，下面是相关的配置和初识化方法：

  //线的宽度
  var lineWidth:CGFloat = 0
  //线的长度
  var lineLength:CGFloat = 0
  //边距
  var margin:CGFloat = 0
  //动画时间
  var duration:Double = 2
  //动画的间隔时间
  var interval:Double = 1
  //四条线的颜色
  var colors:[UIColor] = [UIColor.init(rgba: "#9DD4E9") , UIColor.init(rgba: "#F5BD58"), UIColor.init(rgba: "#FF317E") , UIColor.init(rgba: "#6FC9B5")]
  //动画的状态
  private(set) var status:AnimationStatus = .Normal
  //四条线
  private var lines:[CAShapeLayer] = []

  enum AnimationStatus {
    //普通状态
    case Normal
    //动画中
    case Animating
    //暂停
    case pause
  }

   //MARK: Initial Methods
  convenience init(fram: CGRect , colors: [UIColor]) {
    self.init()
    self.frame = frame
    self.colors = colors
    config()
  }

  override init(frame: CGRect) {
    super.init(frame: frame)
    config()
  }

  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    config()
  }

  private func config() {
    lineLength = max(frame.width, frame.height)
    lineWidth = lineLength/6.0
    margin   = lineLength/4.5 + lineWidth/2
    drawLineShapeLayer()
    transform = CGAffineTransformRotate(CGAffineTransformIdentity, angle(-30))
  }

通过CAShapeLayer绘制线条

看到这个线条我就想到了用CAShapeLayer来处理，因为CAShapeLayer完全可以实现这种效果，而且它的strokeEnd的属性可以用来实现线条的长度变化的动画，下面上绘制四根线条的代码：

//MARK: 绘制线
  /**
   绘制四条线
   */
  private func drawLineShapeLayer() {
    //开始点
    let startPoint = [point(lineWidth/2, y: margin),
             point(lineLength - margin, y: lineWidth/2),
             point(lineLength - lineWidth/2, y: lineLength - margin),
             point(margin, y: lineLength - lineWidth/2)]
    //结束点
    let endPoint  = [point(lineLength - lineWidth/2, y: margin) ,
             point(lineLength - margin, y: lineLength - lineWidth/2) ,
             point(lineWidth/2, y: lineLength - margin) ,
             point(margin, y: lineWidth/2)]
    for i in 0...3 {
      let line:CAShapeLayer = CAShapeLayer()
      line.lineWidth  = lineWidth
      line.lineCap   = kCALineCapRound
      line.opacity   = 0.8
      line.strokeColor = colors[i].CGColor
      line.path    = getLinePath(startPoint[i], endPoint: endPoint[i]).CGPath
      layer.addSublayer(line)
      lines.append(line)
    }

  }

  /**
   获取线的路径

   - parameter startPoint: 开始点
   - parameter endPoint:  结束点

   - returns: 线的路径
   */
  private func getLinePath(startPoint: CGPoint, endPoint: CGPoint) -> UIBezierPath {
    let path = UIBezierPath()
    path.moveToPoint(startPoint)
    path.addLineToPoint(endPoint)
    return path
  }

  private func point(x:CGFloat , y:CGFloat) -> CGPoint {
    return CGPointMake(x, y)
  }

  private func angle(angle: Double) -> CGFloat {
    return CGFloat(angle * (M_PI/180))
  }

执行完后就跟上图一样的效果了~~~

动画分解

经过分析，可以将动画分为四个步骤：
 •画布的旋转动画，旋转两圈
 •线条由长变短的动画，更画布选择的动画一起执行，旋转一圈的时候结束
 •线条的位移动画，线条逐渐向中间靠拢，再画笔旋转完一圈的时候执行，两圈的时候结束
 •线条由短变长的动画，画布旋转完两圈的时候执行 

第一步画布旋转动画

这里我们使用CABasicAnimation基础动画，keyPath作用于画布的transform.rotation.z，以z轴为目标进行旋转，下面是效果图和代码：

//MARK: 动画步骤
  /**
   旋转的动画，旋转两圈
   */
  private func angleAnimation() {
    let angleAnimation         = CABasicAnimation.init(keyPath: "transform.rotation.z")
    angleAnimation.fromValue      = angle(-30)
    angleAnimation.toValue       = angle(690)
    angleAnimation.fillMode      = kCAFillModeForwards
    angleAnimation.removedOnCompletion = false
    angleAnimation.duration      = duration
    angleAnimation.delegate      = self
    layer.addAnimation(angleAnimation, forKey: "angleAnimation")
  }

第二步线条由长变短的动画

这里我们还是使用CABasicAnimation基础动画，keyPath作用于线条的strokeEnd属性，让strokeEnd从1到0来实现线条长短的动画，下面是效果图和代码：

/**
   线的第一步动画，线长从长变短
   */
  private func lineAnimationOne() {
    let lineAnimationOne         = CABasicAnimation.init(keyPath: "strokeEnd")
    lineAnimationOne.duration      = duration/2
    lineAnimationOne.fillMode      = kCAFillModeForwards
    lineAnimationOne.removedOnCompletion = false
    lineAnimationOne.fromValue      = 1
    lineAnimationOne.toValue       = 0
    for i in 0...3 {
      let lineLayer = lines[i]
      lineLayer.addAnimation(lineAnimationOne, forKey: "lineAnimationOne")
    }
  }

第三步线条的位移动画

这里我们也是使用CABasicAnimation基础动画，keyPath作用于线条的transform.translation.x和transform.translation.y属性，来实现向中间聚拢的效果，下面是效果图和代码：

/**
   线的第二步动画，线向中间平移
   */
  private func lineAnimationTwo() {
    for i in 0...3 {
      var keypath = "transform.translation.x"
      if i%2 == 1 {
        keypath = "transform.translation.y"
      }
      let lineAnimationTwo = CABasicAnimation.init(keyPath: keypath)
      lineAnimationTwo.beginTime = CACurrentMediaTime() + duration/2
      lineAnimationTwo.duration = duration/4
      lineAnimationTwo.fillMode = kCAFillModeForwards
      lineAnimationTwo.removedOnCompletion = false
      lineAnimationTwo.autoreverses = true
      lineAnimationTwo.fromValue = 0
      if i < 2 {
        lineAnimationTwo.toValue = lineLength/4
      }else {
        lineAnimationTwo.toValue = -lineLength/4
      }
      let lineLayer = lines[i]
      lineLayer.addAnimation(lineAnimationTwo, forKey: "lineAnimationTwo")
    }

    //三角形两边的比例
    let scale = (lineLength - 2*margin)/(lineLength - lineWidth)
    for i in 0...3 {
      var keypath = "transform.translation.y"
      if i%2 == 1 {
        keypath = "transform.translation.x"
      }
      let lineAnimationTwo = CABasicAnimation.init(keyPath: keypath)
      lineAnimationTwo.beginTime = CACurrentMediaTime() + duration/2
      lineAnimationTwo.duration = duration/4
      lineAnimationTwo.fillMode = kCAFillModeForwards
      lineAnimationTwo.removedOnCompletion = false
      lineAnimationTwo.autoreverses = true
      lineAnimationTwo.fromValue = 0
      if i == 0 || i == 3 {
        lineAnimationTwo.toValue = lineLength/4 * scale
      }else {
        lineAnimationTwo.toValue = -lineLength/4 * scale
      }
      let lineLayer = lines[i]
      lineLayer.addAnimation(lineAnimationTwo, forKey: "lineAnimationThree")
    }
  }

第四步线条恢复的原来长度的动画

这里我们还是使用CABasicAnimation基础动画，keyPath作用于线条的strokeEnd属性，让strokeEnd从0到1来实现线条长短的动画，下面是效果图和代码：

/**
   线的第三步动画，线由短变长
   */
  private func lineAnimationThree() {
    //线移动的动画
    let lineAnimationFour         = CABasicAnimation.init(keyPath: "strokeEnd")
    lineAnimationFour.beginTime      = CACurrentMediaTime() + duration
    lineAnimationFour.duration      = duration/4
    lineAnimationFour.fillMode      = kCAFillModeForwards
    lineAnimationFour.removedOnCompletion = false
    lineAnimationFour.fromValue      = 0
    lineAnimationFour.toValue       = 1
    for i in 0...3 {
      if i == 3 {
        lineAnimationFour.delegate = self
      }
      let lineLayer = lines[i]
      lineLayer.addAnimation(lineAnimationFour, forKey: "lineAnimationFour")
    }
  }

最后一步需要将动画组合起来

关于动画组合我没用到CAAnimationGroup，因为这些动画并不是加到同一个layer上，再加上动画类型有点多加起来也比较麻烦，我就通过动画的beginTime属性来控制动画的执行顺序，还加了动画暂停和继续的功能，效果和代码见下图：

//MARK: Public Methods
  /**
   开始动画
   */
  func startAnimation() {
    angleAnimation()
    lineAnimationOne()
    lineAnimationTwo()
    lineAnimationThree()
  }

  /**
   暂停动画
   */
  func pauseAnimation() {
    layer.pauseAnimation()
    for lineLayer in lines {
      lineLayer.pauseAnimation()
    }
    status = .pause
  }

  /**
   继续动画
   */
  func resumeAnimation() {
    layer.resumeAnimation()
    for lineLayer in lines {
      lineLayer.resumeAnimation()
    }
    status = .Animating
  }

  extension CALayer {
  //暂停动画
  func pauseAnimation() {
    // 将当前时间CACurrentMediaTime转换为layer上的时间, 即将parent time转换为localtime
    let pauseTime = convertTime(CACurrentMediaTime(), fromLayer: nil)
    // 设置layer的timeOffset, 在继续操作也会使用到
    timeOffset  = pauseTime
    // localtime与parenttime的比例为0, 意味着localtime暂停了
    speed     = 0;
  }

  //继续动画
  func resumeAnimation() {
    let pausedTime = timeOffset
    speed     = 1
    timeOffset   = 0;
    beginTime   = 0
    // 计算暂停时间
    let sincePause = convertTime(CACurrentMediaTime(), fromLayer: nil) - pausedTime
    // local time相对于parent time时间的beginTime
    beginTime   = sincePause
  }
}

//MARK: Animation Delegate
  override func animationDidStart(anim: CAAnimation) {
    if let animation = anim as? CABasicAnimation {
      if animation.keyPath == "transform.rotation.z" {
        status = .Animating
      }
    }
  }

  override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
    if let animation = anim as? CABasicAnimation {
      if animation.keyPath == "strokeEnd" {
        if flag {
          status = .Normal
          dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(interval) * Int64(NSEC_PER_SEC)), dispatch_get_main_queue(), {
            if self.status != .Animating {
              self.startAnimation()
            }
          })
        }
      }
    }
  }

   //MARK: Override
  override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
    switch status {
    case .Animating:
      pauseAnimation()
    case .pause:
      resumeAnimation()
    case .Normal:
      startAnimation()
    }
  }

总结

动画看起来挺复杂，但是细细划分出来也就那么回事，在写动画之前要先想好动画的步骤，这个很关键，希望大家通过这篇博文章可以学到东西，有什么好的建议可以随时提出来，谢谢大家阅读~~demo地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ios
， loading
Slack
css3 loading动画、android loading 动画、loading动画、ios loading动画、css loading 动画，以便于您获取更多的相关知识。

时间： 2024-10-27 17:34:10

iOS动画教你编写Slack的Loading动画进阶篇_IOS的相关文章

一步步教你写Slack的Loading动画_Android

项目地址:https://github.com/JeasonWong/SlackLoadingView 老规矩,先上效果. 图好大.. 说下第一眼看到这个动画后的思路: +两根平行线,要用到直线方程 y=kx+b +另外两根平行线,与之前两根平行线的斜率相乘为-1,即k1*k2=-1 +线条做圆周运动就是k值的不断变化 +然后就是简单的线条长度变化 我相信很多人第一眼会和我有类似的思路,但是当我上了个厕所后意识到我想复杂了~ 说下上完厕所后的思路: 不要想着线条是斜的,就是一个普通的线段,一个L

一步步教你写Slack的Loading动画

项目地址:https://github.com/JeasonWong/SlackLoadingView 老规矩,先上效果. 图好大.. 说下第一眼看到这个动画后的思路: +两根平行线,要用到直线方程 y=kx+b +另外两根平行线,与之前两根平行线的斜率相乘为-1,即k1*k2=-1 +线条做圆周运动就是k值的不断变化 +然后就是简单的线条长度变化 我相信很多人第一眼会和我有类似的思路,但是当我上了个厕所后意识到我想复杂了~ 说下上完厕所后的思路: 不要想着线条是斜的,就是一个普通的线段,一个L

IOS CocoaPods详解之进阶篇_IOS

一.Podfile.lock文件 上文讲过,在开始使用CocoaPods,执行完pod install之后,会生成一个Podfile.lock文件.这个文件看起来跟我们关系不大,实际上绝对不应该忽略它. 该文件用于保存已经安装的Pods依赖库的版本,通过CocoaPods安装了SBJson.AFNetworking.Reachability三个POds依赖库以后对应的Podfile.lock文件内容为: PODS: - AFNetworking (2.1.0): - AFNetworking/N

canvas做loading动画

由于公司最近项目不是很忙,所以,自己利用闲暇的时间来研究了一阵子的htm5和css3,正巧,公司最近要对以前的项目进行一次统一的升级,而我被告知时,主要是在以前的版本中加入一些页面动画.有4人参与了动画特效的编写,我很幸运自己也被选中. 第一次做动效还是用css3,心里好激动.虽然自己对css3不是很了解,但是,我还是有信心自己能够胜任这次的任务.接下来近2个月的时间里,我 都在做css3动效,由于自己只是擅长javascript和JQuery,对css了解也不是很熟悉,所以,做css3动画上还

css3 loading: 3款漂亮的CSS3 Loading动画实例教程

HTML第1个例子中的HTML标记非常简单,我们在页面上创建了一个ul列表标记,并在其内部创建了几个div来控制它的总体进度动画,代码如下: 12345678910111213141516171819202122 <ul id="progress">    <li>    <div id="layer1" class="ball"></div> <!-- layer1 control dela

Loading动画的制作

loading Loading动画的制作(一) 说是Loading动画,其实只不过是用Fireworks4做的一段动画效果,千万别误会是Flash中的Loading哦,用Fireworks可不能进行编程,如果哪位会的话,请告诉我,呵呵. 实际效果是这样的.请看下图 (这是一个GIF动画) 制作方法如下: 一. 新建文件,新文件的尺寸大小为300*200,画布颜色为白色. 二. 选择工具面板中的矩形工具,按住shift键,画一个正方形,填充颜色为红色,打开info面板,设置其W和H的值都为20,按

3款漂亮的CSS3 Loading动画实例教程

   HTML 第1个例子中的HTML标记非常简单,我们在页面上创建了一个ul列表标记,并在其内部创建了几个div来控制它的总体进度动画,代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <ul id="progress">     <li>     <div id="layer1" class="ball"></div>

三款Android炫酷Loading动画组件推荐_Android

最近突然心血来潮,对一些Loading感兴趣,Loading这玩意说重要也重要,说不重要也不重要,因为这是一个提升你产品体验的一个细节,如果loading做的好,对于一些耗时需要用户等待的页面来说会转移用户注意力,不会显得那么烦躁,所以你可以看到市面上各种各样好玩的Loading动画,那么这篇博客就准备收集下一些Loading动画吧,从这些实现思路上可以打开你们自己的思维,没准也会有创新好玩的Loading动画出现. 暂且先列举些最近GitHub新鲜出炉的Loading CircleProgre

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

iOS开发CoreAnimation解读之一--初识CoreAnimation核心动画编程 一.引言         众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的展示,我们就需要使用CoreAnimation框架中的一些类与方法.这里先附上前几篇与动画相关的博客地址,这一系列,我们抽出其中的CoreAnimation框架来详细解读. UIViewAnimation动画的使用:http://my.o