3D动画实现总结

在这里我们将使用CATransform3D来实现所需要的3D效果。CATransform3DCGAffineTransform是相似的,只不过就是增加了z轴坐标,来表示设备距离我们眼睛的直线距离。

例子是将 《iOS Animations By Tutorials》中的例子有Swift实现改写为Objective-C实现。

先看一下例子最终实现的效果

CATransform3D的说明

先来段代码,这是我们生成3D效果的

CATransform3D identity = CATransform3DIdentity;
identity.m34 = -1.0/1000;

CGFloat remainingPercent = 1.0 - percent;
CGFloat angle = remainingPercent * (-M_PI_2);
CATransform3D rotationTransform = CATransform3DRotate(identity, angle, 0.0, 1.0, 0.0);
CATransform3D translationTransform = CATransform3DMakeTranslation(MenuWidth * percent, 0, 0);
CATransform3D restultTransform = CATransform3DConcat(rotationTransform, translationTransform);

首先说明一下m34的赋值
这里的1000是摄像机距离layer的距离,距离不同,所能看到的视图的范围就不同。可以改变尝试,来获取我们所需的结果。

说明方法CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z)

  • angle 是所需要变化的角度
  • x y z 设置为零表示不围绕该轴做旋转,如果设置为1,则绕该轴做旋转。

CATransform3DConcat是将两种方式合并为一个动画一起执行。

shouldRasterize属性的默认值是 NO,可将其设置为YES来减轻锯齿的效果。记得动画结束时将其设置为 NO。

self.menuViewController.view.layer.shouldRasterize = NO;

anchorPoint锚点的设置。默认值(0.5,0.5)。通过设置该属性来实现视图围绕不同位置旋转。记得在视图添加到父视图之后在进行设置,因为frame也是相对于锚点的。

self.menuViewController.view.layer.anchorPoint = CGPointMake(1.0,0);

项目地址 OfficeBuddy3D

还有另一种方式添加动画。

    var imageTransform = CATransform3DIdentity
    
    //1
    imageTransform = CATransform3DTranslate(
      imageTransform, 0.0, imageYOffset, 0.0)
    //2
    imageTransform = CATransform3DScale(
      imageTransform, 0.95, 0.6, 1.0)
    //3
    imageTransform = CATransform3DRotate(
      imageTransform, CGFloat(M_PI_4/2), -1.0, 0.0, 0.0)

    let animation = CABasicAnimation(keyPath: "transform")
    animation.fromValue = NSValue(CATransform3D:
      image.layer.transform)
    animation.toValue = NSValue(CATransform3D: imageTransform)
    animation.duration = 0.33
    
    image.layer.addAnimation(animation, forKey: nil)

    image.layer.transform = imageTransform
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Laye...
    小猫仔阅读 3,664评论 1 4
  • Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,...
    45b645c5912e阅读 2,996评论 0 21
  • >*很不幸,没人能告诉你母体是什么,你只能自己体会* --骇客帝国 在第四章“可视效果”中,我们研究了一些增强图层...
    夜空下最亮的亮点阅读 1,631评论 0 2
  • 在第四章“视觉效果”中,我们研究了一些增强图层和它的内容显示效果的一些技术,在这一章中,我们将要研究可以用来对图层...
    乐意先生阅读 1,750评论 0 2
  • 从来不曾如此欣赏, 没有一处如此狂欢。 此时的宁静对我的内心如此充满意义, 如此令我感动。 她好像直接向内心倾诉又...
    青衫湿旧阅读 332评论 19 21