iOS动画进阶 - 实现炫酷的上拉刷新动效(二)

最近撸了一个上拉刷新的小轮子,只要遵循一个协议就能自定义自己动效的上拉刷新和加载,我自己也写了几个动效进去,下面是一个比较好的动效的实现过程

先上效果图和github地址,完整代码个demo和进入查看,有其他好的动效大家也可以学习交流~

分析动效

写一个动效的第一步就应该仔细的去分析它,把它的每一帧展开来看,找一个最合适的方式来实现它,我们可以把以上动画分解成以下三个步骤:

  1. 箭头的绘制和动效
  2. 圆环的绘制和小点的旋转
  3. 对勾的绘制和动画

以下是会用到主要的类:

  • CAShapeLayer
  • UIBezierPath
  • CABasicAnimation
  • CAKeyframeAnimation
  • DispatchSourceTimer

箭头的绘制和动效

剪头的绘制我们用CAShapeLayer配合UIBezierPath来实现,把箭头分解成两个部分,一个是垂直的线和箭头头的部分,方便实现之后的动画效果,下面是绘制主要的代码和效果图:

// 绘制垂直的线
private func initLineLayer() {
    let width  = frame.size.width
    let height = frame.size.height
    let path = UIBezierPath()
    path.move(to: .init(x: width/2, y: 0))
    path.addLine(to: .init(x: width/2, y: height/2 + height/3))
    lineLayer = CAShapeLayer()
    lineLayer?.lineWidth   = lineWidth*2
    lineLayer?.strokeColor = color.cgColor
    lineLayer?.fillColor   = UIColor.clear.cgColor
    lineLayer?.lineCap     = kCALineCapRound
    lineLayer?.path        = path.cgPath
    lineLayer?.strokeStart = 0.5
    addSublayer(lineLayer!)
}

// 绘制箭头的头部
private func initArrowLayer() {
    let width  = frame.size.width
    let height = frame.size.height
    let path = UIBezierPath()
    path.move(to: .init(x: width/2 - height/6, y: height/2 + height/6))
    path.addLine(to: .init(x: width/2, y: height/2 + height/3))
    path.addLine(to: .init(x: width/2 + height/6, y: height/2 + height/6))
    arrowLayer = CAShapeLayer()
    arrowLayer?.lineWidth   = lineWidth*2
    arrowLayer?.strokeColor = color.cgColor
    arrowLayer?.lineCap     = kCALineCapRound
    arrowLayer?.lineJoin    = kCALineJoinRound
    arrowLayer?.fillColor   = UIColor.clear.cgColor
    arrowLayer?.path        = path.cgPath
    addSublayer(arrowLayer!)
}

然后是箭头动画实现,我们分别对线和箭头头部进行动画,通过CABasicAnimation对它们的strokeStartstrokeEnd进行控制来实现动画,下面是效果图和主要代码:

// 箭头的动画
public func startAnimation() -> Self {
    let start = CABasicAnimation(keyPath: "strokeStart")
    start.duration  = animationDuration
    start.fromValue = 0
    start.toValue   = 0.5
    start.isRemovedOnCompletion = false
    start.fillMode  = kCAFillModeForwards
    start.delegate    = self
    start.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

    let end = CABasicAnimation(keyPath: "strokeEnd")
    end.duration  = animationDuration
    end.fromValue = 1
    end.toValue   = 0.5
    end.isRemovedOnCompletion = false
    end.fillMode  = kCAFillModeForwards
    end.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

    arrowLayer?.add(start, forKey: "strokeStart")
    arrowLayer?.add(end, forKey: "strokeEnd")

    return self
}

// 线的动画
private func addLineAnimation() {
    let start = CABasicAnimation(keyPath: "strokeStart")
    start.fromValue = 0.5
    start.toValue = 0
    start.isRemovedOnCompletion = false
    start.fillMode  = kCAFillModeForwards
    start.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    start.duration  = animationDuration/2
    lineLayer?.add(start, forKey: "strokeStart")

    let end = CABasicAnimation(keyPath: "strokeEnd")
    end.beginTime = CACurrentMediaTime() + animationDuration/3
    end.duration  = animationDuration/2
    end.fromValue = 1
    end.toValue   = 0.03
    end.isRemovedOnCompletion = false
    end.fillMode  = kCAFillModeForwards
    end.delegate  = self
    end.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    lineLayer?.add(end, forKey: "strokeEnd")
}

// 通过delegate控制顺序
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
    if flag {
        if let anim = anim as? CABasicAnimation {
            if anim.keyPath == "strokeStart" {
                arrowLayer?.isHidden = true
                addLineAnimation()
            }else {
                lineLayer?.isHidden = true
                animationEnd?()
            }
        }
    }
}

圆环的绘制和小点的旋转

同样的圆环和小店的绘制我们也可以用CAShapeLayer配合UIBezierPath来实现

,下面是效果图和主要代码:

// 绘制外环
private func drawCircle() {
    let width  = frame.size.width
    let height = frame.size.height
    let path = UIBezierPath()
    path.addArc(withCenter: .init(x: width/2, y: height/2), radius: height/2, startAngle: 0, endAngle: CGFloat(Double.pi * 2.0), clockwise: false)
    circle.lineWidth   = lineWidth
    circle.strokeColor = color.cgColor
    circle.fillColor   = UIColor.clear.cgColor
    circle.path        = path.cgPath
    addSublayer(circle)
    circle.isHidden = true
}

// 绘制小点
private func drawPoint() {
    let width  = frame.size.width
    let path = UIBezierPath()
    path.addArc(withCenter: .init(x: width/2, y: width/2), radius: width/2, startAngle: CGFloat(Double.pi * 1.5), endAngle: CGFloat((Double.pi * 1.5) - 0.1), clockwise: false)
    point.lineCap     = kCALineCapRound
    point.lineWidth   = lineWidth*2
    point.fillColor   = UIColor.clear.cgColor
    point.strokeColor = pointColor.cgColor
    point.path        = path.cgPath
    pointBack.addSublayer(point)
    point.isHidden = true
}

旋转的实现,因为旋转的速度是有个加速的效果的,所以我们使用DispatchSourceTimer来控制选择的速度,下面是效果图和主要代码:

// 旋转的控制
public func startAnimation() {
    circle.isHidden = false
    point.isHidden  = false

    codeTimer = DispatchSource.makeTimerSource(queue: DispatchQueue.global())
    codeTimer?.scheduleRepeating(deadline: .now(), interval: .milliseconds(42))
    codeTimer?.setEventHandler(handler: { [weak self] in
        guard self != nil else {
            return
        }
        self!.rotated = self!.rotated - self!.rotatedSpeed
        if self!.stop {
            let count = Int(self!.rotated / CGFloat(Double.pi * 2))
            if (CGFloat(Double.pi * 2 * Double(count)) - self!.rotated) >= 1.1 {
                var transform = CGAffineTransform.identity
                transform = transform.rotated(by: -1.1)
                DispatchQueue.main.async {
                    self!.pointBack.setAffineTransform(transform)
                    self!.point.isHidden  = true
                    self!.check?.startAnimation()
                }
                self!.codeTimer?.cancel()
                return
            }
        }
        if self!.rotatedSpeed < 0.65 {
            if self!.speedInterval < 0.02 {
                self!.speedInterval = self!.speedInterval + 0.001
            }
            self!.rotatedSpeed = self!.rotatedSpeed + self!.speedInterval
        }
        var transform = CGAffineTransform.identity
        transform = transform.rotated(by: self!.rotated)
        DispatchQueue.main.async {
            self!.pointBack.setAffineTransform(transform)
        }
    })
    codeTimer?.resume()

    addPointAnimation()
}

// 点的变化
private func addPointAnimation() {
    let width  = frame.size.width
    let path = CABasicAnimation(keyPath: "path")
    path.beginTime = CACurrentMediaTime() + 1
    path.fromValue = point.path
    let toPath = UIBezierPath()
    toPath.addArc(withCenter: .init(x: width/2, y: width/2), radius: width/2, startAngle: CGFloat(Double.pi * 1.5), endAngle: CGFloat((Double.pi * 1.5) - 0.3), clockwise: false)
    path.toValue = toPath.cgPath
    path.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    path.duration = 2
    path.isRemovedOnCompletion = false
    path.fillMode = kCAFillModeForwards
    point.add(path, forKey: "path")
}

对勾的绘制和动画

对勾的绘制我们也是用CAShapeLayer配合UIBezierPath来绘制,下面是效果图和主要的代码:

// 绘制对号
private func drawCheck() {
    let width = Double(frame.size.width)
    check = CAShapeLayer()
    check?.lineCap   = kCALineCapRound
    check?.lineJoin  = kCALineJoinRound
    check?.lineWidth = lineWidth
    check?.fillColor = UIColor.clear.cgColor
    check?.strokeColor = color.cgColor
    check?.strokeStart = 0
    check?.strokeEnd = 0
    let path = UIBezierPath()
    let a = sin(0.4) * (width/2)
    let b = cos(0.4) * (width/2)
    path.move(to: CGPoint.init(x: width/2 - b, y: width/2 - a))
    path.addLine(to: CGPoint.init(x: width/2 - width/20 , y: width/2 + width/8))
    path.addLine(to: CGPoint.init(x: width - width/5, y: width/2 - a))
    check?.path = path.cgPath
    addSublayer(check!)
}

对勾的动画我们通过CAKeyframeAnimation来控制对勾的strokeStartstrokeEnd来实现对勾的动画,下面是效果图和主要代码:

// 对勾的动画
func startAnimation() {
    let start = CAKeyframeAnimation(keyPath: "strokeStart")
    start.values = [0, 0.4, 0.3]
    start.isRemovedOnCompletion = false
    start.fillMode = kCAFillModeForwards
    start.duration = 0.2
    start.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

    let end = CAKeyframeAnimation(keyPath: "strokeEnd")
    end.values = [0, 1, 0.9]

    end.isRemovedOnCompletion = false
    end.fillMode = kCAFillModeForwards
    end.duration = 0.3
    end.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

    check?.add(start, forKey: "start")
    check?.add(end, forKey: "end")
}

总结

关于小球的旋转我没有选择CADisplayLink而是选择的DispatchSourceTimer,是因为CADisplayLink会受到UITableview的影响,关于动画的实现需要耐心去调细节,实现方式也各种各样,大家如果有什么更好的建议或者建议大家可以提出来~

完整的代码,大家可以去github地址去下载,欢迎大家star和发表意见和贡献代码,有好的动效的话也可以提供,最后谢谢大家的阅读

时间: 2024-11-05 02:08:35

iOS动画进阶 - 实现炫酷的上拉刷新动效(二)的相关文章

iOS动画进阶 - 实现炫酷的上拉刷新动效

移动端访问不佳,请访问我的个人博客 最近撸了一个上拉刷新的小轮子,只要遵循一个协议就能自定义自己动效的上拉刷新和加载,我自己也写了几个动效进去,下面是一个比较好的动效的实现过程 先上效果图和github地址,有其他好的动效大家也可以交流~ 动效的原地址,在uimovement网站上看到这个动效时感觉特别6,就想自己实现一下,费了很长时间,换了几种方案终于实现出来了,下面是实现的步骤: 分析动效 写一个动效的第一步就应该仔细的去分析它,把它的每一帧展开来看,找一个最合适的方式来实现它,下面是我分析

iOS动画开发之五——炫酷的粒子效果

iOS动画开发之五--炫酷的粒子效果 在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休闲游戏,那个有一个东西可以帮到你:iOS的粒子效果引擎. 一.粒子发射器 iOS中的粒子效果有两部分组成,一部分为发射器,设置例子发射的宏观属性,另一部分是粒子单元,用于设置相应的粒子属性.粒子发射器是基于Layer层,没错,又是Layer,他的全名叫做: CA

iOS开发项目篇—32添加上拉刷新数据

iOS开发项目篇—32添加上拉刷新数据 一.简单说明 图片示意 思路:可以自定义一个view(示意xib),在view中添加一个label和菊花,指示状态.把这个view设置为tableView的底部视图. 二.实现过程 1.新建一个类和xib,关联 (1)创建一个类,让其继承自UIView (2)创建一个xib文件,用来定义上拉提示框 (3)定义的xib文件,把类和xib文件进行关联 2.实现代码: YYlaodStatusesFooter.h文件 1 // 2 // YYlaodStatus

新浪微博项目---首页技术点三.上拉刷新,下拉加载的实现(使用ios自带的小菊花实现)

一.上拉刷新,下拉加载的实现(使用ios自带的小菊花实现) 1.下拉刷新 #pragma mark ---集成下*拉刷新控件 -(void)setupDownRefresh { //1.添加刷新控件 UIRefreshControl *control = [[UIRefreshControl alloc] init]; //只有用户通过手动下拉刷新,才会触发UIControlEventValueChanged事件 [control addTarget:self action:@selector(

Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的实现 -- CardView.RecyclerView也是谷歌V7包下新增的控件,用来替代ListView的使用,在RecyclerView标准化了ViewHolder类似于ListView中convertView用来做视图缓存. RecyclerView的优点就是,他可以通过设置LayoutMan

MUI实现上拉刷新和下拉加载

  前  言 ha ha 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况): mui通过双webview解决这个DIV的拖动流畅度问题:拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画. mui的上拉加载和下拉刷新类似,都属于pullRefresh插件. 上拉刷新 主页面内容比较简单,只需要创建子页面即可: mui.init({ subpages:[{ u

Android ListView下拉/上拉刷新:设计原理与实现

 <Android ListView下拉/上拉刷新:设计原理与实现> Android上ListView的第三方开源的下拉刷新框架很多,应用场景很多很普遍,几乎成为现在APP的通用设计典范,甚至谷歌官方都索性在Android SDK层面支持下拉刷新,我之前写了一篇文章<Android SwipeRefreshLayout:谷歌官方SDK包中的下拉刷新>专门介绍过(链接地址:http://blog.csdn.net/zhangphil/article/details/4696537

使用MJRefresh遇到的一个问题,上拉刷新后tableview瞬间滑到最底部

最近用MJRefresh上拉刷新时遇到一个问题,就是上拉刷新后,tableview会瞬间滑到最底部,用户还要往回翻才能看到新刷出来的数据,体验十分不好.查了很久没找到原因,最后发现在refreshview停止动画前,我代码里调用了两次tableview reloaddata,抱着尝试的心理,我改了代码结构,删除了一个tableview reloaddata,结果还真被我蒙对了!原因不明,可能是tableview的一个小bug,也可能是我的 MJRefreshView版本太老,是时候更新一下这个第

Android——Xlistview上拉刷新下拉加载

配置网络权限+xutils包+gson包 代码如下: values下修改strings添加 直接粘 <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">XListView刷新</string> <string name="hello_world">Hello world!