iOS动画进阶 - 教你写 Slack 的 Loading 动画

最新推荐文章于 2018-11-27 16:22:39 发布
最新推荐文章于 2018-11-27 16:22:39 发布
阅读量757 收藏
点赞数
分类专栏： 动画 文章标签： cpu 动画 图片 ios开发

（转载自：http://blog.csdn.net/wang631106979/article/details/52473985）

如果移动端访问不佳，可以访问我的个人博客

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

hbblzjy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android动态点点省略号闪烁效果的等待控件
10-09
Android动态点点省略号效果的等待控件,可直接运行查看效果
仿照ios的loading
04-21
仿ios的loading动画
iOS 实现简单的加载等待动画示例（思路与实现）
08-30
本篇文章主要介绍了iOS 实现简单的加载等待动画示例（思路与实现），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iOS loading 多张图片组合动画
07-11
iOS loading 多张图片组合动画，集成起来比较简单，效果也不错
一步步教你写Slack的Loading动画
01-05
项目地址：https://github.com/JeasonWong/SlackLoadingView 老规矩，先上效果。 图好大。。 说下第一眼看到这个动画后的思路： +两根平行线，要用到直线方程 y=kx+b +另外两根平行线，与之前两根平行线的斜率相乘为-1，即k1*k2=-1 +线条做圆周运动就是k值的不断变化 +然后就是简单的线条长度变化 我相信很多人第一眼会和我有类似的思路，但是当我上了个厕所后意识到我想复杂了~ 说下上完厕所后的思路： 不要想着线条是斜的，就是一个普通的线段，一个LineTo搞定（startX和stopX一样，仅Y不同） 线条的垂直更容易，直接Canvas翻转
手摸手教你写Slack的Loading动画
未来很长，但我会努力的走下去。
11-07 492
手摸手教你写Slack的Loading动画
iOS动画进阶 - 手摸手教你写 Slack 的 Loading 动画
W_C__L的博客
09-08 6593
如果移动端访问不佳，可以访问我的个人博客 前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画，看着挺炫，但是是安卓版的，寻思的着仿造着写一篇iOS版的，下面是我写这个动画的分解~ 老规矩先上图和demo地址：刚看到这个动画的时候，脑海里出现了两个方案，一种是通过drawRect画出来，然后配合CADisplayLink不停的绘制线的样式；第二种是通过CAShapeL
iOS开发（OC）——一句话搞定加载等待动画
菜鸟历程
11-27 3606
.h文件 #import &amp;amp;amp;lt;UIKit/UIKit.h&amp;amp;amp;gt; //加载的状态(加载中，加载成功，加载失败) typedef enum : NSUInteger { Loading_suffix, Success_suffix, Faild_suffix, } RequestResult; @interface JZLoadingViewPacket : UI...
iOS 开发之简单实现 Loading 动画效果
热门推荐
shenjie12345678的专栏
10-14 2万+
最近有朋友we'w
ios开发之简单实现loading动画效果
zlyapple的博客
09-11 1670
类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的，是不是就是一个gif图片呢！我的回答当然是否定了，当然不排除也有人用gif图片啊！下面我就来罗列三种实现loading动画效果的方法。 方法一：使用UIImageView自带的方法来实现，这也是我推荐的实现方法。 [objc] view plaincopy NSMuta
iOS动画教你编写Slack的Loading动画进阶篇
01-05
前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画，看着挺炫，但是是安卓版的，寻思的着仿造着写一篇iOS版的，下面是我写这个动画的分解~  老规矩先上图和demo地址： 刚看到这个动画的时候，脑海里出现了两个方案，一种是通过drawRect画出来，然后配合CADisplayLink不停的绘制线的样式；第二种是通过CAShapeLayer配合CAAnimation来实现动画效果。再三考虑觉得使用后者，因为前者需要计算很多，比较复杂，而且经过测试前者相比于后者消耗更多的CPU，下面将我的思路写下来： 相关配置和初始化方法 在写这个动画之前，我们把先需要的属性写好，
IOS动画——文字书写效果
04-06
此代码是IOS平台用xcode实现文字书写效果，以及动画。
ios-简单心形线条动画.zip
07-11
使用CAShapeLayer根据UIBezierPath各个路径的点做线条动画，代码简单易懂。
iOS 动画实战之钓鱼小游戏实例代码
01-20
前言 最近写了一款钓鱼小游戏，自己平时也没做过游戏，本来以为这种游戏要用cocos2d什么的实现，后来发现其实动画就可以实现很棒的效果，先看看效果图。 思维导图 首先我们看下思维导图，本游戏主要分为4大块，其中鱼的实现最为复杂 思维导图 项目结构 准备工作 首先将需要的图准备好，这个鱼其实就是一组图片，图片大小固定，每一帧位置变化，所以看起来 是一个上下游动的鱼。 单张图片 鱼钩模块 摆动动画 鱼钩的摆动范围是[M_PI/4.0,-M_PI/4.0] (垂直向下为0度，顺时针为正)，这里利用了计时器进行角度的更改,计时器用的CADisplayLink，它是一个和屏幕刷新率一致的定时器
ios-app启动页动画效果.zip
07-11
app启动页动画效果，图片的横向移动。 源码地址：https://github.com/sunjinshuai/AppLaunchAnimation 如果，觉得好，请给个star。 谢谢。
IOS登录页面动画、转场动画开发详解
01-20
动画效果 需求分析 分析方法 下载这个gif动图，用mac默认的打开方式打开这个gif图(双击图片即可)，效果如下 鼠标选中红色箭头所指的位置，然后按住键盘方向键下键，图片会以缓慢的可控的速度播放，便于分析动画的构成。 小tips：macos系统想正常浏览一个gif动图，可以鼠标单击图片后按空格，也可以选择用浏览器打开，gif图会以正常速度播放。 技术点分析 如何生成一个动画让控件执行？ 现流行的方式主要有三种： 1、基本动画 2、核心动画 3、三方框架——POP框架(由Facebook开发) 它们的主要差别： 1、控件的位置、大小等是不是真的发生了改变？ 基本动画、pop动画，是给控件添加
详解IOS图层转场动画
09-02
主要为大家详细介绍了IOS图层转场动画， CATransition类实现层的转场动画，能够为层提供移出屏幕和移入屏幕的动画效果，感兴趣的小伙伴们可以参考一下
iOS开发中使用屏幕旋转功能的相关方法
01-04
加速计是整个IOS屏幕旋转的基础，依赖加速计，设备才可以判断出当前的设备方向，IOS系统共定义了以下七种设备方向：   代码如下: typedef NS_ENUM(NSInteger, UIDeviceOrientation) {     UIDeviceOrientationUnknown,     UIDeviceOrientationPortrait,            // Device oriented vertically, home button on the bottom     UIDeviceOrientationPortraitUpsideDown,  // Devi
iOS动画效果和实现
01-31
动画效果提供了状态或页面转换时流畅的用户体验，在iOS系统中，咱们不需要自己编写绘制动画的代码，Core Animation提供了丰富的api来实现你需要的动画效果。UIKit只用UIView来展示动画,动画支持UIView下面的这些属性改变：下面是点击改变后的效果（两种）：动画的常量有一下四种[self.viewexchangeSubviewAtIndex:1 withSubviewAtIndex:0];先添加两个view,一个redview一个yellowview这样看起来
pick 0 for noise-slack
最新发布
09-15
对于噪声弹性（noise-slack），选择0。这表示我不会在这一方面容忍任何噪音。这是因为噪声可以对我们的日常生活和健康产生负面影响。 噪声可以导致耳膜受损、听力损失和心理健康问题。长期暴露在噪音环境中可能会导致压力、焦虑和失眠等问题。 此外，噪声还会影响我们的集中力和工作效率。在嘈杂的环境中，人们很难专注于任务，并且可能会出现错误和混乱。这会对我们的工作和学习产生负面影响。 更重要的是，噪声对我们的生活质量和幸福感产生负面影响。一个安静的环境可以让我们更好地放松、休息和充电，而不是受到噪音的干扰和打扰。 因此，对于噪音弹性，我会选择0，这意味着我将采取一切必要的措施来减少和消除噪音，以确保一个安静、舒适、健康和高效的生活环境。这可能包括使用隔音材料、佩戴耳塞或耳机、寻找安静的工作和居住地点等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值