Question

为了执行一个图像变换为另一个图像的翻转动画，我有一个双层UIView（也试过UIView有两个子视图 - 同样的问题）在3D中围绕X（或Y）轴旋转。

当旋转角度低于pi / 2时，顶层隐藏底层，这是好的，但是在pi / 2和pi之间的角度我希望看到底层。

事实上，无论旋转角度如何都能看到顶层，尽管两层都很好，就像我隐藏顶层一样，我可以一直看到底层。

它看起来像苹果的僵硬设计，或者我可能会错过一些东西。到目前为止，我必须手动完成动画，没有更好的可用。

这是可能希望尝试的人的（简化）代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>

<div id="form" style="width: 750px;">
    <div class="w2ui-page page-0">
        <div class="w2ui-field">
            <label>Text Area:</label>
            <div>
                <textarea name="comments" class="foo" type="textarea" style="width: 385px; height: 80px; resize: none"></textarea>
            </div>
        </div>
    </div>

    <div class="w2ui-buttons">
        <button class="w2ui-btn" name="load">Load</button>
    </div>
</div>

Answer 1

找到解决方案。恶意有两个图像，顶部图像在开始时为正Z，在结束时为负Z（对于双层视图，尝试zPosition - 不！）：

let frame = CGRect(origin: CGPoint(), size: spriteSize)

let sprite = UIView(frame: frame)
sprite.isHidden = true

let bottomView = UIIMageView(image: UIImage(named:"name1.png"))
bottomView.frame = frame
bottomView.layer.transform = CATransform3DMakeScale(-1, 1, 1)
sprite.addSubview(bottomView)

let topView = UIImageView(image: UIImage(named:"name2.png"))
topView.frame = frame
topView.layer.transform = 
      CATransform3DMakeTranslation(0, 0, 0.5) // !!!!
sprite.addSubview(topView)

parent.addSubview(sprite)
sprite.layer.position = fromPosition
sprite.isHidden = false

UIView.animate(withDuration: 3, delay: 0, animations:{
    sprite.subviews.last!.layer.transform =
           CATransform3DMakeTranslation(0, 0, -0.5) // !!!!
    sprite.layer.transform =
            CATransform3DConcat(
                    CATransform3DMakeRotation(CGFloat.pi, 1, 0, 0))
    sprite.layer.position = targetPosition
})

围绕X或Y轴旋转的双层视图

1 个答案: