美文网首页很屌的项目运用动画动画
贝塞尔帧动画的结合使用

贝塞尔帧动画的结合使用

作者: lucifrom_long | 来源:发表于2016-01-19 15:26 被阅读372次

先看看效果

本文主要讲述love动效的制作。

首先我们要得到一个love路径,这个路径用UIBezierPath来制作。

然后生成一个UIView,它的layer加上CAKeyframeAnimation,而CAKeyframeAnimation的路径是love路径。

把UIView的layer加入CAReplicatorLayer。并对设置CAReplicatorLayer相应属性即可。

基础知识

使用UIBezierPath可以创建基于矢量的路径,此类是Core Graphics框架关于路径的封装。使用此类可以定义简单的形状,如椭圆、矩形或者有多个直线和曲线段组成的形状等。

UIBezierPath是CGPathRef数据类型的封装。如果是基于矢量形状的路径,都用直线和曲线去创建。我们使用直线段去创建矩形和多边形,使用曲线去创建圆弧(arc)、圆或者其他复杂的曲线形状。

使用UIBezierPath画图步骤:

创建一个UIBezierPath对象

调用-moveToPoint:设置初始线段的起点

添加线或者曲线去定义一个或者多个子路径

改变UIBezierPath对象跟绘图相关的属性。如,我们可以设置画笔的属性、填充样式等

CAReplicatorLayer可以复制自己子层的layer,并且复制的出来的layer和原来的子layer拥有相同的动效。然后通过设置一些属性,就可以完成很酷的效果,非常强大。。

相关文章

  • Bezier曲线

    参考自iOS开发 贝塞尔曲线UIBezierPath和iOS-UI进阶13 - 贝塞尔曲线和帧动画结合 使用UIB...

  • 贝塞尔帧动画的结合使用

    先看看效果 本文主要讲述love动效的制作。 首先我们要得到一个love路径,这个路径用UIBezierPath来...

  • 抛物动画

    此动画在于运用 CAKeyframeAnimation 关键帧动画,以及贝塞尔关键帧动画 - (void)thro...

  • iOS动画小结用法

    CABasicAnimation:基础动画 CAKeyframeAnimation:关键帧动画 贝塞尔曲线和基础动...

  • 学习计划(10) - 动画 - 关键帧动画

    贝塞尔曲线的基础我们了解了,接下来,我们开始自己做一些动画效果。那么配合贝塞尔曲线的一般使用关键帧动画。为啥呢?因...

  • 动画 CABasicAnimation

    修改时间: 2016-12-20修改次数: 0 旋转 帧动画 贝塞尔曲线 组动画 animationWithKey...

  • CoreAnimation之贝塞尔曲线(加入购物车动画)

    加入购物车这个动画关键是贝塞尔曲线的绘制,然后给购物车加上一个关键帧动画即可。 贝塞尔曲线的起点从cell 中bu...

  • 购物车动画

    使用贝塞尔曲线实现购物车抛物线动画关键步骤 使用path 构建贝塞尔曲线 使用PathMeasure计算曲线上每个...

  • 43、逐帧动画

    使用CSS动画中的steps()调速函数代替贝塞尔曲线的调速函数,可以实现动画在关键帧之间硬切换的效果。将一张lo...

  • 平滑动画的方法

    1.增加帧数,原来30帧的动作增加为60帧,这样的动画会非常丝滑,但是性能消耗大。 2.使用贝塞尔插值并清理无用关...

网友评论

本文标题:贝塞尔帧动画的结合使用

本文链接:https://www.haomeiwen.com/subject/mdokkttx.html