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

2023-02-13 18:10:01

先说下基本动画部分

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

使用方法大致为:

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

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

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

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

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

 //设置原始画面

     UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(, , , )];

     showView.layer.masksToBounds   = YES;

     showView.layer.cornerRadius    = .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(, )];

     //设置动画结束位置

     showView.center = CGPointMake(, );

     //添加动画到layer层

     [showView.layer addAnimation:basicAnimation forKey:nil];

接下来说下关键帧动画

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

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

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

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

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

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

 //设置原始画面

     UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(, , , )];

     showView.layer.masksToBounds   = YES;

     showView.layer.cornerRadius    = .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(, )],

                                  [NSValue valueWithCGPoint:CGPointMake(, )],

                                  [NSValue valueWithCGPoint:CGPointMake(, )]];

     //设置动画结束位置

     showView.center = CGPointMake(, );

     //添加动画到layer层

     [showView.layer addAnimation:keyFrameAnimation forKey:nil];

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

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

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

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

上代码:

 //设置原始画面

     UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(, , , )];

     showView.layer.masksToBounds   = YES;

     showView.layer.cornerRadius    = .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(, )

                                                             func:BounceEaseOut

                                                       frameCount:4.0f * ];

     //设置动画结束位置

     showView.center = CGPointMake(, );

     //添加动画到layer层

     [showView.layer addAnimation:keyFrameAnimation forKey:nil];

码农公寓

相关文章