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

移动端访问不佳，请访问我的个人博客

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

先上效果图和github地址，有其他好的动效大家也可以交流~

动效的原地址，在uimovement网站上看到这个动效时感觉特别6，就想自己实现一下，费了很长时间，换了几种方案终于实现出来了，下面是实现的步骤：

分析动效

写一个动效的第一步就应该仔细的去分析它，把它的每一帧展开来看，找一个最合适的方式来实现它，下面是我分析过程：

  • 看到曲线，肯定会想到CAShapeLayer和UIBezierPath这一对搭档，相对于CoreGraphics而言，它即简单有高效；
  • 曲线的拉拽效果可以用 CADisplayLink加上一个参考的view，以参考view为UIBezierPath的一个controlPoint，移动参考view来实现曲线拉拽的效果；
  • 曲线的回弹效果考虑再三后决定使用CAKeyframeAnimation配合CAShapeLayer来使用，本来打算使用CASpringanimation来实现，但是考虑它是iOS9出的，而我的轮子最低支持iOS8，就放弃用它了；
  • 小球是实现和弹出就相对简单了，使用CAShapeLayer来实现小球，用CABasicAnimation来实现小球的移动；
  • 小球外层圆环旋转的效果，首先也是用CAShapeLayer来实现圆环，然后配合CABasicAnimation控制CAShapeLayer的strokeEnd和transform.rotation.z一直来实现外层圆环旋转的效果；
  • 最后就是比较复杂的就是小球和曲线的连接处的处理，我的实现方式是通过CADisplayLink在动画的过程中实时的去监听小球和曲线的位置，计算出UIBezierPath用一个CAShapeLayer来精确的连接小球和曲线部分。

好了，以上是大概过程，如果大家有另外的更好的实现方式，也可以一起来讨论。

绘制曲线和曲线的拉拽

我们用CAShapeLayer和UIBezierPath这一对搭档来实现曲线的绘制，下面以一个参考view来给大家演示一下，下面是主要代码和效果图：

// 通过传递的y坐标来绘制曲线
func wave(_ y: CGFloat, execute: CGFloat) {
    self.execute = execute
    waveLayer.path = wavePath(x: 0, y: y)
    if !isAnimation {
        var trans = CGAffineTransform.identity
        trans = trans.translatedBy(x: 0, y: y)
        reference.transform = trans
    }
}

// 计算path
private func wavePath(x: CGFloat, y: CGFloat) -> CGPath {
    let w = frame.width
    let path = UIBezierPath()
    if y < execute {
        path.move(to: .zero)
        path.addLine(to: .init(x: w, y: 0))
        path.addLine(to: .init(x: w, y: y))
        path.addLine(to: .init(x: 0, y: y))
        path.addLine(to: .zero)
    }else {
        path.move(to: .zero)
        path.addLine(to: .init(x: w, y: 0))
        path.addLine(to: .init(x: w, y: execute))
        path.addQuadCurve(to: .init(x: 0, y: execute), controlPoint: .init(x: w/2, y: y))
        path.addLine(to: .zero)
    }
    return path.cgPath
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

曲线的回弹效果

曲线的回弹使用CAKeyframeAnimation加到参考的view上，然后用CADisplayLink监听参考view的坐标做为controlPoint来实现曲线的回弹效果，下面是主要代码和效果图：

// 开始动画
func startAnimation() {
    isAnimation = true
    addDisPlay()
    boundAnimation(x: 0, y: execute)
}

// CAKeyframeAnimation动画
private func boundAnimation(x: CGFloat, y: CGFloat) {
    let bounce = CAKeyframeAnimation(keyPath: "transform.translation.y")
    bounce.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
    bounce.duration = bounceDuration
    bounce.values = [
        reference.frame.origin.y,
        y * 0.5,
        y * 1.2,
        y * 0.8,
        y * 1.1,
        y
    ]
    bounce.isRemovedOnCompletion = true
    bounce.fillMode = kCAFillModeForwards
    bounce.delegate = self
    reference.layer.add(bounce, forKey: "return")
}

// 添加和移除CADisplayLink
private func addDisPlay() {
    displayLink = CADisplayLink(target: self, selector: #selector(displayAction))
    displayLink?.add(to: .main, forMode: .commonModes)
}

private func removeDisPlay() {
    displayLink?.invalidate()
    displayLink = nil
}

// CADisplayLink绑定的方法
@objc private func displayAction() {
    if let frame = reference.layer.presentation()?.frame {
        DispatchQueue.global().async {
            let path = self.displayWavePath(x: 0, y: frame.origin.y + referenceHeight/2)
            DispatchQueue.main.async {
                self.waveLayer.path = path
            }
        }
    }
}

// 通过这个方法获取path
private func displayWavePath(x: CGFloat, y: CGFloat) -> CGPath {
    let w = frame.width
    let path = UIBezierPath()
    path.move(to: .zero)
    path.addLine(to: .init(x: w, y: 0))
    path.addLine(to: .init(x: w, y: execute))
    path.addQuadCurve(to: .init(x: 0, y: execute), controlPoint: .init(x: w/2, y: y))
    path.addLine(to: .zero)
    return path.cgPath
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

外层圆环的动画

小球和外层圆环我们用CAShapeLayer来绘制，这里主要讲的是动画的实现，动画主要由两个部分组成：

  • CABasicAnimation控制外层圆环的strokeEnd的动画；
  • CABasicAnimation控制外层圆环的transform.rotation.z的旋转动画；
外层圆环的strokeEnd动画 外层圆环的transform.rotation.z的旋转动画

下面是关键代码：

func animation() {
    self.isHidden = false
    let rotate = CABasicAnimation(keyPath: "transform.rotation.z")
    rotate.fromValue = 0
    rotate.toValue = M_PI * 2
    rotate.duration = 1
    rotate.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    rotate.repeatCount = HUGE
    rotate.fillMode = kCAFillModeForwards
    rotate.isRemovedOnCompletion = false
    self.add(rotate, forKey: rotate.keyPath)
    strokeEndAnimation()
}

func strokeEndAnimation() {
    let endPoint = CABasicAnimation(keyPath: "strokeEnd")
    endPoint.fromValue = 0
    endPoint.toValue = 1
    endPoint.duration = 1.8
    endPoint.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    endPoint.repeatCount = HUGE
    endPoint.fillMode = kCAFillModeForwards
    endPoint.isRemovedOnCompletion = false
    endPoint.delegate = self
    add(endPoint, forKey: endPoint.keyPath)
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

小球上升和连接处的处理

小球上升动画很简单，一个CABasicAnimation动画就实现了，主要麻烦的是连接处的动画实现，我的方案是在小球动画过程中通过CADisplayLink实时监听小球和参考view的位置，计算出贝斯尔曲线，然后通过一个名为linkLayer: CAShapeLayer的layer来连接它们，然后让它们在特定的地方断开，下面是主要代码和效果图：

@objc private func displayAction() {
    let offY = ballLayer.circleLayer.presentation()?.frame.origin.y
    let frame1 = ballLayer.frame
    let frame2 = wavelayer.reference.layer.presentation()?.frame
        if let offY = offY, let frame2 = frame2 {
            DispatchQueue.global().async {
                // 判断是球是向上还是下，false为上,速度快时，获取的位置不及时，向下时需要调整位置
                let isIncrement = (offY - self.previousOffY) > 0
                let path = UIBezierPath()
                let x1 = frame1.origin.x + (isIncrement ? 4 : 0)
                let y1 = frame1.origin.y + offY
                let w1 = frame1.size.width - (isIncrement ? 8 : 0)
                let h1 = frame1.size.height
                let x2 = frame2.origin.x
                let y2 = frame2.origin.y
                let w2 = frame2.size.width
                let h2 = frame2.size.height
                let subY = y2 - y1
                // y1和y2的间距
                let subScale = subY/self.execute/2
                // 断开的距离为10
                let executeSub = self.ballLayer.circleLayer.moveUpDist + offY
                if executeSub < 10 {
                    if !isIncrement {
                        let executeSubScale = executeSub/10
                        path.move(to: .init(x: x1 - 15, y: y2 + h2/2 + 15))
                        path.addLine(to: .init(x: x1 + w1 + 15, y: y2 + h2/2 + 15))
                        path.addQuadCurve(to: .init(x: x1 - 15, y: y2 + h2/2 + 15), controlPoint: .init(x: x1 + w1/2, y: y2 + h2/2 - self.execute/6 * executeSubScale))
                    }
                }else {
                    path.move(to: .init(x: x2 , y: y2 + h2))
                    path.addLine(to: .init(x: x2 + w2, y: y2 + h2))
                    path.addQuadCurve(to: .init(x: x1 + w1, y: y1 + h1/2), controlPoint: .init(x: x1 + w1 - w1*2*subScale, y: y1 + (y2 - y1)/2 + h1/2 + h2/2))
                    path.addLine(to: .init(x: x1, y: y1 + h1/2))
                    path.addQuadCurve(to: .init(x: x2 , y: y2 + h2), controlPoint: .init(x: x1 + w1*2*subScale, y: y1 + (y2 - y1)/2 + h1/2 + h2/2))
                    if y1 + h1 <= self.execute, isIncrement {
                        DispatchQueue.main.async {
                            self.wavelayer.startDownAnimation()
                        }
                    }
                }
                DispatchQueue.main.async {
                    self.linkLayer.path = path.cgPath
                }
                self.previousOffY = offY
            }
        }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

我觉得我这个地方的处理不是很好，但是简单粗暴的解决了问题，如果大家有更好的建议，可以提出来，大家一起交流学习~

时间： 2024-07-30 20:30:22

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

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

最近撸了一个上拉刷新的小轮子,只要遵循一个协议就能自定义自己动效的上拉刷新和加载,我自己也写了几个动效进去,下面是一个比较好的动效的实现过程 先上效果图和github地址,完整代码个demo和进入查看,有其他好的动效大家也可以学习交流~ 分析动效 写一个动效的第一步就应该仔细的去分析它,把它的每一帧展开来看,找一个最合适的方式来实现它,我们可以把以上动画分解成以下三个步骤: 箭头的绘制和动效 圆环的绘制和小点的旋转 对勾的绘制和动画 以下是会用到主要的类: CAShapeLayer UIBezi

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!