旋转拨盘控制的核心动画困难(非常详细)

2023-12-30

我正在尝试创建一个旋转拨号控件,基本上是一组 6 位数字,它们不断旋转以产生旋转数字计的效果(类似于您的电表/水表,或者可能是扑克机,实际上与现有的 UIPickerView 控件,但具有完全不同的外观和感觉)。

到目前为止,我几乎可以正常工作了,但我正处于核心动画让我感到悲伤的阶段。

它非常复杂,因此代码片段很难给出正在发生的事情的良好快照,所以我认为伪代码就足够了。

首先,在视图设置方面,我有 6 个独立的UIViews(称为 NumberView1、NumberView2 等),每个控件中的每个数字。

在每个 NumberViewX 中我有另一个UIView,这是一个容器视图,称为ContainerView1、2等...

然后我有10个UIImageView以不同的 Y 偏移量彼此堆叠。这些图像都是 30x30,非常漂亮。首先是 9,然后是 y 偏移量 30 处的 8,然后是 y 偏移量 60 处的 7,等等……一直到 y 偏移量 270 处的 0。

重要提示:我的号码只会向上滚动

这些数字代表 5 位小数点数字(即 2.34677),该数字向上滚动(例如,滚动到 2.61722)。

我还有一些字典,其中保存每个数字的当前数值以及每个数字的偏移量:

NSArray *offsets = [[NSArray alloc] initWithObjects: 
                    [NSNumber numberWithInt:0],    //9
                    [NSNumber numberWithInt:-30],  //8
                    [NSNumber numberWithInt:-60],  //7
                    [NSNumber numberWithInt:-90],  //6
                    [NSNumber numberWithInt:-120], //5
                    [NSNumber numberWithInt:-150], //4
                    [NSNumber numberWithInt:-180], //3
                    [NSNumber numberWithInt:-210], //2
                    [NSNumber numberWithInt:-240], //1
                    [NSNumber numberWithInt:-270], //0
                    nil];

NSArray *keys = [[NSArray alloc] initWithObjects: 
                 [NSNumber numberWithInt:9],
                 [NSNumber numberWithInt:8],
                 [NSNumber numberWithInt:7],
                 [NSNumber numberWithInt:6],
                 [NSNumber numberWithInt:5],
                 [NSNumber numberWithInt:4],
                 [NSNumber numberWithInt:3],
                 [NSNumber numberWithInt:2],
                 [NSNumber numberWithInt:1],
                 [NSNumber numberWithInt:0], nil];

offsetDict = [[NSDictionary alloc] initWithObjects:offsets forKeys:keys];

[currentValuesForDecimalPlace setObject:[NSNumber numberWithInt:2] forKey: [NSValue valueWithNonretainedObject: self.containerViewDollarSlot1]];
[currentValuesForDecimalPlace setObject:[NSNumber numberWithInt:8] forKey: [NSValue valueWithNonretainedObject: self.containerViewDecimalPlace1]];
[currentValuesForDecimalPlace setObject:[NSNumber numberWithInt:3] forKey: [NSValue valueWithNonretainedObject: self.containerViewDecimalPlace2]];
[currentValuesForDecimalPlace setObject:[NSNumber numberWithInt:3] forKey: [NSValue valueWithNonretainedObject: self.containerViewDecimalPlace3]];
[currentValuesForDecimalPlace setObject:[NSNumber numberWithInt:8] forKey: [NSValue valueWithNonretainedObject: self.containerViewDecimalPlace4]];
[currentValuesForDecimalPlace setObject:[NSNumber numberWithInt:5] forKey: [NSValue valueWithNonretainedObject: self.containerViewDecimalPlace5]];

现在对于逻辑,我开始将 ContainerView 的图层属性设置为 Y 的某些偏移量,这会将当前数字移动到正确的位置,如下所示:

self.containerViewDollarSlot1.layer.transform =   CATransform3DTranslate(self.containerViewDollarSlot1.layer.transform, 0, -210, 0);
self.containerViewDecimalPlace1.layer.transform = CATransform3DTranslate(self.containerViewDecimalPlace1.layer.transform, 0, -30, 0);
self.containerViewDecimalPlace2.layer.transform = CATransform3DTranslate(self.containerViewDecimalPlace2.layer.transform, 0, -180, 0);
self.containerViewDecimalPlace3.layer.transform = CATransform3DTranslate(self.containerViewDecimalPlace3.layer.transform, 0, -180, 0);
self.containerViewDecimalPlace4.layer.transform = CATransform3DTranslate(self.containerViewDecimalPlace4.layer.transform, 0, -30, 0);
self.containerViewDecimalPlace5.layer.transform = CATransform3DTranslate(self.containerViewDecimalPlace5.layer.transform, 0, -120, 0);

这将显示数字 2.83385,这是出于测试目的的任意数字。

然后我在文本框中输入另一个值,然后点击启动按钮,启动动画逻辑,这就是我在核心动画中遇到困难的地方(如标题所示)

I call:

[self animateDecimalPlace: 0
            withAnimation: self.dollarSlot1Animation
         andContainerView: self.containerViewDollarSlot1];
[self animateDecimalPlace: 1 
            withAnimation: self.decimalPlace1Animation 
         andContainerView: self.containerViewDecimalPlace1];
//etc... for all 6 numbers

其中dollarSlot1Animation是CABasicAnimation ivar

该方法定义如下:

- (void) animateDecimalPlace: (int) decimalIndex withAnimation: (CABasicAnimation*)animation andContainerView: (UIView*) containerView{

NSRange decimalRange = {decimalIndex == 0 ? 0 : 2,  
                        decimalIndex == 0 ? 1 : decimalIndex};

double diff = 0;
if (decimalIndex == 0)
{
    int decimalPartTarget = [[[NSString stringWithFormat:@"%f", targetNumber] substringWithRange: decimalRange] intValue];
    int decimalPartCurrent = [[[NSString stringWithFormat:@"%f", currentValue] substringWithRange: decimalRange] intValue]; 
    diff = decimalPartTarget - decimalPartCurrent;
}
else {
    double fullDiff = targetNumber - currentValue;
    diff = [[[NSString stringWithFormat:@"%f", fullDiff] substringWithRange: decimalRange] doubleValue];
}

animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeRemoved;
animation.duration = 5.0;

NSNumber *n = [currentValuesForDecimalPlace objectForKey:[NSValue valueWithNonretainedObject: containerView]];
NSNumber *offset = (NSNumber*)[offsetDict objectForKey: n];
int rotations = [self setupNumberForAnimation: diff decimalIndex: decimalIndex forContainer: containerView];
int finalOffset = (rotations*30)+([offset intValue]);
CATransform3D translation = CATransform3DMakeTranslation(0, finalOffset, 0);

animation.fromValue = [NSValue valueWithCATransform3D:containerView.layer.transform];
animation.toValue = [NSValue valueWithCATransform3D:translation];
animation.delegate = self;
[containerView.layer addAnimation: animation forKey: [NSString stringWithFormat:@"%i", decimalIndex] ];
}

正如你所看到的(或者也许没有:))我基本上独立地对待每个数字,并告诉它转换到新的 Y 位置,但你可能已经注意到其中的一个方法称为setupNumberForAnimation这是另一个动态添加更多内容的大型方法UIImageViews 到容器 UIViewabove最初的 10 个图像块。

例如,一开始有 10 个图块,如果我想将表盘向上滚动 21 个点(例如,从 3 到 24),我需要在 9 以上添加 15 个新数字,然后为容器的平移设置动画查看最顶部的图像图块。

滚动完成后,我删除动态添加的UIImageViews 并将容器视图的 y 偏移重新定位回 0 到 -270 之间的值(本质上最终达到相同的数字,但删除所有不必要的图像视图)。

这给出了我想要的流畅动画。它有效。相信我 :)

我的问题有两个,首先,当动画停止时,核心动画将动画更改恢复到图层,因为我已经设置了animation.fillMode = kCAFillModeRemoved;我无法弄清楚在动画完成后如何设置容器层的 y 偏移量,我知道这听起来很奇怪,但如果我将 fillMode 属性设置为 kCAFillModeForwards,我尝试的任何操作似乎都不会对该层产生影响。

其次,当动画停止并恢复更改时,动画恢复平移和再次设置它之间会出现微小的闪烁,我不知道如何解决这个问题。

我知道这里有很多细节和特殊性,但是任何有关如何实现这一目标的帮助或想法将不胜感激。

多谢


我记得WWDC10的CoreAnimation视频中有一些关于动画跳回之前状态的问题,您可以从苹果免费下载。

稍后我得查一下,但是当然有委托方法- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)flag当动画完成时会调用它。这将是一个做家务的好地方。也许你可以通过查看来设置图层的 y 偏移toValue动画的属性。

这只是一个远景,但也许它指向了正确的方向。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

旋转拨盘控制的核心动画困难(非常详细) 的相关文章

  • 带有文本字段的 iPhone AlertView

    我有一个UIAlertView with a UITextField在里面 我想输入mail id并提交于UIAlertView s ok按钮 但是UITextField in the UIAlertView没有回复 请帮助我 thankz
  • HTML 分页

    有没有html分页的开源项目 我正在为 iPhone 开发一个应用程序 我想在 UIWebView 上显示 HTML 文件 并且不希望用户向下滚动以查看屏幕上未显示的剩余内容 我想在第二个 UIWebView 上显示剩余的内容 我怎样才能做
  • Facebook iPhone SDK:上传图像时显示进度条

    我想在我的 iPhone 应用程序将图像上传到 Facebook 时显示进度条 是否可以 我可以对我发出的每个 FBRequest 执行此操作吗 我还使用 FBRequest 来检查扩展权限 有时需要花费很多时间 谢谢 对于进度条 您可以做
  • 查找已用应用程序名称的捆绑包/开发人员

    我正在尝试将应用程序上传到应用程序商店并收到以下错误 很容易理解 The App Name you have entered has already been used 该应用程序不在 iTunes 上 有什么方法可以找出谁拥有该应用程序或
  • 在 iOS 上使用 Web 服务的最佳方式?

    我想构建一个 iOS 应用程序 让您登录到网络服务 之后 应用程序将 当用户选择时 通过 https 发送登录名 密码以及请求的变量 例如 在请求 新闻更新 后 它将收到 XML 格式的请求信息 类似于
  • 当 UITextField 已满或空时显示警报 Swift

    下面的代码中 如果 userNameTF 或 passwordTF 已满或为空 则会显示警报 IBAction func LoginBtn sender AnyObject let userName userNameTF text let
  • UIImagePickerView 控制器 - 图像路径 - iphone

    UIImagePickerView控制器返回NSData的图像 我的要求是将图像的路径存储为 varchar 数据类型 从中选择图像后UIImagePickerView 如何获取iPhone照片库中所选图片的完整路径 我的应用程序不必担心在
  • 如何恢复消耗品应用内购买?

    我正在开发一款 iOS 游戏 用户可以通过应用内消耗品购买一定数量的内部货币 比如 1000 金币 如果用户想将余额从一台设备转移到另一台设备 如何恢复消耗品购买 在苹果的文档中 它说我们必须使用我们自己的服务器 但是如何获取用户的Appl
  • iphone NSDate 转换问题

    在我的 facebook 图表 Api 中 我正在获取这些数据 来自杰森 updated time 2011 05 17T14 52 16 0000 我正在使用此代码将其转换为有效的日期格式 NSDateFormatter df NSDat
  • 架构armv7的重复符号

    尝试在我现有的应用程序中使用 Layar SDK 时出现以下错误 我该如何解决这个问题 Ld Users pnawale Library Developer Xcode DerivedData hub afxxzaqisdfliwbzxbi
  • 为什么 iPhone 上的纹理图像需要具有二维幂?

    我正在尝试解决 iPhone 上的闪烁问题 open gl es game 我有一些没有 2 维的图像 我将用具有适当尺寸的图像替换它们 但为什么尺寸需要是 2 的幂 大多数系统 甚至许多现代显卡 需要 2 的幂纹理的原因是 mipmap
  • CGImage/UIImage 在 UI 线程上延迟加载会导致卡顿

    我的程序显示一个水平滚动表面 从左到右平铺有 UIImageViews 代码在 UI 线程上运行 以确保新可见的 UIImageView 分配有新加载的 UIImage 加载发生在后台线程上 一切工作几乎都很好 除了每个图像变得可见时出现口
  • 在运行时获取 iPhone 应用程序的产品名称?

    如何才能实现这一目标 我想获取名称 以便可以在应用程序中显示它 当然 每次更改名称时不必在代码中更改它 Try this NSBundle bundle NSBundle mainBundle NSDictionary info bundl
  • 如何检查 BOOL 是否为空?

    有没有办法在将值分配给 BOOL 之前检查该值是否为 NULL Nil 例如 我在 NSDictionary 中有一个值可以是 TRUE FALSE NULL mySTUser current user following results
  • 在午夜更新应用程序徽章,并提供以下选项:应用程序未启动或在后台,徽章数量可能会减少

    我正在阅读许多有关本地通知的内容以及它们如何帮助更新应用程序徽章编号 我想在午夜更新此徽章 并将其值设置为我在午夜之前无法知道的数字 因此 如果可能的话 我想在午夜启动一个功能来更新 加载一些数据 检查要显示的数字 并将其显示在徽章上 当然
  • 检索 iPhone 中的 Outlook 联系人

    我想通过应用程序导入所有 Outlook 联系人 有什么办法可以做到这一点吗 请告诉我 您可以通过实施 Microsoft Exchange 服务器协议来实现此目的 微软MSDN http msdn microsoft com en us
  • 径向渐变绘制性能 - OpenGL-ES 可以改进吗?

    我正在开发一个图像处理应用程序 它将径向渐变叠加在从照片库加载的图像上 在屏幕上 我有一个滑块可以动态地增大 减小径向渐变的半径 我发现模拟器上的性能很好 但在 iPhone 3G 或 3GS 上就很糟糕了much移动滑块时重绘速度较慢 我
  • iphone:在 UIWebView 之上查看?

    我正在开发一个浏览器应用程序 并且 UIWebView 顶部有一个地址栏 在 MobileSafari 上 如果向下滚动 地址栏开始移动到顶部 移出屏幕 并且 UIWebView 不会滚动 只有当地址栏完全消失时 它才开始滚动 我也想在我的
  • 如何适配iPhone 4屏幕分辨率?

    根据Apple http www apple com iphone specs html iPhone 4 拥有新的 更好的屏幕分辨率 3 5 英寸 对角线 宽屏多点触控显示屏960 x 640 像素分辨率 326 ppi 这个小细节对我们
  • UIWebView 中的 PDF

    我正在创建一个杂志应用程序 我在 UIWebView 中显示杂志的每一页 不过 Web 视图不会用 PDF 填满屏幕 它周围有一个边界 我怎样才能全屏显示它 我还没有使用 UIWebView 尝试过此操作 但您也许可以执行类似的操作来以编程

随机推荐

  • Firebase如何检查交易成功或失败?

    我正在尝试更新事务中的 firebase 节点 简单的事情 按照文档 https www firebase com docs ios guide saving data html https www firebase com docs io
  • 系统启动时哪个核心首先初始化?

    我想知道CPU启动时多核处理器的哪个核心首先初始化 我的意思是在引导加载程序级别 是第一个核心 还是随机核心 您想要阅读本地 apic 您可以在 卷 2a 中阅读 http www intel com content www us en p
  • 如何在R编程中显示同一坐标中的总数

    更新2017年9月11日问题 这是我在 R 中集群 kmode 的代码 library klaR setwd D kmodes data to cluster lt read csv kmodes csv header TRUE sep c
  • 射线和椭球相交精度提高

    我需要提高我的一个功能的精度大气散射 GLSL 片段着色器 https stackoverflow com a 19659648 2521214它计算单射线和轴对齐椭球体之间的交集 这是矿山大气散射着色器的核心功能 旧的原始着色器已打开fl
  • 对 favicon 静态图像的哈希进行摩卡测试失败

    我正在尝试使用 mocha 请求和 SHA1 哈希来编写集成测试 以确认 Express 提供的图标与文件系统上的图标相同 我得到两个不同的哈希值 但不明白为什么 编码有可能改变吗 process env NODE TLS REJECT U
  • ArrayBuffer 到 blob 的转换

    我有一个项目需要在浏览器中显示 djvu 架构 我发现这个老Github 上的库 https github com lebedkin minidjvu js据我了解 它将 djvu 文件转换为 bmp 然后将它们放入 canvas 元素中
  • 如何在 Android 4.2.2 上启用 JavaScript 控制台

    我正在尝试启用 JavaScript 控制台来调试运行 4 2 2 的 Samsung Galaxy S4 上的原生 Android 浏览器中的网页 在 S3 上 我只需在地址栏中输入 about debug 就会出现 但它在 S4 上不起
  • WPF 双向绑定 XML

    我正在努力掌握 WPF 更具体地说 是执行 xml 文件的双向绑定 我应该使用 XMLDataProvider 还是他们的另一个 更好 选择 数据显示正常 但当我更改条目时 更改不会反映在 xml 文件中 The XML
  • Jenkins 中颠覆轮询失败的电子邮件通知

    由于密码更改 我们在 Jenkins 中的一项工作失败了 它的颠覆轮询超过 24 小时 当这种情况发生时 并不是立即显而易见的 除非您注意到作业没有运行并实际检查日志 构建不会失败 因为它从未启动 有没有人找到解决方案来通知 Jenkins
  • Spark中如何获取数组列的所有组合?

    假设我有一个数组列group ids user id group ids 1 5 8 3 1 2 3 2 1 4 Schema root user id integer nullable false group ids array null
  • Composer 未下载包的 src 目录

    我正在使用 Laravel 和 Composer 构建一个网络应用程序 在我的本地计算机上 我在composer json 文件中设置了其要求 并且一切正常 我正在使用 Github 推送到生产服务器 但是 然后我运行composer in
  • 我能否获取 C#/WPF 中绑定对象的 Type()(即使绑定值为 null)?

    我与未知来源有绑定 我所拥有的只是绑定 我没有其他方法来查看绑定对象 我需要找出绑定对象的类型 即使该值为空 这就是我的问题所在 我通过绑定到一个对象然后使用该对象作为获取类型的方式来评估绑定 但即使该值为 null 我也需要知道该类型 例
  • 使用 pytest 时如何组织装置

    固定装置往往较小且可重复使用 鉴于特定装置可以依赖其他装置 pytest fixture def Account db memcache 我想在模块中组织我的装置 并将它们导入到特定的测试文件中 如下所示 例如 from fixtures
  • 从 XP 中的隐藏或剪切窗口复制内容?

    我需要将隐藏窗口 BitBlt 的内容复制到另一个窗口 问题是 一旦我隐藏源窗口 我得到的设备上下文就不再被绘制 你需要的是打印窗口 http msdn microsoft com en us library ms535695 aspx从
  • airodump-ng 使用 python subprocess.Popen 通信方法输出

    嗨 我正在尝试从中获得连续输出airodump ng mon0 因此 我试图读取的输出airodump ng mon0经过一段时间与 Popen communicate 但仍然无法得到任何东西 import subprocess airod
  • 如何在backbone.js中创建基本视图?

    我需要创建一个基本视图 我的所有视图都会扩展 我不太确定何时何地声明这个观点 基本上 我需要注入global variables我的所有模板 但我不会在每个模板中都这样做render 方法 这是我现在的树结构 main js app js
  • MySQL 更新查询 - 竞争条件和行锁定会遵守“where”条件吗? (PHP、PDO、MySQL、InnoDB)

    我正在尝试建立一个先到先得的模型销售页面 我们有 n 个相同类型的物品 我们希望将这 n 个项目分配给前 n 个发出请求的用户 每个项目对应有一个数据库行 当用户按下购买按钮时 系统会尝试查找尚未出售的条目 reservationCompl
  • .用曲线制作动画

    首先看一下 猫需要移动到 a 中的 xcurve 见箭头 当猫击中 x 时 应停留 10 秒 然后猫应返回 o 再次呈曲线状 然后重复 我用这段代码尝试过 function curve cat delay 10000 animate top
  • Webpack 从 /folder/folder.js 而不是 /folder/index.js 导入

    使用 webpack 当我在 blah 中创建一个 index js 时 然后执行import blah from blah 它成功地从index js获取 但是 我的代码编辑器现在充满了名为 index js 的选项卡 并执行 Ctrl
  • 旋转拨盘控制的核心动画困难(非常详细)

    我正在尝试创建一个旋转拨号控件 基本上是一组 6 位数字 它们不断旋转以产生旋转数字计的效果 类似于您的电表 水表 或者可能是扑克机 实际上与现有的 UIPickerView 控件 但具有完全不同的外观和感觉 到目前为止 我几乎可以正常工作