3D动画实现总结

作者: 懒得起名的伊凡 | 来源:发表于2015-11-15 15:37 被阅读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)

    • 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

    相关文章

      网友评论

        本文标题:3D动画实现总结

        本文链接:https://www.haomeiwen.com/subject/teohhttx.html