果冻效果原理解析
github链接: https://github.com/sunshineAku/Aku_JellyEffect
有哪里需要改进的还请麻烦留言哦!
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/88ea8361d96e3a8a91348c16bc02ffc3.webp?x-image-process=image/format,png)
主要分三点:
1. 曲线路径的绘制
![](https://i-blog.csdnimg.cn/blog_migrate/40c0c8e5a1d05df928d9b06be2872031.webp?x-image-process=image/format,png)
通过这两段代码产生曲线:
// 起始点 moveToPoint
bezierPath.moveToPoint(CGPoint(x: redPointX, y: redPointY))
// 曲线结束 CurveToPoint 控制曲线弯曲位置 controlPoint
bezierPath.addQuadCurveToPoint(CGPoint(x: cyanPointX, y: cyanPointY), controlPoint: CGPoint(x: moveToPoint.x, y: moveToPoint.y))
2. 弹性动画效果
![](https://i-blog.csdnimg.cn/blog_migrate/9bfa5506855b6b4a6b74ef82f2c0435e.webp?x-image-process=image/format,png)
此段代码产生的弹性动画效果
![](https://i-blog.csdnimg.cn/blog_migrate/0c0fcdfd1cf576104dcefcc43f8f3461.webp?x-image-process=image/format,png)
3. 结合 1. 2. 两点产生果冻效果
曲线,弹性动画已经做完,现在要做的就是将两者结合起来做出类似果冻的效果了
给图中黄色的view添加拖拽手势, --->UIPanGestureRecognizer
让被拖拽的view跟随手指移动
![](https://i-blog.csdnimg.cn/blog_migrate/21ba2fbae5fdc18e296cdd92aee42bcb.webp?x-image-process=image/format,png)
在手指松开时执行弹性动画
![](https://i-blog.csdnimg.cn/blog_migrate/6e44d7c1d9be7d3a36cfb75f202c1ef7.webp?x-image-process=image/format,png)
重点来了:
做弹性动画期间,yellowJellyView的layer位置在不断的变化(!!!是layer,不是frame)
所以要在动画的时候不断的去获取yellowJellyView的layer的位置
这里需要借助CADisplayLink定时器来重复执行某个方法,在那里将获取到layer的位置并赋值给已经定义好的属性,并通过属性的 set 方法调用绘制操作
通过此方法获取到 动画中 layer 的位置
yellowJellyView.layer.presentationLayer()!.frame.origin.x
![](https://i-blog.csdnimg.cn/blog_migrate/10a86631504eda4fe467ce3eba642252.webp?x-image-process=image/format,png)
图形绘制的方法:
![](https://i-blog.csdnimg.cn/blog_migrate/57de31c12891efdd21436ffd37c1a504.webp?x-image-process=image/format,png)