美文网首页iOS动画效果iOS Developer
iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果

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

作者: Jackey_Zhou | 来源:发表于2016-12-27 10:41 被阅读99次

先说下基本动画部分
基本动画部分比较简单, 但能实现的动画效果也很局限
使用方法大致为:

  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基本动画/关键帧动画/利用缓动函数实现物理动画效果

    先说下基本动画部分基本动画部分比较简单, 但能实现的动画效果也很局限使用方法大致为: 创建原始UI或者画面 创建C...

  • 用缓动函数模拟弹簧,碰撞等动画效果

    最近学习了一下用缓动函数模拟物理动画的效果,可以实现一些比较高级的动画效果,比如弹簧效果等。 1.缓动函数的动画效...

  • iOS Animation创建及使用

    iOS 实现的基本动画 头尾式动画 2.block动画的方法 iOS显示关键帧动画 关键帧动画 动画的创建和使用 ...

  • iOS里的核心动画

    iOS中核心动画分为:基本动画、关键帧动画、转场动画、动画组.(layer中不能真实改变图层动画值,我们所看到的动...

  • 动画函数

    Transition TypesiOS easing tween 动画效果缓动函数让界面动画更自然How to c...

  • AE制作动画的弹性效果

    在用AE制作动画时为动画加入弹性效果可以让动画效果更生动,更符合现实物理规律。 利用缓入缓出(fn+f9) 我在学...

  • iOS基础 - 核心动画(转)

    iOS基础 - 核心动画 一、核心动画 l核心动画基本概念 l基本动画 l关键帧动画 l动画组 l转场动画 lCo...

  • React native 动画详解

    参考文档 :动画概述、动画API、动画缓动函数、interactionmanager 文档其实已经比较详细了,这里...

  • UIViewAnimationWithBlocks

    本文主要介绍下UIView基于block形式的基本动画 一、基本动画 缩略版 精简版 带弹簧效果 二、关键帧动画 ...

  • Web API -- 动画函数封装

    **1.1. **动画函数封装 1.1.1 缓动效果原理 缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢...

网友评论

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

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