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];

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