动画特效十八:粘性动画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方法使用说明 和 粘性动画

相关文章推荐

动画特效十七:粘性动画

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

WEB入门之十八 动画特效

学习内容 jQuery显示/隐藏动画jQuery滑动特效 jQuery淡入淡出特效 jQuery自定义动画特效能力目标 能熟练实现jQuery内置动画特效 能熟练实现自定义动画特效 本章简介动画特效是...

【iOS-Cocos2d游戏开发之十八】解决滚屏背景/拼接地图有黑边(缝隙)/动画播放出现毛边以及禁止游戏中自动锁屏问题!【2011年12月18日补充】

李华明Himi 原创,转载务必在明显处注明:转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/iphone-cocos2d/507.html     本章节...

Android贝塞尔曲线实现粘性动画

  • 2016年09月09日 13:26
  • 2.19MB
  • 下载

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

android自定义view是一个android开发者进阶的一个重要的里程碑,其实这也是离不开Animation,Animator,canvas,path,paint。下面通过一个自定义view,Ad...

cocos2d-x动作、特效和动画(一)移动动作

cocos2d-x中的基础类,包括节点类CCNode、导演类CCDirector、场景类CCScene、布景层类CCLayer和精灵类CCSprite等。这些都是构成游戏画面的基本元素。但是游戏不仅是...

cocos2dx动画常见22种特效

本文转载自:http://www.cnblogs.com/linux-ios/archive/2013/04/09/3009292.html bool HelloWorld::init() {...

cocos2d-x动作、特效和动画(三)旋转和跳跃动作

旋转动作和跳跃动作都很容易理解,就一起记下。 CCrotateTo和CCRotateBy,CCRotateBy是CCRotateTo的子类。CCRotateTo和CCRotateBy都是两个参数,第...

Cocos2d-x特效:场景切换效果、控件动作、逐帧动画

第三阶段:常用功能2 1.Cocos2d-x场景切换     Size visibleSize = Director::getInstance()->getVisibleSize();   ...

Cocos2d-JS 动作、特效和动画

动作 动作包括基本动画和基本动作的组合,基本动作有缩放、移动、旋转等动作。 动作类是cc.Action。它的类图如图7-1所示。 从图中可以看出cc.Action的一个子类是cc.F...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动画特效十八:粘性动画2
举报原因:
原因补充:

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