CATransform3D骰子

CATransform3D实现色子动画；

看来很有立体感，那么让我们慢慢实现它

首先我们创建一个view 看看view的立体效果

 private lazy var diceView : UIView = {

        let view = UIView()

         view.backgroundColor = UIColor.orange

        return view

    

    }()

func viewTransForm(){

        var transform = CATransform3DIdentity

        transform.m34 = -1/500

        let angle = CGFloat(45)

        bgView.layer.transform = CATransform3DRotate(transform, angle, 0, 1, 0)

    }

  override func viewDidLoad() {

        super.viewDidLoad()

let viewFrame = UIScreen.main.bounds

         diceView.frame =  CGRect(x: 0, y: viewFrame.maxY / 2 - 50, width: viewFrame.width, height: 100)

         view.addSubview(diceView)

viewTransForm()

}

代码写完了，效果图如下：

有了立体的效果了；

下面让我们给他加个滑动手势看看；

let angle = CGPoint.init(x:0,y:0)

func viewTransForm(sender:UIPanGestureRecognizer){

        let point = sender.translation(in:  diceView)

        let angleX = angle.x + (point.x/30)

        let angleY = angle.y + (point.y/30)

        var transform = CATransform3DIdentity

       

        let angle = CGFloat(45)

        bgView.layer.transform = CATransform3DRotate(transform, angle, 0, 1, 0)

        transform.m34 = -1/500

        transform = CATransform3DRotate(transform, angleX, 0, 1, 0)

        transform = CATransform3DRotate(transform, angleY, 1, 0, 0)

//        bgView.layer.transform = transform //本身转的话，转的太快所以让sublayerTransform转

         diceView.layer.sublayerTransform = transform

        if sender.state == .ended {

            angle.x = angleX

            angle.y = angleY

        }

    }

  override func viewDidLoad() {

        super.viewDidLoad()

let viewFrame = UIScreen.main.bounds

         diceView.frame =  CGRect(x: 0, y: viewFrame.maxY / 2 - 50, width: viewFrame.width, height: 100)

         view.addSubview(diceView)

        let pan  = UIPanGestureRecognizer(target: self, action: #selector(ViewController.viewTransForm(sender:)))

        diceView.addGestureRecognizer(pan)

}

效果如下：

 因为判定旋转角度的依据，就是手势在这个 View 上面移动的位置，而 View 在转动的时候坐标会随着旋转而不停的变动，以至于手势无法准确的控制，所以要拿一个不会动的对象当作基准，并且不能因为转动而改变可控的面积，解决办法如下（改动的程序代码以黄色标示）：

let angle = CGPoint.init(x:0,y:0)

func viewTransForm(sender:UIPanGestureRecognizer){

        let point = sender.translation(in:  diceView)

        let angleX = angle.x + (point.x/30)

        let angleY = angle.y + (point.y/30)

        var transform = CATransform3DIdentity

       

        let angle = CGFloat(45)

        bgView.layer.transform = CATransform3DRotate(transform, angle, 0, 1, 0)

        transform.m34 = -1/500

        transform = CATransform3DRotate(transform, angleX, 0, 1, 0)

        transform = CATransform3DRotate(transform, angleY, 1, 0, 0)

//        bgView.layer.transform = transform //本身转的话，转的太快所以让sublayerTransform转

         diceView.layer.sublayerTransform = transform

        if sender.state == .ended {

            angle.x = angleX

            angle.y = angleY

        }

    }

  override func viewDidLoad() {

        super.viewDidLoad()

let viewFrame = UIScreen.main.bounds

         diceView.frame =  CGRect(x: 0, y: viewFrame.maxY / 2 - 50, width: viewFrame.width, height: 100)

         view.addSubview(diceView)

let angle = CGPoint.init(x:0,y:0)

func viewTransForm(sender:UIPanGestureRecognizer){

        let point = sender.translation(in:  diceView)

        let angleX = angle.x + (point.x/30)

        let angleY = angle.y + (point.y/30)

        var transform = CATransform3DIdentity

       

        let angle = CGFloat(45)

        bgView.layer.transform = CATransform3DRotate(transform, angle, 0, 1, 0)

        transform.m34 = -1/500

        transform = CATransform3DRotate(transform, angleX, 0, 1, 0)

        transform = CATransform3DRotate(transform, angleY, 1, 0, 0)

        bgView.layer.transform = transform 

        if sender.state == .ended {

            angle.x = angleX

            angle.y = angleY

        }

    }

  override func viewDidLoad() {

        super.viewDidLoad()

        let viewFrame = UIScreen.main.bounds

         diceView.frame =  CGRect(x: 0, y: viewFrame.maxY / 2 - 50, width: viewFrame.width, height: 100)

         view.addSubview(diceView)

 let viewFrame = UIScreen.main.bounds

         diceView.frame =  CGRect(x: 0, y: viewFrame.maxY / 2 - 50, width: viewFrame.width, height: 100)

         view.addSubview(diceView)

        let pan  = UIPanGestureRecognizer(target: self, action: #selector(ViewController.viewTransForm(sender:)))

        diceView.addGestureRecognizer(pan)

}

  //底部的View

         let viewFrame = UIScreen.main.bounds

         diceView.frame =  CGRect(x: 0, y: viewFrame.maxY / 2 - 50, width: viewFrame.width, height: 100)

         view.addSubview(diceView)

        //控制慢慢旋转

        let subView = UIView.init(frame:  diceView.bounds)

//        subView.backgroundColor = UIColor.orange

        diceView.addSubview(subView)

       //控制慢慢旋转

        let subView = UIView.init(frame:  diceView.bounds)

        subView.backgroundColor = UIColor.orange

        diceView.addSubview(subView)

        let pan  = UIPanGestureRecognizer(target: self, action: #selector(ViewController.viewTransForm(sender:)))

        diceView.addGestureRecognizer(pan)

}

来下面让我们看下效果：

慢了好多了吧；

下面让我们添加色子图片；并且实现色子旋转

        var diceTransform = CATransform3DIdentity

        //第一个点

        let dian1 = UIImageView.init(image: UIImage(named: "dice1"))

        dian1.frame = CGRect(x: viewFrame.maxX/2-50, y: 0, width: 100, height: 100)

        diceTransform = CATransform3DTranslate(diceTransform, 0, 0, 50)

        dian1.layer.transform = diceTransform

        diceView.addSubview(dian1)

        /*

         加入骰子第 2、3 点，并分别垂直于 1 点：

         */

        //第2个点

       

        

        let dian2 = UIImageView.init(image: UIImage(named: "dice2"))

        dian2.frame = CGRect(x: viewFrame.maxX/2-50, y: 0, width: 100, height: 100)

        diceTransform = CATransform3DRotate(CATransform3DIdentity, CGFloat.pi/2, 0, 1, 0)

        diceTransform = CATransform3DTranslate(diceTransform, 0, 0, 50)

        dian2.layer.transform = diceTransform

        

        let dian3 = UIImageView.init(image: UIImage(named: "dice2"))

        dian3.frame = CGRect(x: viewFrame.maxX/2-50, y: 0, width: 100, height: 100)

        diceTransform = CATransform3DRotate(CATransform3DIdentity, -CGFloat.pi/2, 1, 0, 0)

        diceTransform = CATransform3DTranslate(diceTransform, 0, 0, 50)

        dian3.layer.transform = diceTransform

        diceView.addSubview(dian2)

        diceView.addSubview(dian3)

以此类推，就不写完了，有想看全程的，下载demo去看吧；

demo地址：http://download.youkuaiyun.com/detail/koocui/9881745