浅谈贝塞尔曲线以及iOS中粘性动画的实现

关于贝塞尔曲线,网上相关的文章很多,这里我主要想用更简单的方法让大家理解贝塞尔曲线,当然,这仅仅是我个人的理解,如有错误的地方还请大家能够帮忙指出来,这样大家才能一起进步。

贝塞尔曲线,常用到的可分为如下几类,1阶曲线,2阶曲线(二次函数算是一种),3阶曲线,高阶曲线。

通用的方程为

这是由p0~pn这n+1个点组成的高阶方程。

但是光看这个方程的话或许大家会觉得不太理解,这东西到底能做什么?

我先逐渐的从1阶曲线讲起吧:

这里借鉴下这篇文章的几幅图片来描绘一下下列几个情况:

1阶曲线,是由两个端点组成,无控制点,此时贝塞尔曲线的起点就从端点开始出发,走到另一个端点,而此区间没有控制点,所以描绘出来的是一条直线。

2阶曲线,则是由两个端点加上一个控制点组成,此时,将两个端点分别与控制点连线所产生的就有两条线段,而分别从两条线段上的任意两点又能构成一条新的直线,不过此时我们不会取任意两点,在上图中是p0-p1形成的折线以及p1-p2形成的折线,如此一来,由p0-p1上的点以及p1-p2上的点同时出发的话这两条线段上的点会同时动,由这两个动点所产生的直线是一条会变化的直线,而这条直线也正是贝塞尔曲线的点在描绘贝塞尔曲线的时候所要经过的点。正因为直线式不断变化的,所以它描绘出来的线就变成了一条平滑的曲线。

3阶曲线以及高阶曲线,同2阶曲线一样,2个或2个以上的控制点所构成的所有折线段的点分别出发,然后在将这些动点所形成的直线再分解成n-1个动的折线,再将折线上的点再重新链接,如此递归,最终转换成1阶,如此一来可描绘出n阶贝塞尔曲线。

好了这里把大家给说晕了,先来看看实际效果吧

这是我最近做的一个开源,是仿照美团外卖来做的一个下拉动画,可以看到这个粘性动画就是当我们滑动tableview从而产生的一个动画,这里我谈一谈我的实现思路吧,你所看到的这个粘性红色视图其实是用贝塞尔曲线描绘出来的闭合图形,我们可以很直观的可以看出它其实是一个二阶贝塞尔曲线,而且控制点为整个屏幕的中心,通过获取scrollview的滑动偏移量来绘制控制点的坐标。

下面来看一下代码:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

CGFloat offsetY = scrollView.contentOffset.y+64;

refreshHeadView.offsetY = offsetY;

//异步执行,setNeedsDisplay会调用自动调用drawRect方法

[refreshHeadView setNeedsDisplay];

}

我们通过scrollview的代理方法获取到偏移量存了起来,然后在UIView中进行绘制,setNeedsDisplay这个方法会使得UIView重绘,

#pragma mark 画图

- (void)drawRect:(CGRect)rect {

// 创建一个贝塞尔曲线句柄

UIBezierPath *path = [UIBezierPath bezierPath];

// 初始化该path到一个初始点

[path moveToPoint:CGPointMake(0, 0)];

//    // 添加一条直线

//    [path addLineToPoint:CGPointMake(0, 0)];

// 画二元曲线,一般和moveToPoint配合使用

[path addQuadCurveToPoint:CGPointMake(self.frame.size.width, 0) controlPoint:CGPointMake(self.frame.size.width/2,- _offsetY*1.2)];

// 关闭该path

[path closePath];

// 创建描边(Quartz)上下文

CGContextRef context = UIGraphicsGetCurrentContext();

// 将此path添加到Quartz上下文中

CGContextAddPath(context, path.CGPath);

// 设置本身颜色

[[UIColor redColor] set];

// 设置填充的路径

CGContextFillPath(context);

}

这样当我滑动的时候,控制点的坐标也在改变,且在屏幕中心向下移动,就构成了我们熟知的二次曲线。下面附上GitHub地址

时间: 2024-12-28 21:59:53

浅谈贝塞尔曲线以及iOS中粘性动画的实现的相关文章

转:谈谈iOS中粘性动画以及果冻效果的实现

在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲: 第一个分享的主题是“如何让CALayer发生形变”,这个技术在我之前一个项目 ———— KYCuteView 中有涉及,也写了篇简短的实现原理博文.今天再举一个例子. 之前我也做过类似果冻效果的弹性动画,比如这个项目—— KYGooeyMenu.用到的核心技术是CAKeyframeAnimation,然后设置几个不同

谈谈iOS中粘性动画以及果冻效果的实现

在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: https://github.com/KittenYang/KYAnimatedPageControl 先做个提纲: 第一个分享的主题是“如何让CALayer发生形变”,这个技术在我之前一个项目 ———— KYCuteView 中有涉及,也写了篇简短的实现原理博文.今天再举一个例子. 之前我也做过类似果冻效果的弹性动画,比如这个项

浅谈设计模式的学习(中)

在<浅谈设计模式的学习(上)>中我说到了设计模式的基石-----抽象思维.为什么需要抽象思维呢?因为越抽象就越不容易出错,就像有些领导人说话:坚持改革开放.但怎么算坚持改革开放呢,没有具体的标准,因事而异,所以就不容易违背这个坚持改革开放的原则了. 3.学习设计模式,要保持抽象的思维     什么是抽象思维呢?真的不好说,抽象的东西往往难以说明白,听了也难以搞明白,还是通过具体的例子来说吧 有这么一个学生请假的场景,如果请假时间一天以内则有班长批准就可以了,三天以内则需要老师批准,超过三天就得

转:浅谈CSS在前端优化中一些值得注意的关键点

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,

浅谈logo在PPT设计中的运用

在工业设计范畴,特别是产品设计中常常会提到“形式跟随功用”,也就是说产品的外型是树立在产品功用的根底之上的,同样道理,在PPT设计中则演化为“形式跟随内容”,就是说页面的美化设计是为了更好的将内容向观众传达. 为此我们总结了PPT设计的三个原则,即“图示化”,“图标化”,“图表化” 以“图标化”为例,所谓图标,就是具有指代意义的图形符号,具有高度浓缩并快捷传达信息.便于记忆的特性.应用范围很广,软硬件网页社交场所公共场所无所不在,例如各种交通标志…… 在用户界面设计范畴中则为图标的形式,包括程序

浅谈加速因子在策略中的意义

他站链接:浅谈加速因子在策略中的意义 NO:01没有完美的交易系统,但是却有完美的交易哲学.交易哲学.交易策略和资金管理三者缺一不可,才能构成正期望的交易系统.投机依赖价格的移动获得盈利(低买高卖或高买更高卖).在上升或下降趋势中,价格虽然在整体上朝着一个方向移动,但中间也会有短暂的反方向移动.而在横盘过程中,价格的移动方向则显得相对"随机"一些. NO:02关于价格的移动,可以类比物理学中的运动.其中包括:位移距离.时间.速度等.价格的位移相对于时间的比率就是价格的速度.除了速度之外

iOS中的动画

什么是动画,动画其实就是我们看到的画面变化的一个过程 那么在iOS中,实现一个最简单的动画需要几步呢? a Simple animation { // 1.开启动画 [UIViewbeginAnimations:nilcontext:nil]; [UIViewsetAnimationDuration:2.0]; // 2.修改属性 CGRect tempF = self.head.frame; tempF.origin.x += 50; tempF.origin.y += 100; tempF.

ios中layer动画和UIView动画代码总结

kCATransitionFade淡出 kCATransitionMoveIn覆盖原图 kCATransitionPush推出 kCATransitionReveal底部显出来 pageCurl   向上翻一页 pageUnCurl 向下翻一页 rippleEffect 滴水效果 suckEffect 收缩效果,如一块布被抽走 cube 立方体效果 oglFlip 上下翻转效果 #pragma mark UIView 动画 - (IBAction)pressClick1:(id)sender {

iOS中Animation 动画 UI_22

1.iOS中我们能看到的控件都是UIView的子类,比如UIButton UILabel UITextField UIImageView等等 2.UIView能够在屏幕的显示是因为在创建它的时候内部自动添加一个CALayer图层,通过这个图层在屏幕上显示的时候会调用一个drawRect: 的方法,完成绘图,才能在屏幕上显示 3.CALayer 本身就具有显示功能,但是它不能响应用户的交互事件,如果只是单纯的显示一个图形,此时你可以使用CALayer创建或者是使用UIView创建,但是如果这个图形