iOS 模拟轮胎滚动3D动画效果
2016-05-17 18:02
821 查看
因为项目中需要实现跑车动画效果,于是希望采用静止的跑车图和转动的轮胎来实现跑车开动效果。首先轮胎的转动要考虑到3D环境中形状的变化,不应该是纯圆形的,而应该是椭圆形。有两种方法实现这样的效果,
一是通过连续的贴图不断的替换来得到需要的滚动的动画,优点是实现简单,不断循环替换图片就能得到滚动的效果,更加贴近真实的样子,有更多的细节。但是遇到线程繁忙时将会影响动画的效果,拉长动画的持续时间;同时增加了设计人员的压力和软件大小。
二是通过一张纯圆的轮胎贴图,通过代码来y轴旋转得到椭圆的接近真实环境下的轮胎形状,再通过z轴的转动来实现动画效果。这样的实现难度更高(计算rotation的值比较复杂),模拟的轮胎没有真实的那个角度的轮胎细节多。但是在系统卡的时候,会自动减少动画的帧数,而基本保证动画的持续时间,减少程序负荷。当然也更加节省设计的工作量。
综合考虑还是采用后者,毕竟轮胎滚动的时候速度快,显示的细节不容易观察到。加上礼物大量发送时可能造成堵塞,所以考虑选择后者来保证流畅度。
首先,让图片围绕y轴转动50度来模拟斜前方看到轮胎的椭圆效果。代码如下:
但是在程序中遇到轮胎滚动3D动画无法正确计算转动动画的问题。滚动没有按照我们预想的方式转动。时而椭圆,时而圆,时而消失,时而出现。最终发现问题的关键在于
-(void)keepRotationInDirection:(int)direction duration:(NSTimeInterval)duration;方法中的rotation转动角度的计算方法不同。会导致可能转动混乱。方法的具体代码如下,注释了的是错误的旋转角度计算方式。
区别在于“CATransform3D CATransform3DRotate (CATransform3D t,CGFloat angle, CGFloat
x,CGFloat y,
CGFloat z)”会在原有的rotation的基础上继续围绕需要的坐标轴旋转设定的角度。而“CATransform3D CATransform3DMakeRotation (CGFloat
angle, CGFloat x, CGFloat y,CGFloat z)”则会直接转到这角度,而不与已有的转动参数叠加。因而在我们的程序中需要保持原先y轴50度旋转的情况下进行z轴的轮胎转动动画。具体的“CATransform3D”的参数介绍请参考链接:http://blog.sina.com.cn/s/blog_51a995b70101mz3q.html
一是通过连续的贴图不断的替换来得到需要的滚动的动画,优点是实现简单,不断循环替换图片就能得到滚动的效果,更加贴近真实的样子,有更多的细节。但是遇到线程繁忙时将会影响动画的效果,拉长动画的持续时间;同时增加了设计人员的压力和软件大小。
二是通过一张纯圆的轮胎贴图,通过代码来y轴旋转得到椭圆的接近真实环境下的轮胎形状,再通过z轴的转动来实现动画效果。这样的实现难度更高(计算rotation的值比较复杂),模拟的轮胎没有真实的那个角度的轮胎细节多。但是在系统卡的时候,会自动减少动画的帧数,而基本保证动画的持续时间,减少程序负荷。当然也更加节省设计的工作量。
综合考虑还是采用后者,毕竟轮胎滚动的时候速度快,显示的细节不容易观察到。加上礼物大量发送时可能造成堵塞,所以考虑选择后者来保证流畅度。
首先,让图片围绕y轴转动50度来模拟斜前方看到轮胎的椭圆效果。代码如下:
[imageView.layer setAnchorPoint:CGPointMake(0.5, 0.5)]; [imageView.layer setTransform: CATransform3DMakeRotation(50 * (M_PI / 180.0f), 0, 1, 0)]; [self keepRotationInDirection:-1 duration:1];然后调用转动动画方法。
但是在程序中遇到轮胎滚动3D动画无法正确计算转动动画的问题。滚动没有按照我们预想的方式转动。时而椭圆,时而圆,时而消失,时而出现。最终发现问题的关键在于
-(void)keepRotationInDirection:(int)direction duration:(NSTimeInterval)duration;方法中的rotation转动角度的计算方法不同。会导致可能转动混乱。方法的具体代码如下,注释了的是错误的旋转角度计算方式。
-(void)keepRotationInDirection:(int)direction duration:(NSTimeInterval)duration{ float durationStep = duration/4; [UIView animateWithDuration:durationStep delay:0.0f options:UIViewAnimationOptionCurveLinear animations:^{ [imageView.layer setTransform:CATransform3DRotate(imageView.layer.transform, M_PI * 0.5f, 0, 0, direction)]; // [imageView.layer setTransform:CATransform3DMakeRotation(M_PI * 0.5f, 0, 0, direction)]; } completion:^(BOOL finished) { [self keepRotationInDirection:direction duration:duration]; }]; }
区别在于“CATransform3D CATransform3DRotate (CATransform3D t,CGFloat angle, CGFloat
x,CGFloat y,
CGFloat z)”会在原有的rotation的基础上继续围绕需要的坐标轴旋转设定的角度。而“CATransform3D CATransform3DMakeRotation (CGFloat
angle, CGFloat x, CGFloat y,CGFloat z)”则会直接转到这角度,而不与已有的转动参数叠加。因而在我们的程序中需要保持原先y轴50度旋转的情况下进行z轴的轮胎转动动画。具体的“CATransform3D”的参数介绍请参考链接:http://blog.sina.com.cn/s/blog_51a995b70101mz3q.html
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- Gifski:一个跨平台的高质量 GIF 编码器
- 模仿动画的放大缩小容器
- 3D设计 Adobe Acrobat 3D 8.1.0 英文版 下载
- jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
- Android实现定制返回按钮动画效果的方法
- Android中ViewFlipper的使用及设置动画效果实例详解
- jQuery实现美观的多级动画效果菜单代码
- php判断GIF图片是否为动画的方法
- jQuery实现动画效果circle实例
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 浅析JavaScript动画
- js排序动画模拟-插入排序
- javascript+HTML5的Canvas实现Lab单车动画效果