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

前几天看了一篇关于动画的博客叫手摸手教你写 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地址

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

(0)

相关推荐

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

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

  • Winform圆形环绕的Loading动画实现代码

    之前写了一个WPF的圆形环绕的Loading动画,现在写一个Winform的圆形环绕的Loading动画. 1.新建Winform项目,添加一个pictureBox控件,命名为:pictureBox: 2.引用中添加using System.Drawing.Drawing2D; 3.Form窗体命名为:Loading,cs全部代码如下: 复制代码 代码如下: using System;using System.Collections.Generic;using System.ComponentM

  • 一看就喜欢的loading动画效果Android分析实现

    还是比较有新意,复杂度也不是非常高,所以就花时间整理一下,我们先一起看下原gif图效果: 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到进度条,似乎是融合进入: 5.叶子不能超出最左边的弧角: 7.叶子飘出时的角度不是一致,走的曲线的振幅也有差别,否则太有规律性,缺乏美感: 总的看起来,需要注意和麻烦的地方主要是以上几点,当然还有一些细节问题,比如最左边是圆弧等等: 那接下来我

  • jQuery实现彩带延伸效果的网页加载条loading动画

    本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画.分享给大家供大家参考,具体如下: 这里介绍的jQuery彩带效果网页加载条动画,我觉得挺有创意的,虽然难度不算大,但能想到用这样一个背景来做Loading加载条,也实属不易,不服气的,你为什么就没有想到这样做呢?本网页加载条效果使用了jQuery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n-color-cha-web-loading-demo/

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

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

  • Android自定义加载loading view动画组件

    在github上找的一个有点酷炫的loading动画https://github.com/Fichardu/CircleProgress 我写写使用步骤 自定义view(CircleProgress )的代码 package com.hysmarthotel.view; import com.hysmarthotel.roomcontrol.R; import com.hysmarthotel.util.EaseInOutCubicInterpolator; import android.ani

  • javascript 通用loading动画效果实例代码

    由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法:代码如下: 复制代码 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操

  • javascript制作loading动画效果 loading效果

    复制代码 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作AjaxLoding.load = function(lodingid,ms,event,left

  • Android实现创意LoadingView动画效果

    Android上的热火锅煮萝卜蔬菜的Loading动画效果. 这是一个锅煮萝卜的Loading动画,效果仿照自之前IOS上看到的一个效果,觉得挺有意思,就移植过来了,在此完成了Dialog的样式,方便使用者作为LoadingView去使用. 关键性代码: package yellow5a5.demo.boilingloadingview.View; import android.animation.Animator; import android.animation.AnimatorListen

  • loading动画特效小结

    话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lodading动画效果上</title> <link rel="stylesheet" href="style.css"/> <style> .box{ width: 10

随机推荐