Question

我在一个实现翻转卡时钟动画的UI组件上工作。一切正常，但是当我将顶级CALayer内容更改为新图像时，旧图像在更改之前保持可见。它会产生混淆效果。为了更好的解释，我将gif动画放在下面：

这是更改CALayer内容的代码：

firstTopLayer.contents = secondTopLayer.contents
let bottomAnim = CABasicAnimation(keyPath: "transform")
bottomAnim.duration = animDuration/2
bottomAnim.repeatCount = 1
bottomAnim.fromValue = NSValue.init(caTransform3D:
CATransform3DMakeRotation((CGFloat)(M_PI_2), 1, 0, 0))
bottomAnim.toValue = NSValue.init(caTransform3D:
CATransform3DMakeRotation(0, 1, 0, 0))
bottomAnim.isRemovedOnCompletion = true
bottomAnim.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseIn)
firstBottomLayer.add(bottomAnim, forKey: "bottom")
firstBottomLayer.contents = self.bufferContents

有关详情，请点击repository

的链接

Answer 1

我找到了解决方案。顶级动画必须具有此配置

firstTopLayer.removeAnimation(forKey: kTopAnimaton)

每次开始这个动画后。

<script type="text/ng-template" id="nodes.html">
<h4 class="mdl-typography--display-1 pageTitle">asdf</h4>
<div class="mdl-grid">
    <div ng-repeat="a in b" class="mdl-cell mdl-cell--4-col">
        <div class="status-card mdl-card mdl-shadow--2dp  status-green">
            <div class="mdl-card__title mdl-card--expand">
                <h4 style="width: 100%">    
                    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="BSL">
                        <input type="checkbox" id="BSL" class="mdl-switch__input" ng-model="a.asdfChk" />
                        <span class="mdl-switch__label">                                                                                      
                            <small>ASDF</small>
                        </span>
                    </label>
                </h4>
            </div>                   
            <div class="mdl-card__actions mdl-card--border">
                <div class="mdl-layout-spacer"></div>
            </div>
        </div>
    </div>
</div>

使用此配置，顶层保留在最后一帧动画位置

动画结束前更改CALayer内容

1 个答案: