IOS 圆球沿着椭圆轨迹做动画

前言:最近公司项目有个需求,需要实现让一个view沿着椭圆轨迹做动画,效果实现后,就自己封装做了一个小demo,使用更方便。先看效果:

椭圆.gif

效果图中的白色椭圆轨迹线其实是用贝塞尔曲线画出来的,为了清晰的看出来运动的轨迹。其实项目中是不显示轨迹线的,也就是小球是悬空运动的。若不需要删除掉即可。

实现步骤:

1.首先设定关键帧动画CAKeyframeAnimation的一些属性,比如运动时间和重复次数和calculationMode模式,我们选择kCAAnimationPaced 使得动画均匀进行。

  CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
  pathAnimation.calculationMode = kCAAnimationPaced;
  pathAnimation.fillMode = kCAFillModeForwards;
  pathAnimation.removedOnCompletion = NO;
  pathAnimation.duration = 5.0;
  pathAnimation.repeatCount = 2;

2.设定好关键帧动画的path,即一个椭圆形的路径。需要使用CGPathAddArc,CGPathAddArc经常用于画正圆,比如下面就是一个正圆,各个参数的意义:

//160,200为圆心,100为半径 (startAngle,endAngle)为起始角度和结束角度,1为顺时针,0 为逆时针
 CGPathAddArc(curvedPath, NULL, 160,200, 100, startAngle, endAngle, 0);

需要注意的是由于iOS中的坐标体系是和Quartz坐标体系中Y轴相反的,所以iOS UIView在做Quartz绘图时,Y轴已经做了Scale为-1的转换,因此造成CGPathAddArc函数最后一个是否是顺时针的参数结果正好是相反的,也就是说如果设置最后的参数为YES,根据参数定义应该是顺时针的,但实际绘图结果会是逆时针的!

我们需要画的是椭圆啊,别急,接下来稍作更改即可。正圆第二个参数默认为NULL,我们要改成椭圆,

//短半轴和长半轴的比例
  float radiuscale = 0.5;
  //椭圆顶点的坐标值
  CGFloat origin_x = self.frame.size.width/2;
  CGFloat origin_y = self.frame.size.height/2;
  //长半轴的长
  CGFloat radiusX = 100;

  CGMutablePathRef curvedPath = CGPathCreateMutable();
  CGAffineTransform t2 = CGAffineTransformConcat(CGAffineTransformConcat(
                                      CGAffineTransformMakeTranslation(-origin_x, -origin_y),
                                      CGAffineTransformMakeScale(1, radiuscale)),
                          CGAffineTransformMakeTranslation(origin_x, origin_y));
  CGPathAddArc(curvedPath, &t2, origin_x, origin_y, radiusX,startAngle,endAngle, 1);
  pathAnimation.path = curvedPath;
  CGPathRelease(curvedPath);

好了,至此,动画的轨迹和属性都写好了。添加到view上就ok了。

3.贝塞尔画椭圆

如果是整个椭圆的话,只需要设定好理想中的椭圆的外切圆即可。

  //整个椭圆
  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSaveGState(context);
  UIBezierPath *arc = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(origin_x-100, origin_y-50, 200, 100)];
  [[UIColor whiteColor] setStroke];
  [arc stroke];
  CGContextRestoreGState(context);

总结: 希望本文能对你有帮助。如果你有更好的想法,欢迎和我交流!
demo地址:https://github.com/xiaochenyi/CircleAnimateDemo

文/秋雨W(简书作者)
原文链接:http://www.jianshu.com/p/d8cc02e7efa7
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

(0)

相关推荐

  • iOS利用CALayer实现动画加载的效果

    首先来看看效果图 实现过程如下 控制器调用就一句代码: [self showLoadingInView:self.view]; 方便控制器如此调用,就要为控制器添加一个分类 .h文件 #import <UIKit/UIKit.h> #import "GQCircleLoadView.h" @interface UIViewController (GQCircleLoad) //显示动画 - (void)showLoadingInView:(UIView*)view; //隐

  • iOS 利用动画和贝塞尔实现咻咻效果

    先上效果图: 圆形 方形 思路分析: 这四种风格其实就是两种, 一种是动画效果在视图View的内部, 另一种是在视图的外部! 我们可以尝试封装自定义 View 设置相关属性去实现这两个风格. 点击时候触及动画, 说明要在这个 View 上添加手势! 分析动画效果其实是两种, 第一种是视图的比例由小到大,第二种是动画显示效果是渐渐变暗! 那么我们可以把两种效果写到一个动画组中!还有一个问题是效果的形状, 也就是 Layer 动画展示的形状有方形有圆形, 这个形状就需要我们思考如何去绘制和判断! 代

  • iOS实现知乎和途家导航栏渐变的文字动画效果

    效果图如下 分析如下: 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了毛玻璃效果,背景是一张图片 4.下拉放大图片效果 5.title文字动画效果 通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点 分布拆解实现以上效果 一.下拉放大header图片 - (void)viewDidLoad { [super viewDidLoad]; [self.view

  • iOS UITableView展开缩放动画实例代码

    Swift - UITableView展开缩放动画 效果 源码:https://github.com/YouXianMing/Swift-Animations // // HeaderViewTapAnimationController.swift // Swift-Animations // // Created by YouXianMing on 16/8/9. // Copyright © 2016年 YouXianMing. All rights reserved. // import

  • iOS 基本动画、关键帧动画、利用缓动函数实现物理动画效果

    iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果 先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/duration/fromValue/toValue #3. 设置动画最终停留的位置 #4. 将配置好的动画添加到layer层中 举个例子, 比如实现一个圆形从上往下移动, 上代码: //设置原始画面 UIView *showView = [[UI

  • iOS实现滚动字幕的动画特效

    效果图 开始上代码 滚动字幕的原理是用timer定时器间隔一定的时间来驱动scrollView上的内容偏移,来实现滚动的效果,原理比较简单,关键是有些细节需要处理好,实现流畅效果的同时要考虑到性能优化 这里是.h文件的接口方法及属性,可适应大部分自定义场景 /*初始化*/ -(instancetype)initWithFrame:(CGRect)frame textArray:(NSArray *)textArray colorArray:(NSArray *)textColorArray; /

  • iOS动画之向右拉的抽屉3D效果

    首先我们忽略掉3D效果,先要做的是一个右拉的抽屉效果. 总体思路: 1.创建一个ContainerViewController容器控制器,然后把左侧选择菜单的SideMenuViewController,和右侧负责显示内容的MainViewController 添加到ContainerViewController中. 2.给容器控制器ContainerViewController添加一个手势监听,通过修改偏移量完成抽屉效果. 3.设置anchorPoint,给左侧SideMenuViewCont

  • IOS 波纹进度(waveProgress)动画实现

    LXWaveProgress A simple wave components 一个简单的波浪进度动画,高度可定制.具体效果见Demo. 使用方法 LXWaveProgressView *progressView1 = [[LXWaveProgressView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; progressView1.center=CGPointMake(CGRectGetMidX(self.view.bounds), 270

  • IOS实现视频动画效果的启动图

    先上效果图 实现思路 主要思路就是用一个控制器来作为播放视频的载体,然后在让这个控制器作为根视图,视频播放完成之后那就该干嘛干嘛了. 话不多说了,下面就放代码好了 先新建一个控制器AnimationViewController在控制器中新建一个属性moviePlayer,记得要先引入系统库<MediaPlayer/MediaPlayer.h> @property (nonatomic, strong) MPMoviePlayerController *moviePlayer; 设置movieP

  • iOS仿支付宝芝麻信用分数仪表盘动画效果

    先看看效果图: 仪表盘动画效果.jpg 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字-->背景颜色变化 * */ #import <UIKit/UIKit.h> @interface ZLDashboardView : UIView @property (nonatomic, strong) UIImage *bgIm

随机推荐