谈谈iOS中粘性动画以及果冻效果的实现,CALayer形变+阻尼振动

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看151 回复回复2 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 151|回复: 2
收起左侧

谈谈iOS中粘性动画以及果冻效果的实现,CALayer形变+阻尼振动

[复制链接]
1起来 发表于 2016-6-23 18:44:09 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑

看到敏捷大拇指@蚊香酱 大牛两篇大作《iOS形变之CGAffineTransform》和《iOS形变之CATransform3D 》,我也最近在做的项目经验分享一下。在一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先睹为快:

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

谈谈iOS中粘性动画以及果冻效果的实现,CALayer形变+阻尼振动 - 敏捷大拇指 - 谈谈iOS中粘性动画以及果冻效果的实现 1


先做个提纲:

1、第一个分享的主题是“如何让CALayer发生形变”,这个技术在我之前一个项目 ———— KYCuteView 中有涉及,也写了篇简短的实现原理博文。今天再举一个例子。

2、之前我也做过类似果冻效果的弹性动画,比如这个项目—— KYGooeyMenu。用到的核心技术是CAKeyframeAnimation,然后设置几个不同状态的关键帧,就能初步达到这种弹性效果。但是,毕竟只有几个关键帧,而且是需要手动计算,不精确不说,动画也不够细腻,毕竟你不可能手动创建60个关键帧。所以,今天的第二个主题是 —— “如何用阻尼振动函数创建出60个关键帧”,从而实现CALayer产生类似
[Objective-C] 纯文本查看 复制代码
[UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion]

的弹性动画。

正文。




1、如何让CALayer发生形变?

关键技术很简单:你需要用多条贝塞尔曲线 “拼” 出这个Layer,贝塞尔曲线的知识点可以查看敏捷大拇指上的《开源:破解绘制贝塞尔曲线定位控制点难题 Swift+OC》。之所以这样做的原因不言而喻,因为这样方便我们发生形变。

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

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

谈谈iOS中粘性动画以及果冻效果的实现,CALayer形变+阻尼振动 - 敏捷大拇指 - 谈谈iOS中粘性动画以及果冻效果的实现 2


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



1.1、如何表达各个点?

首先,A、B、C、D是四个动点,控制他们动的变量是ScrollView的contentOffset.x。我们可以在

[Objective-C] 纯文本查看 复制代码
-(void)scrollViewDidScroll:(UIScrollView *)scrollView


中实时获取这个变量,并把它转换成一个控制在 0~1 的系数,取名为factor。

[Objective-C] 纯文本查看 复制代码
 _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点移动。

[Objective-C] 纯文本查看 复制代码
    CGPoint pointA = CGPointMake(rectCenter.x ,self.currentRect.origin.y + extra);
    CGPoint pointB = CGPointMake(self.scrollDirection == ScrollDirectionLeft ? rectCenter.x + self.currentRect.size.width/2 : rectCenter.x + self.currentRect.size.width/2 + extra*2 ,rectCenter.y);
    CGPoint pointC = CGPointMake(rectCenter.x ,rectCenter.y + self.currentRect.size.height/2 - extra);
    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 这个值的必然性,但我没有尝试。

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

[Objective-C] 纯文本查看 复制代码
CGPoint c1 = CGPointMake(pointA.x + offset, pointA.y);  
CGPoint c2 = CGPointMake(pointB.x, pointB.y - offset);

CGPoint c3 = CGPointMake(pointB.x, pointB.y + offset);  
CGPoint c4 = CGPointMake(pointC.x + offset, pointC.y);

CGPoint c5 = CGPointMake(pointC.x - offset, pointC.y);  
CGPoint c6 = CGPointMake(pointD.x, pointD.y + offset);

CGPoint c7 = CGPointMake(pointD.x, pointD.y - offset);  
CGPoint c8 = CGPointMake(pointA.x - offset, pointA.y);


有了终点和控制点,就可以用UIBezierPath 中提供的方法

[Objective-C] 纯文本查看 复制代码
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2; 


画线段了。

重载CALayer的

[Objective-C] 纯文本查看 复制代码
- (void)drawInContext:(CGContextRef)ctx;


方法,

在里面画图案:

[Objective-C] 纯文本查看 复制代码
- (void)drawInContext:(CGContextRef)ctx{

    ....//在这里计算每个点的坐标


    UIBezierPath* ovalPath = [UIBezierPath bezierPath];

    [ovalPath moveToPoint: pointA];
    [ovalPath addCurveToPoint:pointB controlPoint1:c1 controlPoint2:c2];
    [ovalPath addCurveToPoint:pointC controlPoint1:c3 controlPoint2:c4];
    [ovalPath addCurveToPoint:pointD controlPoint1:c5 controlPoint2:c6];
    [ovalPath addCurveToPoint:pointA controlPoint1:c7 controlPoint2:c8];

    [ovalPath closePath];

    CGContextAddPath(ctx, ovalPath.CGPath);
    CGContextSetFillColorWithColor(ctx, self.indicatorColor.CGColor);
    CGContextFillPath(ctx);

}


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




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

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

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

[Objective-C] 纯文本查看 复制代码
+ (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创建一个弹性动画。

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

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

谈谈iOS中粘性动画以及果冻效果的实现,CALayer形变+阻尼振动 - 敏捷大拇指 - 谈谈iOS中粘性动画以及果冻效果的实现 3

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

谈谈iOS中粘性动画以及果冻效果的实现,CALayer形变+阻尼振动 - 敏捷大拇指 - 谈谈iOS中粘性动画以及果冻效果的实现 4


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

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

谈谈iOS中粘性动画以及果冻效果的实现,CALayer形变+阻尼振动 - 敏捷大拇指 - 谈谈iOS中粘性动画以及果冻效果的实现 5


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

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

谈谈iOS中粘性动画以及果冻效果的实现,CALayer形变+阻尼振动 - 敏捷大拇指 - 谈谈iOS中粘性动画以及果冻效果的实现 6


想看函数的图像?没问题,推荐一个在线查看函数图象的网站 —— Desmos ,把这段公式

[Swift] 纯文本查看 复制代码
1-\left(e^{-5x}\cdot \cos (30x)\right)


复制粘帖进去就可以看到图像。

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

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

谈谈iOS中粘性动画以及果冻效果的实现,CALayer形变+阻尼振动 - 敏捷大拇指 - 谈谈iOS中粘性动画以及果冻效果的实现 7


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

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

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

用以下代码生成60帧后保存到一个数组并返回它,其中

[Objective-C] 纯文本查看 复制代码
 //1 


就是利用刚才的公式创建60个数值:

[Objective-C] 纯文本查看 复制代码
+(NSMutableArray *) animationValues:(id)fromValue toValue:(id)toValue usingSpringWithDamping:(CGFloat)damping initialSpringVelocity:(CGFloat)velocity duration:(CGFloat)duration{

    //60个关键帧
    NSInteger numOfPoints  = duration * 60;
    NSMutableArray *values = [NSMutableArray arrayWithCapacity:numOfPoints];
    for (NSInteger i = 0; i < numOfPoints; i++) {
        [values addObject:@(0.0)];
    }

    //差值
    CGFloat d_value = [toValue floatValue] - [fromValue floatValue];

    for (NSInteger point = 0; point<numOfPoints; point++) {

        CGFloat x = (CGFloat)point / (CGFloat)numOfPoints;
        CGFloat value = [toValue floatValue] - d_value * (pow(M_E, -damping * x) * cos(velocity * x)); //1 y = 1-e^{-5x} * cos(30x)

        values[point] = @(value);
    }

    return values;

}


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

[Objective-C] 纯文本查看 复制代码
+(CAKeyframeAnimation *)createSpring:(NSString *)keypath duration:(CFTimeInterval)duration usingSpringWithDamping:(CGFloat)damping initialSpringVelocity:(CGFloat)velocity fromValue:(id)fromValue toValue:(id)toValue{

    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:keypath];
    NSMutableArray *values = [KYSpringLayerAnimation animationValues:fromValue toValue:toValue usingSpringWithDamping:damping * dampingFactor initialSpringVelocity:velocity * velocityFactor duration:duration];
    anim.values = values;
    anim.duration = duration;

    return anim;
}




2.1、另一个关键

以上,我们创建了 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:

[Objective-C] 纯文本查看 复制代码
    CAKeyframeAnimation *anim = [KYSpringLayerAnimation createSpring:@"factor" duration:0.8 usingSpringWithDamping:0.5 initialSpringVelocity:3 fromValue:@(1) toValue:@(0)];
    self.factor = 0;
    [self addAnimation:anim forKey:@"restoreAnimation"];


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

[Objective-C] 纯文本查看 复制代码
+(BOOL)needsDisplayForKey:(NSString *)key{
    if ([key isEqual:@"factor"]) {
        return  YES;
    }
    return  [super needsDisplayForKey:key];
}


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

最后的最后,你需要重载CALayer中的

[Objective-C] 纯文本查看 复制代码
-(id)initWithLayer:(GooeyCircle *)layer


方法,为了保证动画能连贯起来,你需要拷贝前一个状态的layer及其所有属性。

[Objective-C] 纯文本查看 复制代码
-(id)initWithLayer:(GooeyCircle *)layer{
    self = [super initWithLayer:layer];
    if (self) {

        self.indicatorSize  = layer.indicatorSize;
        self.indicatorColor = layer.indicatorColor;
        self.currentRect = layer.currentRect;
        self.lastContentOffset = layer.lastContentOffset;
        self.scrollDirection = layer.scrollDirection;
        self.factor = layer.factor;
    }
    return self;
}





总结:

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





作者:Kitten Yang

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

蚊香酱 发表于 2016-6-24 00:05:22 | 显示全部楼层
mark一下明天看
cocoaswift 发表于 2016-6-27 12:54:56 | 显示全部楼层
赞!晚点看。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表