动画特效十八:粘性动画2

原创 2015年11月20日 17:59:19

注:本文内容是学习自 KittenYang  的《A GUIDE TO IOS ANIMATION》一书,如果大家感兴趣的话,可以购买本书阅读。但就个人而言,觉得作者的确思维清晰,但语言表达上面忽略了很多细节方面的说明,代码书写方面有许多需要优化及更正的地方。

上一节的动画效果中介绍了 粘性动画, 不过真的很复杂。这一节继续为大家介绍一个粘性动画实现的效果,不过简单了许多。所以我只会给出一些说明过程及关键代码。 先看效果图。



需求分析图:



主要代码:

- (void)drawInContext:(CGContextRef)ctx {
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointZero];
    [path addLineToPoint:CGPointMake(self.frame.size.width - kExtraWidth, 0)];
    if (self.isNeedStickyEffcetion) {
        [path addQuadCurveToPoint:CGPointMake(self.frame.size.width - kExtraWidth, self.frame.size.height) controlPoint:CGPointMake(self.frame.size.width - kExtraWidth + self.factor, self.frame.size.height * 0.5)];
    } else {
        [path addLineToPoint:CGPointMake(self.frame.size.width - kExtraWidth, self.frame.size.height)];
    }
    [path addLineToPoint:CGPointMake(0, self.frame.size.height)];
    [path closePath];
    CGContextAddPath(ctx, path.CGPath);
    CGContextSetFillColorWithColor(ctx, [UIColor colorWithRed:0 green:0.722 blue:1 alpha:1].CGColor);
    CGContextDrawPath(ctx, kCGPathFill);
}

- (void)restoreSticky {
    // 这里的factor就是二阶贝塞尔曲线定位点的x值
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"factor"];
    CGFloat duration = 0.5;
    anim.duration  = duration;
    // 这里要根据二阶贝塞尔曲线公式计算得出曲线最右边的点位点和最左边的定位点的值
    anim.values = [self valuesWithSamplesArray:@[@(80), @(-40), @(0)] duration:duration];
    anim.fillMode = kCAFillModeForwards;
    anim.removedOnCompletion = NO;
    anim.delegate = self;
    [self addAnimation:anim forKey:@"sticky_animation"];
}

说明:

1. 代码中的 kExtraWidth 就是分析图中的两条红线之间的距离。

2. isNeedStickyEffection 这个bool变量就是用来判断自定义的这个layer是否已经移动到了AF1F2D这个位置了,如果没有的话,就直接绘制F1F2这条直线,否则的话,使用二阶贝塞尔曲线绘制F1EF2这条曲线。

3. CAKeyframeAnimation这个关键帧动画就是不停的改变factor这个值,然后不断的绘制F1EF2这条曲线。

如果大家不怎么明白的话,强力建议可以先看看我以前写的两篇博客: CALayer的needsDisplayForKey方法使用说明 和 粘性动画

Android具有粘性的小球,跌落反弹形成文字的动画效果

android自定义view是一个android开发者进阶的一个重要的里程碑,其实这也是离不开Animation,Animator,canvas,path,paint。下面通过一个自定义view,Ad...
  • u010360371
  • u010360371
  • 2016年01月26日 23:14
  • 2391

动画特效十七:粘性动画

注:本文内容是学习自 KittenYang  的《A GUIDE TO IOS ANIMATION》一书,如果大家感兴趣的话,可以购买本书阅读。但就个人而言,觉得作者的确思维清晰,但语言表达上面忽略了...
  • sinat_27706697
  • sinat_27706697
  • 2015年11月14日 18:19
  • 1186

iOS粘性拖拽红点动画研究

手机QQ有个针对强迫症很好的功能,就是未读消息红点的拖拽效果。下面我就来讲解要如何来实现这种效果。 一、预备知识 1.CAShapeLayer       CAShapeLayer是CALaye...
  • wangxueli0922
  • wangxueli0922
  • 2016年01月29日 16:01
  • 344

Shader特效——“帧动画效果”的实现 【GLSL】

参考自:https://www.shadertoy.com/view/lsX3Rr iChannel0是一幅由一系列连贯动作的彩虹猫组成的图像,如下图所示 ichannel1是...
  • panda1234lee
  • panda1234lee
  • 2016年09月09日 15:29
  • 1688

<四> cocos2dx动画常见22种特效

本文转载自: bool HelloWorld::init() { ////////////////////////////// // 1. super init first ...
  • liuhong135541
  • liuhong135541
  • 2014年04月23日 17:26
  • 7474

超链接 与众不同的鼠标滑过超链接下划线动画效果

默认的超链接下划线动画十分的生硬,我们可以通过一些简单的处理,来制作出带平滑过渡效果的超链接下划线动画效果。众所周知,超链接元素在默认情况下鼠标滑过时会出现一条下划线。默认的超链接下划线动画十分的生硬...
  • xiaokui_wingfly
  • xiaokui_wingfly
  • 2016年07月07日 17:27
  • 2154

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

在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲: ...
  • qinxianjun163
  • qinxianjun163
  • 2016年06月02日 14:15
  • 504

分享在github超酷超炫特效动画,不看你会后悔的。

直接上效果图,有需要的可以到连接上去下载。         下载地址:https://github.com/ChrisRenke/DrawerArrowDrawable       下载地址:http...
  • huningjun
  • huningjun
  • 2015年06月03日 10:23
  • 2472

android 点击效果动画增强

1.使用开源库制作view 的放大+透明度的动画 2. 设计回调接口 3. 在view 的onclick 的处理中增加动画的调用,并把以前的onclick事件处理 作为回调加入到animation...
  • farmer_cc
  • farmer_cc
  • 2014年01月20日 12:52
  • 14772

WEB入门之十八 动画特效

学习内容 jQuery显示/隐藏动画jQuery滑动特效 jQuery淡入淡出特效 jQuery自定义动画特效能力目标 能熟练实现jQuery内置动画特效 能熟练实现自定义动画特效 本章简介动画特效是...
  • zhangchen124
  • zhangchen124
  • 2017年02月27日 20:12
  • 489
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动画特效十八:粘性动画2
举报原因:
原因补充:

(最多只允许输入30个字)