iOS开发——图形编程OC篇&粘性动画以及果冻效果

粘性动画以及果冻效果

在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目:

先做个提纲:

  1. 第一个分享的主题是“如何让CALayer发生形变”,这个技术在我之前一个项目 ———— KYCuteView 中有涉及,也写了篇简短的实现原理博文。今天再举一个例子。
  2. 之前我也做过类似果冻效果的弹性动画,比如这个项目—— KYGooeyMenu。 用到的核心技术是CAKeyframeAnimation,然后设置几个不同状态的关键帧,就能初步达到这种弹性效果。但是,毕竟只有几个关键帧,而且是 需要手动计算,不精确不说,动画也不够细腻,毕竟你不可能手动创建60个关键帧。所以,今天的第二个主题是 —— “如何用阻尼振动函数创建出60个关键帧”,从而实现CALayer产生类似[UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion] 的弹性动画。

正文。

如何让CALayer发生形变?

关键技术很简单:你需要用多条贝塞尔曲线 “拼” 出这个Layer。之所以这样做的原因不言而喻,因为这样方便我们发生形变。

比如 KYAnimatedPageControl 中的这个小球,其实它是这么被画出来的:

小球是由弧AB、弧BC、弧CD、弧DA 四段组成,其中每段弧都绑定两个控制点:弧AB 绑定的是 C1 、 C2;弧BC 绑定的是 C3 、 C4 .....

如何表达各个点?

首 先,A、B、C、D是四个动点,控制他们动的变量是ScrollView的contentOffset.x。我们可以在 -(void)scrollViewDidScroll:(UIScrollView *)scrollView中实时获取这个变量,并把它转换成一个控制在 0~1 的系数,取名为factor。

_factor = MIN(1, MAX(0, (ABS(scrollView.contentOffset.x - self.lastContentOffset) / scrollView.frame.size.width)));

假 设A、B、C、D的最大变化距离为小球直径的2/5。那么结合这个0~1的系数,我们可以得出A、B、C、D的真实变化距离 extra 为:extra = (self.width * 2 / 5) * factor。当factor == 1时,达到最大形变状态,此时四个点的变化距离均为(self.width * 2 / 5)。

注意:根据滑动方向,我们还要根据是B点移动还是D点移动。

1 CGPoint pointA = CGPointMake(rectCenter.x ,self.currentRect.origin.y + extra);
2 CGPoint pointB = CGPointMake(self.scrollDirection == ScrollDirectionLeft ? rectCenter.x + self.currentRect.size.width/2 : rectCenter.x + self.currentRect.size.width/2 + extra*2 ,rectCenter.y);
3 CGPoint pointC = CGPointMake(rectCenter.x ,rectCenter.y + self.currentRect.size.height/2 - extra);
4 CGPoint pointD = CGPointMake(self.scrollDirection == ScrollDirectionLeft ? self.currentRect.origin.x - extra*2 : self.currentRect.origin.x, rectCenter.y);

然后是控制点:

关键是要知道上图中A-C1 、B-C2、B-C3、C-C4....这些水平和垂直虚线的长度,命名为offSet。经过多次尝试,我得出的结论是:

当offSet设置为 直径除以3.6 的时候,弧线能完美地贴合成圆弧。我隐约感觉这个 3.6 是必然,貌似和360度有某种关系,或许通过演算能得出 3.6 这个值的必然性,但我没有尝试。

因此,各个控制点的坐标:

1 CGPoint c1 = CGPointMake(pointA.x + offset, pointA.y);
2 CGPoint c2 = CGPointMake(pointB.x, pointB.y - offset);
3 CGPoint c3 = CGPointMake(pointB.x, pointB.y + offset);
4 CGPoint c4 = CGPointMake(pointC.x + offset, pointC.y);
5 CGPoint c5 = CGPointMake(pointC.x - offset, pointC.y);
6 CGPoint c6 = CGPointMake(pointD.x, pointD.y + offset);
7 CGPoint c7 = CGPointMake(pointD.x, pointD.y - offset);
8 CGPoint c8 = CGPointMake(pointA.x - offset, pointA.y);

有了终点和控制点, 就可以用UIBezierPath 中提供的方法 - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2; 画线段了。

重载CALayer的- (void)drawInContext:(CGContextRef)ctx;方法,在里面画图案:

 1 - (void)drawInContext:(CGContextRef)ctx{
 2 ....//在这里计算每个点的坐标
 3 UIBezierPath* ovalPath = [UIBezierPath bezierPath];
 4 [ovalPath moveToPoint: pointA];
 5 [ovalPath addCurveToPoint:pointB controlPoint1:c1 controlPoint2:c2];
 6 [ovalPath addCurveToPoint:pointC controlPoint1:c3 controlPoint2:c4];
 7 [ovalPath addCurveToPoint:pointD controlPoint1:c5 controlPoint2:c6];
 8 [ovalPath addCurveToPoint:pointA controlPoint1:c7 controlPoint2:c8];
 9 [ovalPath closePath];
10 CGContextAddPath(ctx, ovalPath.CGPath);
11 CGContextSetFillColorWithColor(ctx, self.indicatorColor.CGColor);
12 CGContextFillPath(ctx);
13 }

现在,当你滑动ScrollView的时候,小球就会形变了。

如何用阻尼振动函数创建出60个关键帧?

上 面的例子中,有个很重要的因素,就是ScrollView中的contentOffset.x这个变量,没有这个输入,那接下来什么都不会发生。但想要获 得这个变量,是需要用户触摸、滑动去交互产生的。在某个动画中用户是没有直接的交互输入的,比如当手指离开之后,要让这个小球以果冻效果弹回初始状态,这 个过程手指已经离开屏幕,也就没有了输入,那么用上面的方法肯定行不通,所以,我们可以用CAAnimation.

我们知道,iOS7中苹果在 UIView(UIViewAnimationWithBlocks) 加入了一个新的制作弹性动画的工厂方法:

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay       usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity       options:(UIViewAnimationOptions)options animations:(void (^)(void))animations       completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

但是没有直接的关于弹性的 CAAnimation 子类,类似CABasicAnimation或CAKeyframeAnimation 来直接给CALayer添加动画。好消息是iOS9中添加了公开的 CASpringAnimation。但是出于兼容低版本以及对知识探求的角度,我们可以了解一下如何手动给CALayer创建一个弹性动画。

在开始之前需要复习一下高中物理知识 ———— 阻尼振动,你可以点击高亮字体的链接稍微复习一下。

根据维基百科,我们可以得到如下振动函数通式:

当然这只是一个通式,我们需要让 图像过(0,0),并且最后衰减到1 。我们可以让原图像先绕X轴翻转180度,也就是加一个负号。然后沿y轴向上平移一个单位。所以稍加变形可以得到如下函数:

想看函数的图像?没问题,推荐一个在线查看函数图象的网站 —— Desmos ,把这段公式 1-\left(e^{-5x}\cdot \cos (30x)\right) 复制粘帖进去就可以看到图像。

改进后的函数图像是这样的:

完美满足了我们 图形过(0,0),震荡衰减到1 的要求。其中式子中的 5 相当于阻尼系数,数值越小幅度越大;式子中的 30 相当于震荡频率 ,数值越大震荡次数越多。

接下来就需要转换成代码。

总体思路是创建60帧关键帧(因为屏幕的最高刷新频率就是60FPS),然后把这60帧数据赋值给 CAKeyframeAnimation 的 values 属性。

用以下代码生成60帧后保存到一个数组并返回它,其中//1就是利用刚才的公式创建60个数值:

 1 +(NSMutableArray *) animationValues:(id)fromValue toValue:(id)toValue usingSpringWithDamping:(CGFloat)damping initialSpringVelocity:(CGFloat)velocity duration:(CGFloat)duration{
 2 //60个关键帧
 3 NSInteger numOfPoints  = duration * 60;
 4 NSMutableArray *values = [NSMutableArray arrayWithCapacity:numOfPoints];
 5 for (NSInteger i = 0; i < numOfPoints; i++) {
 6 [values addObject:@(0.0)];
 7 }
 8 //差值
 9 CGFloat d_value = [toValue floatValue] - [fromValue floatValue];
10 for (NSInteger point = 0; pointCGFloat x = (CGFloat)point / (CGFloat)numOfPoints;
11 CGFloat value = [toValue floatValue] - d_value * (pow(M_E, -damping * x) * cos(velocity * x)); //1 y = 1-e^{-5x} * cos(30x)
12 values[point] = @(value);
13 }
14 return values;
15    }

接下来创建一个对外的类方法,并返回一个 CAKeyframeAnimation :

1 +(CAKeyframeAnimation *)createSpring:(NSString *)keypath duration:(CFTimeInterval)duration usingSpringWithDamping:(CGFloat)damping initialSpringVelocity:(CGFloat)velocity fromValue:(id)fromValue toValue:(id)toValue{
2 CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:keypath];
3 NSMutableArray *values = [KYSpringLayerAnimation animationValues:fromValue toValue:toValue usingSpringWithDamping:damping * dampingFactor initialSpringVelocity:velocity * velocityFactor duration:duration];
4 anim.values = values;
5 anim.duration = duration;
6 return anim;
7 }

另一个关键

以上,我们创建了 CAKeyframeAnimation 。但是这些values到底是对谁起作用的呢?如果你熟悉CoreAnimation的话,没错,是对传入的keypath起作用。而这些keypath 其实就是CALayer中的属性@property。比如,之所以当传入的keypath为transform.rotation.x时 CAKeyframeAnimation会让layer发生旋转,就是因为CAKeyframeAnimation发现CALayer中有这么个属性叫 transform,于是动画就发生了。现在我们需要改变的是主题一中的那个factor变量,所以,很自然地想到,我们可以给CALayer补充一个属 性名为factor就行了,这样CAKeyframeAnimation加到layer上时发现layer有这个factor属性,就会把60帧不同的 values赋值给factor。当然我们要把fromValue和toValue控制在0~1:

1 CAKeyframeAnimation *anim = [KYSpringLayerAnimation createSpring:@"factor" duration:0.8 usingSpringWithDamping:0.5 initialSpringVelocity:3 fromValue:@(1) toValue:@(0)];
2 self.factor = 0;
3 [self addAnimation:anim forKey:@"restoreAnimation"];

最后一步,虽然CAKeyframeAnimation实时地去改变了我们想要的factor,但我们还得通知屏幕刷新,这样才能看到动画。

1 +(BOOL)needsDisplayForKey:(NSString *)key{
2 if ([key isEqual:@"factor"]) {
3 return  YES;
4 }
5 return  [super needsDisplayForKey:key];
6 }

上面的代码通知屏幕当factor发生变化时,实时刷新屏幕。

最后的最后,你需要重载CALayer中的-(id)initWithLayer:(GooeyCircle *)layer方法,为了保证动画能连贯起来,你需要拷贝前一个状态的layer及其所有属性。

 1 -(id)initWithLayer:(GooeyCircle *)layer{
 2 self = [super initWithLayer:layer];
 3 if (self) {
 4 self.indicatorSize  = layer.indicatorSize;
 5 self.indicatorColor = layer.indicatorColor;
 6 self.currentRect = layer.currentRect;
 7 self.lastContentOffset = layer.lastContentOffset;
 8 self.scrollDirection = layer.scrollDirection;
 9 self.factor = layer.factor;
10 }
11 return self;
12 }

总结:

做自定义的动画最关键的就是要有变量,要有输 入。像滑动ScrollView的时候,滑动的距离就是动画的输入,可以作为动画的变量;当没有交互的时候,可以用CAAnimation。其实 CAAnimation底层就有个定时器,而定时器的作用就是可以产生变量,时间就是变量,就可以产生变化的输入,就能看到变化的状态,连起来就是动画 了。

时间: 2024-12-14 05:52:24

iOS开发——图形编程OC篇&粘性动画以及果冻效果的相关文章

iOS开发——图形编程OC篇&amp;(一)Quartz 2D介绍

Quartz 2D介绍 一.什么是Quartz2D Quartz 2D是?个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 二.Quartz2D在iOS开发中的价值 为了便于搭建美观的UI界面,iOS提供了UIKit框架,??有各种各样的UI控件 UILabel:显?文字 UIImageView:显示图片 UIButton:同时显示图片和?字

iOS开发——图形编程OC篇&amp;(三)CALayer隐式动画

CALayer隐式动画 在前面几讲中已经提到,每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层).所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画. * 当对非Root Layer的部分属性进行相应的修改时,默认会自动产生一些动画效果,这些属性称为Animatable Properties(可动画属性). * 列举几个常见的Animatable Properties: ? bounds:用于设置CALay

iOS开发——图形编程OC篇&amp;(六)Quartz 2D高级使用(二)

Quartz 2D高级使用 一.绘图路径 A.简单说明 在画线的时候,方法的内部默认创建一个path.它把路径都放到了path里面去. 1.创建路径  cgmutablepathref 调用该方法相当于创建了一个路径,这个路径用来保存绘图信息. 2.把绘图信息添加到路径里边. 以前的方法是点的位置添加到ctx(图形上下文信息)中,ctx 默认会在内部创建一个path用来保存绘图信息. 在图形上下文中有一块存储空间专门用来存储绘图信息,其实这块空间就是CGMutablePathRef. 3.把路径

iOS开发——图形编程OC篇&amp;OpenGL ES2.0编程步骤

OpenGL ES2.0编程步骤 OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形 API 的子集,针对手机.PDA和游戏主机等嵌入式设备而设计.该API由Khronos集团定义推广,Khronos是一个图形软硬件行业协会,该协会主要关注图形和多媒体方面的开放标准. 1. 保存全局变量的数据结构 以下例子程序均基于Linux平台. 1 typedef struct _escontext 2 { 3 void* userData; // P

iOS开发——图形编程OC篇&amp;(四)Quartz 2D简单使用

Quartz2D简单使用 一.画直线 代码: 1 // 2 // YYlineview.m 3 // 03-画直线 4 // 5 // Created by apple on 14-6-9. 6 // Copyright (c) 2014年 itcase. All rights reserved. 7 // 8 9 #import "YYlineview.h" 10 11 @implementation YYlineview 12 13 14 // 当自定义view第一次显示出来的时候

iOS开发——图形编程OC篇&amp;(五)Quartz 2D高级使用(一)

Quartz2D高级使用 一.qurza2d是怎么将绘图信息和绘图的属性绘制到图形上下文中去的? 说明: 新建一个项目,自定义一个view类和storyboard关联后,重写该类中的drowrect方法. 画线的三个步骤: (1)获取上下文 (2)绘图 (3)渲染 要求:画两条单独的线 代码和效果图: 1 - (void)drawRect:(CGRect)rect 2 { 3 //获取上下文 4 CGContextRef ctx=UIGraphicsGetCurrentContext(); 5

iOS开发——图形编程OC篇&amp;(三)Quartz 2D绘图

绘图 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 决定绘制的输出目标(绘制到什么地方去?)(输出目标可以是PDF文件.Bitmap或者显示器的窗口上) 相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上. Quartz2D提供了以下几种类型的Graphics Context: Bitmap Graphics Context PDF Graphics

iOS开发——图形编程OC篇&amp;(二)Quartz 2D自定义控件

Quartz2D(自定义UIImageView控件) 一.实现思路 Quartz2D最大的用途在于自定义View(自定义UI控件),当系统的View不能满足我们使用需求的时候,自定义View. 使用Quartz2D自定义View,可以从模仿系统的ImageView的使用开始. 需求驱动开发:模仿系统的imageview的使用过程 1.创建 2.设置图片 3.设置frame 4.把创建的自定义的view添加到界面上(在自定义的View中,需要一个image属性接收image图片参数->5). 5.

iOS开发——图形编程OC篇&amp;(二)CALayer自定义图层

一.第一种方式 1.简单说明 以前想要在view中画东西,需要自定义view,创建一个类与之关联,让这个类继承自UIView,然后重写它的DrawRect:方法,然后在该方法中画图. 绘制图形的步骤: (1)获取上下文 (2)绘制图形 (3)渲染图形 如果在layer上画东西,与上面的过程类似. 代码示例: 新建一个类,让该类继承自CALayer YYMylayer.m文件 1 // 2 // YYMylayer.m 3 // 05-自定义layer(1) 4 // 5 // Created b