学无止境动画相关牛叉的demo

3D动画实现总结

2015-11-15  本文已影响232人  懒得起名的伊凡

在这里我们将使用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)

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
上一篇 下一篇

猜你喜欢

热点阅读