在这里我们将使用CATransform3D
来实现所需要的3D效果。CATransform3D
和CGAffineTransform
是相似的,只不过就是增加了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
网友评论