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.csdn.net/detail/koocui/9881745