iOS动画:多个视图的3D动画(19)

22 篇文章 0 订阅
21 篇文章 0 订阅

通过这章,你将实现如下的相册效果:
image_1
在viewDidApear中添加卡片:

    for image in images {
        image.layer.anchorPoint.y = 0.0
        image.frame = view.bounds
        
        view.addSubview(image)
    }
     navigationItem.title = images.last?.title

在上一章中,我们只是在单个视图上调整transform属性,然后在3D空间中旋转它,现在由于我们的视图很多,所以我们只需设置它们父视图的透视图,节省大量工作。

    var perspective = CATransform3DIdentity
    perspective.m34 = -1.0/250.0
    view.layer.sublayerTransform = perspective

在这里,可以使用layer的sublayerTransform属性来设置所有子layer的透视图。
设置图像的偏移量,在barButton的点击方法里添加:

  @IBAction func toggleGallery(_ sender: AnyObject) {
    var imageYOffset: CGFloat = 50.0
    for subview in view.subviews {
        guard let image = subview as? ImageViewCard else {
            continue
        }
        var imageTransform = CATransform3DIdentity
        imageTransform = CATransform3DTranslate(imageTransform, 0.0, imageYOffset, 0.0)
        imageTransform = CATransform3DScale(imageTransform, 0.95, 0.6, 1.0)
        imageTransform = CATransform3DRotate(imageTransform, .pi/8, -1.0, 0, 0)
        
        
        image.layer.transform = imageTransform
        
        imageYOffset += view.frame.height / CGFloat(images.count)
    }
  }

因为已经在父视图里面设置了透视属性,所以上面的方法里面只需要专注于transform,看起来效果是这样的:
image_2
当我们点击按钮切换到卡片状态时,还没有进入的动画,在设置image的transform之前,我们来添加动画效果:

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

运行效果
image_3
当点击其中一个卡片时,将image切换到最前端,下面我们来实现这个功能。
其中有两个动画需要实现:一个是选择image的动画,另外一个是隐藏其它未选中的所有images。

    func selectImage(selectedImage: ImageViewCard) {
        for subview in view.subviews {
            guard let image = subview as? ImageViewCard else {
                continue
            }
            if image === selectedImage {//选中image
                
            }else {//隐藏其它images:
                UIView.animate(withDuration: 0.33, delay: 0.0, options: .curveEaseIn, animations: {
                    image.alpha = 0.0//首先设置为透明
                }) { (_) in//动画完成后设置为不透明,因为所选image会置于最前端,所以看不到其它image,设置alpha为1.0没有影响
                    image.alpha = 1.0
                    image.layer.transform = CATransform3DIdentity
                }
            }
        }
    }

将所选image显示在最前端:

                UIView.animate(withDuration: 0.33, delay: 0.0, options: .curveEaseIn, animations: {
                    image.layer.transform = CATransform3DIdentity
                }) { (_) in
                    self.view.bringSubview(toFront: image)
                }

最后设置标题

	self.navigationItem.title = selectedImage.title

运行效果:
image_5

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
import UIKit import QuartzCore import SceneKit class GameViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // create a new scene let scene = SCNScene(named: "art.scnassets/ship.scn")! // create and add a camera to the scene let cameraNode = SCNNode() cameraNode.camera = SCNCamera() scene.rootNode.addChildNode(cameraNode) // place the camera cameraNode.position = SCNVector3(x: 0, y: 0, z: 15) // create and add a light to the scene let lightNode = SCNNode() lightNode.light = SCNLight() lightNode.light!.type = SCNLightTypeOmni lightNode.position = SCNVector3(x: 0, y: 10, z: 10) scene.rootNode.addChildNode(lightNode) // create and add an ambient light to the scene let ambientLightNode = SCNNode() ambientLightNode.light = SCNLight() ambientLightNode.light!.type = SCNLightTypeAmbient ambientLightNode.light!.color = UIColor.darkGrayColor() scene.rootNode.addChildNode(ambientLightNode) // retrieve the ship node let ship = scene.rootNode.childNodeWithName("ship", recursively: true)! // animate the 3d object ship.runAction(SCNAction.repeatActionForever(SCNAction.rotateByX(0, y: 2, z: 0, duration: 1))) // retrieve the SCNView let scnView = self.view as! SCNView // set the scene to the view scnView.scene = scene // allows the user to manipulate the camera scnView.allowsCameraControl = true // show statistics such as fps and timing information scnView.showsStatistics = true // configure the view scnView.backgroundColor = UIColor.blackColor() // add a tap gesture recognizer let tapGesture = UITapGestureRecognizer(target: self, action: "handleTap:") scnView.addGestureRecognizer(tapGesture) } func handleTap(gestureRecognize: UIGestureRecognizer) { // retrieve the SCNView let scnView = self.view as! SCNView // check what nodes are tapped let p = gestureRecognize.locationInView(scnView) let hitResults = scnView.hitTest(p, options: nil) // check that we clicked on at least one object if hitResults.count > 0 { // retrieved the first clicked object let result: AnyObject! = hitResults[0] // get its material let material = result.node!.geometry!.firstMaterial! // highlight it SCNTransaction.begin() SCNTransaction.setAnimationDuration(0.5) // on completion - unhighlight SCNTransaction.setCompletionBlock { SCNTransaction.begin() SCNTransaction.setAnimationDuration(0.5) material.emission.contents = UIColor.blackColor() SCNTransaction.commit() } material.emission.contents = UIColor.redColor() SCNTransaction.commit() } } override func shouldAutorotate() -> Bool { return true } override func prefersStatusBarHidden() -> Bool { return true } override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask { if UIDevice.currentDevice().userInterfaceIdiom == .Phone { return .AllButUpsideDown } else { return .All } } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Release any cached data, images, etc that aren't in use. } }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值