CAAnimation——基本动画,关键帧动画和贝塞尔路径

2023-05-16

概述

在做对于图层的动画效果时,往往直接改变属性或者使用隐式动画是不能满足我们的需求的,所以我们就用到了显式动画,CAAnimation。它可以管理重复动画、准确的控制时间和步调,并且能设定图层过渡。当然,所有隐式动画能做到的,显式动画也都能做到。
来看下CAAnimation的继承体系

CABasicAnimation

- (void)demoViewBasicAnimation
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    
    animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(_demoView.center.x, _demoView.center.y)];  //可以省略...
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(270, 410)];
    animation.duration = 3.0f;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];    //动画速度设置
    
    [_demoView.layer addAnimation:animation forKey:nil];
}

编译运行,会发现动画在执行后demoView回到了起点,这里需要对动画的两个属性进行设置,让图层在完成动画后停留在动画后的状态。
......    

   animation.fillMode = kCAFillModeForwards;
   animation.removedOnCompletion = NO;

......

加入这两行代码后就简单的完成了位移动画
注意这里填写的keyPath是一个NSString类型的字符串,这是系统封装好的键路径,2维常用的主要有 transform opacity position等。
在CAAnimation中可以实现代理方法
- animationDidStart:
- animationDidStop:finished:
分别对应刚启动时的状态和完成后的状态
在addAnimation:forKey:方法中,也可以给这个动画设置一个键,可以在其他地方将其取出来,进行一些操作,比如删除。这也充分体现了kvc的灵活。
用到CALayer的 removeAnimationForKey:方法。

CAKeyframeAnimation

如果是简单的动画CABasicAnimation就能完成,CAKeyframeAnimation(关键帧动画)弥补了基本动画只能传入一对对应值的不足,关键帧动画支持传入一套数值或一个路径来完成动画。
- (void)demoViewKeyframeAnimation
{
    _demoView.layer.anchorPoint = CGPointMake(0.5, 0.0);
    CAKeyframeAnimation *animaiton = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    
    NSArray *rotationVelues = @[@(M_PI_4), @(-M_PI_4), @(M_PI_4)];
    animaiton.values = rotationVelues;
    animaiton.duration = 3.0f;
    animaiton.repeatCount = HUGE_VALF;      //    #define    HUGE_VALF    1e50f
    
    [_demoView.layer addAnimation:animaiton forKey:nil];
}

编译运行后可以发现demoView像一个钟摆一样不停摇晃,如果想效果更逼真,可以使用连续动画配合timingFunction来实现。

动画添加贝塞尔路径

- (void)demoViewBezierPathAnimation
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:_demoView.center];    //一定要设置 不然底层的CGPathRef找不到起始点,将会崩溃
    [path addCurveToPoint:CGPointMake(270, 410) controlPoint1:CGPointMake(0, Screen_Height) controlPoint2:CGPointMake(Screen_Width, 0)];    //以左下角和右上角为控制点
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path = path.CGPath;
    animation.duration = 3.0f;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    
    [_demoView.layer addAnimation:animation forKey:nil];
}
设置了一个贝塞尔路径,赋给动画的路径属性,两个控制点为左下以及右上

Demo源码 点击打开链接
以上为本篇博客全部内容,欢迎指正和交流。转载请注明出处~
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CAAnimation——基本动画,关键帧动画和贝塞尔路径 的相关文章

  • 基于java的小区物业报修管理系统

    本毕业设计课题是基于JAVAEE的小区物业报修管理系统 xff0c 以计算机为操作工具 xff0c MyEclipse为开发平台 mysql为后台数据库 系统开发将采用MVC模式 xff0c 实现对物业报修管理和报修服务评价管理等功能 xf
  • 3 物理层 数据通信基础知识 奈氏准则与香农定理 物理层传输介质 信道复用技术

    文章目录 1 物理层基本概念2 数据通信的基础知识2 1 典型的数据通信系统模型2 2 与通信相关的几个术语2 3 有关信道的几个概念2 4 基带 baseband 信号和带通 band pass 信号2 5 几种最基本的调制方法2 6 网
  • Android Studio 关于BottomNavigationView 无法预览视图的三种常规解决方法

    最近在使用底部导航栏 BottomNavigationView 时 xff0c 应用能正常运行 xff0c 但右侧Split Design无法显示预览视图 xff0c 很不方便 xff0c 查阅大量资料后 xff0c 得到了两种主流解决方案
  • ubuntu分辨率异常问题

    当ubuntu分辨率出现不正常情况时 xff0c 可能有两种现象 xff1a 当出现整体图标都偏大或者偏小的问题时 xff0c 可能是由于分辨率设置异常 如果存在响应的分辨率进行设置即可 xff0c 如果不存在则使用xrandr进行添加 x
  • VR版“半条命”大火,VR游戏迎来消费级市场的春天?

    彼之砒霜 xff0c 汝之蜜糖 2020年的艰难开局 xff0c 在让众多行业陷入困顿之际 xff0c 却让游戏业迎来了一场流量的盛宴 除了日进斗金的王者 吃鸡 xff0c 还有火爆朋友圈的动森 xff0c 一款3A级VR游戏 Half L
  • 读懂海尔智家大脑:深度体验的本质是深度生活

    了解科技行业的读者 xff0c 应该都对 大脑 这个名词不陌生 黑灯工厂 里指挥生产的 工业大脑 xff0c 繁忙机场里运筹帷幄的 航空大脑 xff0c 还有智慧城市建设的灵魂 城市大脑 如果家也有一颗总揽全局的大脑 xff0c 生活会发生
  • ubuntu 安装包报:下列软件包有未满足的依赖关系:

    root 64 ubuntu usr src linux 5 0 1 apt install zlib1g dev 正在读取软件包列表 完成 正在分析软件包的依赖关系树 正在读取状态信息 完成 有一些软件包无法被安装 如果您用的是 unst
  • vSphere虚拟化之ESXi安装及部署

    vSphere虚拟化之ESXi安装及部署 1 安装ESXi2 步骤 vClient的安装及连接3 使用VMware VSphere Client远程安装虚拟机 1 安装ESXi 安装环境 xff1a 用VMware安装ESXi 6 0一台虚
  • Flutter 学习之DIO封装

    简介 xff1a 需要导入的库 dio 3 0 9 json serializable 3 3 0 dio cookie manager 1 0 0 dio http cache 0 2 6 介绍 xff1a 在自己的这个封装中集成了 显示
  • Android 设置顶部的内容

    目录 想说的话实现实现一个自定义控件 他的自定义属性 Actviity 设置右侧的iconfragment 中 设置 想说的话 这里遇到一个问题就是设置抽取出来一个类似与以下的标题内容 自己忽然发现之前的时候没有完全理解 xff0c 所以自
  • Android 中关于两个线程同时进行的研究

    我们现在在做一个项目 xff0c 里面的内容就是通过硬件在黑暗的地方拍照 xff0c 然后进行图像分析 我们原先的思维逻辑是 xff1a 4s曝光时间 xff0c 曝光完成后拍照进行1s图像计算 xff1b 但是 xff0c 甲方忽然提出想
  • Android 之JNI 报错(一)

    今天导入了一个以前的项目 xff0c 结果各种报错 xff0c 这里记录一下 项目是一个使用到JNI的项目 xff0c 在项目中我就重新回顾一下 1 因为我知道项目使用到了JNI xff0c 所以直接到 local properties中修
  • 《Linux内核设计与实现》读书总结

    Linux内核设计与实现 进程管理 进程 xff1a 处于执行器的程序 xff0c 包含代码段 xff0c 打开的文件 xff0c 信号 xff0c 内核内部数据 xff0c 内存地址空间 xff0c 多个线程 xff0c 存放全局变量的数
  • Qubit 踩坑记

    今天又是日常踩坑的一天 对标 Thermo qubit 荧光计的设计已经完成好长时间了 但是领导忽然发出一个竞品数据对比图 从图中明显发现在一个小时之后 数据出现的时间比qubit 要慢 于是先去寻找结果和所对应的时间 通过数据库的查询 推
  • chatGPT 与文言一心的对比

    今天文言一心终于申请下来了 xff0c 马上测试一下 我测试的是汉昭帝刘弗陵 xff0c 百度百科如下所示 xff1a 使用chatGPT 的提问如下所示 xff1a 使用文言一心的测试如下所示 xff1a 从上述回答中可以看出 xff0c
  • 【Linux】【Ubuntu 】Ubuntu下安装Chrome

    本文记录 Ubuntu 下安装 Chrome 的方法 文章目录 1 安装 Chrome 的两种方式1 1 通过下载 deb 包安装 推荐 1 2 通过 apt install 安装 2 使用 Chrome 1 安装 Chrome 的两种方式
  • 【Linux】【Ubuntu】Ubuntu 开启 root 用户并开启 ssh 远程访问权限

    本文主要记录了Ubuntu下开启 root 用户以及 ssh 远程访问权限的方法 已在一下版本测试 xff1a Trusty Tahr Ubuntu 14 04 Xenial Xerus Ubuntu 16 04 其他Ubuntu发行版配置
  • org.apache.tomcat.util.modeler.BaseModelMBean.invoke【tomcat启动时出错】

    一 现象描述 12 Oct 2021 14 20 36 870 严重 RMI TCP Connection 3 127 0 0 1 org apache tomcat util modeler BaseModelMBean invoke 调
  • angular4 路由实际使用中的应用场景

    一个十分常见的企业网站结构如图所示为 xff1a 我们会点击左侧后 右边更换Component 解决方案有很多 不难 我们可以创建一个 壳组件 xff0c 将左侧放进去 xff0c 再利用路由来更改右侧Component xff0c 填充到
  • npm WARN npm npm does not support Node.js vX.X.X NPM 打包的时候,报错说不支持此版本

    遇到警告如下 xff1a npm WARN npm npm does not support Node js v12 14 0 npm WARN npm You should probably upgrade to a newer vers

随机推荐