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

 更新时间:2016年10月30日 10:25:22   投稿:lqh  
这篇文章主要介绍了iOS 基本动画、关键帧动画、利用缓动函数实现物理动画效果的相关资料,需要的朋友可以参考下

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

先说下基本动画部分

基本动画部分比较简单, 但能实现的动画效果也很局限

使用方法大致为:

#1. 创建原始UI或者画面

#2. 创建CABasicAnimation实例, 并设置keypart/duration/fromValue/toValue

#3. 设置动画最终停留的位置

#4. 将配置好的动画添加到layer层中

举个例子, 比如实现一个圆形从上往下移动, 上代码:

//设置原始画面
  UIView *showView        = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  
  //创建基本动画
  CABasicAnimation *basicAnimation = [CABasicAnimation animation];
  
  //设置属性
  basicAnimation.keyPath      = @"position";
  basicAnimation.duration     = 4.0f;
  basicAnimation.fromValue     = [NSValue valueWithCGPoint:showView.center];
  basicAnimation.toValue      = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
  
  //设置动画结束位置
  showView.center = CGPointMake(50, 300);
  
  //添加动画到layer层
  [showView.layer addAnimation:basicAnimation forKey:nil];

接下来说下关键帧动画

其实跟基本动画差不多, 只是能设置多个动画路径  使用方法也类似, 大致为

#1. 创建原始UI或者画面

#2. 创建CAKeyframeAnimation实例, 并设置keypart/duration/values 相比基本动画只能设置开始和结束点, 关键帧动画能添加多个动画路径点

#3. 设置动画最终停留的位置

#4. 将配置好的动画添加到layer层中

举个例子, 红色圆形左右晃动往下坠落 上代码:

//设置原始画面
  UIView *showView        = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  
  [self.view addSubview:showView];
  
  //创建关键帧动画
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  
  //设置动画属性
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
  
  keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
                 [NSValue valueWithCGPoint:CGPointMake(100, 100)],
                 [NSValue valueWithCGPoint:CGPointMake(50, 150)],
                 [NSValue valueWithCGPoint:CGPointMake(200, 200)]];
  
  //设置动画结束位置
  showView.center = CGPointMake(200, 200);
  
  //添加动画到layer层
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

最后是利用缓动函数配合关键帧动画实现比较复杂的物理性动画

先说说什么是缓动函数, 就是有高人写了一个库可以计算出模拟物理性动画(比如弹簧效果)所要的路径

Github地址: https://github.com/YouXianMing/EasingAnimation

具体有哪些动画效果可看库中的缓动函数查询表, 简单举个小球落地的效果

上代码:

//设置原始画面
  UIView *showView        = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  
  [self.view addSubview:showView];
  
  //创建关键帧动画
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  
  //设置动画属性
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
  
    //关键处, 在这里使用的缓动函数计算点路径
  keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
                             toPoint:CGPointMake(50, 300)
                              func:BounceEaseOut
                           frameCount:4.0f * 30];
  
  //设置动画结束位置
  showView.center = CGPointMake(50, 300);
  
  //添加动画到layer层
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • iOS 水波纹动画的实现效果

    iOS 水波纹动画的实现效果

    本篇文章主要介绍了iOS 水波纹的实现的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • iOS如何保持程序在后台长时间运行

    iOS如何保持程序在后台长时间运行

    这篇文章主要为大家详细介绍了iOS如何保持程序在后台长时间运行,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • iOS图片拉伸小技巧

    iOS图片拉伸小技巧

    这篇文章主要为大家详细介绍了iOS图片拉伸小技巧,由浅入深的帮助大家掌握iOS图片拉伸的相关技巧,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 禁止iPhone Safari video标签视频自动全屏的办法

    禁止iPhone Safari video标签视频自动全屏的办法

    本篇文章给大家分析有没有办法禁止iPhone Safari video标签视频自动全屏,以下给出好多种情况分享,感兴趣的朋友可以参考下
    2015-09-09
  • iOS中无限循环滚动简单处理实现原理分析

    iOS中无限循环滚动简单处理实现原理分析

    这篇文章主要介绍了iOS中无限循环滚动简单处理实现原理分析,需要的朋友可以参考下
    2017-12-12
  • iOS10适配问题点总结

    iOS10适配问题点总结

    升级到ios10遇到一系列问题,今天小编抽时间吧iOS10适配问题点整理分享给大家,感兴趣的朋友可以参考下
    2016-09-09
  • iOS实现封装一个获取通讯录的工具类详解

    iOS实现封装一个获取通讯录的工具类详解

    这篇文章主要给大家介绍了关于iOS如何实现封装一个获取通讯录的工具类的相关资料,这是自己平时封装的一个工具类,使用非常方便,文中给出了详细的示例代码,需要的朋友们可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-10-10
  • iOS自定义collectionView实现毛玻璃效果

    iOS自定义collectionView实现毛玻璃效果

    不知道大家发现没有苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,所以这篇文章跟大家分享个iOS自定义collectionView实现毛玻璃效果的方法,有需要的可以参考借鉴,下面来一起看看。
    2016-09-09
  • iOS实现萌货猫头鹰登录界面动画

    iOS实现萌货猫头鹰登录界面动画

    本文介绍的动画效果仿自国外网站readme.io的登录界面,超萌可爱的猫头鹰,感兴趣的朋友们可以参考学习。
    2016-08-08
  • IOS观察者设计模式

    IOS观察者设计模式

    什么是观察者模式 什么是观察者模式?你曾经订阅过报纸吗?在订阅报纸的时候,你不用去任何地方,只需要将你的个人地址信息以及订阅信息告诉出版社,出版社就知道如何将相关报纸传递,本文给大家介绍ios观察者模式,感兴趣的朋友一起看看吧
    2015-12-12

最新评论