Swift实现一个简单的加载动画,以及动画的详解

一.组动画的创建

首先创建一个组动画,也就是大小变化和透明度变化的动画。

// 大小变化
        let scaleAnimation = CAKeyframeAnimation(keyPath: "transform.scale")

        scaleAnimation.keyTimes = [0, 0.5, 1]
        scaleAnimation.values = [1, 0.4, 1]
        scaleAnimation.duration = duration

        // 透明度变化
        let opacityAnimaton = CAKeyframeAnimation(keyPath: "opacity")
        //该属性是一个数组,用以指定每个子路径的时间。
        opacityAnimaton.keyTimes = [0, 0.5, 1]
        //values属性指明整个动画过程中的关键帧点,需要注意的是,起点必须作为values的第一个值。
        opacityAnimaton.values = [1, 0.3, 1]
        opacityAnimaton.duration = duration

        // 组动画
        let animation = CAAnimationGroup()
        //将大小变化和透明度变化的动画加入到组动画
        animation.animations = [scaleAnimation, opacityAnimaton]
        //动画的过渡效果
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        //动画的持续时间
        animation.duration = duration
        //设置重复次数,HUGE可看做无穷大,起到循环动画的效果
        animation.repeatCount = HUGE
        //运行一次是否移除动画
        animation.removedOnCompletion = false

需要注意的是上面的animation.timingFunction是动画的过渡效果,里面有这几种,你可以根据自己的需求选择

1. kCAMediaTimingFunctionLinear//线性

2. kCAMediaTimingFunctionEaseIn//淡入

3. kCAMediaTimingFunctionEaseOut//淡出

4. kCAMediaTimingFunctionEaseInEaseOut//淡入淡出

5. kCAMediaTimingFunctionDefault//默认

二.创建圆形图层

  // Draw circles
        for var i = 0; i < 8; i++ {
            let circle = creatCircle(angle: CGFloat(M_PI_4 * Double(i)),
                size: circleSize,
                origin: CGPoint(x: x, y: y + 50),
                containerSize: size,
                color: color)
            animation.beginTime = beginTime + beginTimes[i]
            circle.addAnimation(animation, forKey: "animation")
            layer.addSublayer(circle)
        }

这里面是创建了八个小圆,将组动画赋予这八个圆,并添加在这个视图的Layer上,creatCircle 创图层的这个方法如下

 func creatCircle(# angle: CGFloat, size: CGFloat, origin: CGPoint, containerSize: CGSize, color: UIColor) -> CALayer {
        let radius = containerSize.width/2
        let circle = createLayerWith(size: CGSize(width: size, height: size), color: color)
        let frame = CGRect(
            x: origin.x + radius * (cos(angle) + 1) - size / 2,
            y: origin.y + radius * (sin(angle) + 1) - size / 2,
            width: size,
            height: size)
        circle.frame = frame

        return circle

    }

上面anglesizeorigincontainerSizecolor,都是传入的参数,-> CALayer 这个在Swift中代表的是返回类型,这里的返回类型就是CALayer,不像在OC中返回类型写在方法的前面- (CALayer *) ...

这里func creatCircle(# angle: CGFloat,里面有#,代表的就是在函数(或者方法)的参数名前添加”#”,可以使该参数拥有相同的本地参数名和外部参数名。(注:在方法中,第二个及后续的参数,默认是具有和内部参数一致的外部参数名的,只有第一个参数没有,可以使用”#”符号来强制给第一个参数添加与本地参数名一致的外部参数名,但是不推荐。)

三.创建CAShapeLayer

也就是上面的createLayerWith这个方法,如下

 func createLayerWith(# size: CGSize, color: UIColor) -> CALayer {
        //创建CAShapeLayer,如果对CAShapeLayer比较陌生,简单介绍下CAShapeLayer
        let layer: CAShapeLayer = CAShapeLayer()
        //创建贝塞尔曲线路径(CAShapeLayer就依靠这个路径渲染)
        var path: UIBezierPath = UIBezierPath()
        //addArcWithCenter,顾名思义就是根据中心点画圆(OC语法的命名优越感又体现出来了0.0),这几个参数
        /**
        center: CGPoint 中心点
        radius: CGFloat 半径
        startAngle: CGFloat 起始的弧度
        endAngle: CGFloat 结束的弧度
        clockwise: Bool 绘画方向 true:顺时针 false:逆时针
        */
        path.addArcWithCenter(CGPoint(x: size.width / 2, y: size.height / 2),
                radius: size.width / 2,
                startAngle: 0,
                endAngle: CGFloat(2 * M_PI),
                clockwise: false);
        //线宽,如果画圆填充的话也可以不设置
        layer.lineWidth = 2
        //填充颜色,这里也就是圆的颜色
        layer.fillColor = color.CGColor
        //图层背景色
        layer.backgroundColor = nil
        //把贝塞尔曲线路径设为layer的渲染路径
        layer.path = path.CGPath

        return layer;
    }

CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。你指定诸如颜色和线宽等属性,用CGPath来定义想要绘制的图形,最后CAShapeLayer就自动渲染出来了。当然,你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径,相比直下,使用CAShapeLayer有以下一些优点:

  1. 渲染快速。CAShapeLayer使用了硬件加速,绘制同一图形会比用Core Graphics快很多。
  2. 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形(CALyercontents属性,如果要给contents赋值就是layer.contents = (__bridge id)image.CGImage,所以占用内存大),所以无论有多大,都不会占用太多的内存。
  3. 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。
  4. 不会出现像素化。当你给CAShapeLayer做3D变换时,它不像一个有寄宿图的普通图层一样变得像素化。

到此,运行我们就可以看到效果了,如下

时间: 2024-10-06 00:53:51

Swift实现一个简单的加载动画,以及动画的详解的相关文章

phpcms加载系统类与加载应用类之区别详解

<?php 1. 加载系统类方法load_sys_class($classname, $path = ''", $initialize = 1)系统类文件所在的文件路径:/phpcms/libs/classes/文件夹下参数说明:@param string $classname 类名@param string $path 扩展地址@param intger $initialize 是否初始化 例子:如要调用系统Form类的生成验证码函数:checkcode() ,看下面例子pc_base:

32.自己写的一个简单的加载插件

js /* loader.js version:1.0 author:lgw */ (function($) { "use strict"; $.fn.loader = function(options) { return this.each(function(e) { var that = $(this) $.fn.loader.defaultOptions = { isLoading:false, type:"ball-beat", callBack: func

iOS开发&gt;学无止境 - Cell异步图片加载优化,缓存机制详解

作者:勤奋的笨老头 网址:http://www.jianshu.com/p/02ab2b74c451 最近研究了一下UITbleView中异步加载网络图片的问题,iOS应用经常会看到这种界面.一个tableView上显示一些标题.详情等内容,在加上一张图片.这里说一下这种思路. 为了防止图片多次下载,我们需要对图片做缓存,缓存分为内存缓存于沙盒缓存,我们当然两种都要实现. 由于tableViewCell是有重用机制的,也就是说,内存中只有当前可见的cell数目的实例,滑动的时候,新显示cell会

iOS Cell异步图片加载优化,缓存机制详解

最近研究了一下UITbleView中异步加载网络图片的问题,iOS应用经常会看到这种界面.一个tableView上显示一些标题.详情等内容,在加上一张图片.这里说一下这种思路. 为了防止图片多次下载,我们需要对图片做缓存,缓存分为内存缓存于沙盒缓存,我们当然两种都要实现.由于tableViewCell是有重用机制的,也就是说,内存中只有当前可见的cell数目的实例,滑动的时候,新显示cell会重用被滑出的cell对象.这样就存在一个问题: 一般情况下在我们会在cellForRow方法里面设置ce

图片延时加载jquery.inview.js用法详解

我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.jpg这样,这就是图片延时加载. 具体实现技术如下: 1)引入jquery库文件: 2)引入jquery.inview.min.js文件: 3)html结构: <a href="http://q.wan.com" target="_blank" title=&quo

一个简单的加载动画,js实现

简单效果图: html: <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> css: .box{ width: 200px; height: 80px; margin: 200px auto; bor

用C3中的animation和transform写的一个模仿加载的时动画效果

用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h2>用C3中的animation和transform写的一个模仿加载的时动画效果</h2> <div class="demo"> <div></div> <div></div> <div></d

一个加载时带动画效果的ListBoxItem

原文:一个加载时带动画效果的ListBoxItem 今天我们来谈一下ListBoxItem这个控件,ListBoxItem是直接从ContentControl继承而来的,所以可以添加到任何具有Content属性的控件中去,常见的ListBoxItem可以放到ListBox中,也可以放到ItemsControl中去,ListBoxItem可以横向和TreeViewItem进行比较,只不过TreeViewItem是直接从HeaderedItemsControl继承过来的,然后再继承自ItemsCon

【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式. 您可能感兴趣的相关文章 20个非常绚丽的 CSS3 特性应用演示 23个纯 CSS3 打造的精美LOGO图案 35个让人惊讶的 CSS3 动画效果演示 推荐12个漂亮的 CSS3