iOS 简约加载动画详解

最新推荐文章于 2024-08-20 02:18:10 发布

默然相爱鱼鱼鱼

最新推荐文章于 2024-08-20 02:18:10 发布

阅读量741

点赞数

分类专栏： iOS开发技巧

iOS开发技巧专栏收录该内容

117 篇文章 1 订阅

订阅专栏

前言

想到写加载动画原因:是因为在我们现在的项目中加载动画用的是第三方库并且还存在一些问题，比如是放在window上的所以如果网络状态不好会造成用户无法操作的问题,还有就是比较难看，不符合现在的审美风格啦~

先上效果图

完成后

可以看到三个圆的交替运动，以及圆颜色的渐变，球的位置改变后它的颜色也和所在位置的球的颜色保持了一致。

1.圆的位置。

三个圆形的位置

首先我们先来看分析圆的位置，三个圆的大小相同每个圆的间隔是一个圆的大小，三个圆的圆心分别是(5,5),(25,5),(45,5)。(大家忽略坐标系的负数,因为iOS的原点在左上角啊)

2.三个圆运动的轨迹。

圆1的运动轨迹，从左到右

其实我们可以发现这段曲线时由两个半圆组成的.
两个半月的圆心分别是(15,5).(35,5)直径是第一个圆心到第二圆的心的距离等于20。知道是怎样画出来的之后我们就可以使用贝塞尔曲线来完成它

 
        let path1 = UIBezierPath.init() 
       
        //指定圆形的圆心和开始结束的角度   clockwise:是否顺时针 
       
        path1.addArc(withCenter: otherRoundCenter1, radius: 10, startAngle: -CGFloat(M_PI), endAngle: 0, clockwise:  
        true 
        )       
       
        let path1_1 = UIBezierPath.init() 
       
        path1_1.addArc(withCenter: otherRoundCenter2, radius: 10, startAngle: -CGFloat(M_PI), endAngle: 0, clockwise:  
        false 
        ) 
       
        //两段弧线拼接在一起 
       
        path1.append(path1_1)

我们把两个弧线拼接在一起就是球1的运行轨迹啦。

圆2的轨迹，从右向左

圆3的轨迹，从右向左

再看球2和球3运行轨迹其实是一样的原理都是一个半圆只不过圆心、开始角度和结束角度不同,就不再详细的说了

 
        //球二的轨迹 
       
        let path2 = UIBezierPath.init() 
       
        path2.addArc(withCenter: otherRoundCenter1, radius: 10, startAngle: 0, endAngle: -(CGFloat(M_PI)), clockwise:  
        true 
        ) 
       
        //球三的轨迹 
       
        let path3 = UIBezierPath.init() 
       
        path3.addArc(withCenter: otherRoundCenter2, radius: 10, startAngle: 0, endAngle: -CGFloat(M_PI), clockwise:  
        false 
        )

最后上一下整个的路径图

整体路径图

橘黄色是圆1的路径，黑色是圆2的路径，红色为圆3的路径

现在我们路线都规划好了，当然就要小球动起来了呗
这个时候我们需要用到CAKeyframeAnimation出码了直接上代码

 
        //position 告诉帧动画我们要改变它的位置 
       
        let anim = CAKeyframeAnimation.init(keyPath:  
        "position" 
        ) 
       
        //路径当然就是我们上面画的贝塞尔曲线啦 
       
        anim.path = path.cgPath 
       
        //完成后要不要移除 
       
        anim.isRemovedOnCompletion =  
        false 
       
        //设置结束状态，一直保持结束的状态 
       
        anim.fillMode = kCAFillModeForwards 
       
        //让动画变得均匀 
       
        anim.calculationMode = kCAAnimationCubic 
       
        //重复的次数，统一定义就好 
       
        anim.repeatCount = animRepeatTime 
       
        //持续的时间 
       
        anim.duration = animTime 
       
        anim.delegate = self 
       
        //动画快慢，这里设置为缓进缓出 
       
        anim.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut) 
       
        //添加到圆1上 
       
        round1.layer.add(anim, forKey:  
        "animation" 
        )

需要注意的是我们创建的贝塞尔path需要转成cgPath再赋值给path
圆2和圆3的动画代码和圆1一样，只不过路径不同这里就不在贴代码了
现在咱们圆的动画效果做完了，还需要在加上圆颜色的渐变就大功告成，

3.圆的颜色渐变

但是圆颜色渐变怎么做呢,在之前我们做颜色渐变的时候，基本上是用的 UIViewAnimation动画来做的，因为简单方便，现在我们需要重复还要和轨迹动画保持一致性所以这个不可行，那用什么呢用CAKeyframeAnimation的兄弟
CABasicAnimation我们可以用他的keypath：backgroundColor来修改哈哈，如圆1我们就需要让他从圆1的颜色变成员圆2的颜色就可以啦，知道了怎么做那代码是简单啦~

 
        //大体的用法和上面是一样的 
       
        let colorAnim = CABasicAnimation.init(keyPath:  
        "backgroundColor" 
        ) 
       
        colorAnim.toValue = toColor.cgColor 
       
        colorAnim.fromValue = fromColor.cgColor 
       
        colorAnim.duration = time 
       
        //不需要反动画 
       
        colorAnim.autoreverses =  
        false 
       
        colorAnim.fillMode = kCAFillModeForwards; 
       
        colorAnim.isRemovedOnCompletion =  
        false 
        ; 
       
        colorAnim.repeatCount = animRepeatTime 
       
        view.layer.add(colorAnim, forKey:  
        "backgroundColor" 
        )

圆2和圆3的颜色动画也是相同只是toValue和fromValue不同。这里需要注意的是颜色需要转成cgColor，不然是不会有效果的。

4.总结

刚开始做的时候自己画图了确定运动的轨迹花了一些时间。这些工作做完之后只要思路清晰写代码还是很快的。(上面圆的轨迹图等自己做的时候用手的画的比较难看就不上了，所以用作图工具花了下好像也比较难看哈哈)。
demo我上传到github上了，大家可以看一下，一起共同学习共同进步，喜欢的话就给个star吧。
github地址
OC版也上传到github上了，有需要的小伙伴去看看吧