Question

我很震惊动画。我想在下面的序列中制作动画，如图所示。

所有都是视图，即outerView，dot1，dot2，dot3。我已经实现了代码来动画点，但需要你的帮助才能动画外观并按顺序添加所有内容

 let transition = CATransition()
    transition.duration = 2;
    transition.type = kCATransitionPush;
    transition.subtype = kCATransitionFromLeft;
    transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionDefault)
    transition.speed = 1.0

    dot3?.layer.add(transition, forKey: nil)
    transition.beginTime = CACurrentMediaTime() + 0.11
    dot2?.layer.add(transition, forKey: nil)
    transition.beginTime = CACurrentMediaTime() + 0.22
    dot1?.layer.add(transition, forKey: nil)

请按顺序帮助我制作动画 - outerView开始，点和关闭outerView如图所示

Answer 1

实施起来很容易

animatedImage(with:duration:)

或

var animationImages: [UIImage]?

示例：

UIImageView.animationImages = [image1, image2, image3, image4,...]
    UIImageView.animationDuration = 5
    UIImageView.startAnimating()

您将获得仅有几行的有序动画

Answer 2

你是在正确的道路上，除了显然会有比你在片段中显示的少数动画更多的动画。你没有理由不能继续使用CAAnimation类来构建这个动画，但是我怀疑使用更新的UIViewPropertyAnimator类（需要定位iOS10）会很有用，因为它们允许你“擦除”动画中的步骤。将是有用的调试。这是一个很好的介绍：dzone.com/articles/ios-10-day-by-day-uiviewpropertyanimator

将此评论扩展为正确答案......

使用animateWithKeyframes是在代码中创建此动画的相当不错的解决方案。这是一个看起来像什么的片段：

let capsule: UIView // ... the container view
let capsuleDots [UIView] //... the three dots
let capsuleFrameWide, capsuleFrameNarrow: CGRect //.. frames for the capsule
let offstageLeft, offstageRight: CGAffineTransform // transforms to move dots to left or right

let animator = UIViewPropertyAnimator(duration: 2, curve: .easeIn)

// the actual animation occurs in 4 steps
animator.addAnimations {

    UIView.animateKeyframes(withDuration: 2, delay: 0, options: [.calculationModeLinear], animations: {

        // step 1: make the capsule grow to large size
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.1) {
            capsule.bounds = capsuleFrameWide
        }

        // step 2: move the dots to their default positions, and fade in
        UIView.addKeyframe(withRelativeStartTime: 0.1, relativeDuration: 0.1) {
            capsuleDots.forEach({ dot in
                dot.transform = .identity
                dot.alpha = 1.0
            })
        }

        // step 3: fade out dots and translate to the right
        UIView.addKeyframe(withRelativeStartTime: 0.8, relativeDuration: 0.1) {
            capsuleDots.forEach({ dot in
                dot.alpha = 0.0
                dot.transform = offstageRight

            })
        }

        // step4: make capsure move to narrow width
        UIView.addKeyframe(withRelativeStartTime: 0.9, relativeDuration: 0.1) {
            capsule.bounds = capsuleFrameNarrow
        }
    })
}

将关键帧包装在UIViewPropertyAnimator中可以轻松地擦除动画（以及其他内容）。

如果它对任何人都有用，我pushed a small project to GitHub允许你使用UIViewPropertyAnimator跳转探索/优化/调试动画。它包括用于将UISlider连接到动画的样板，因此您必须关注的是动画本身。

这一切都是为了调试动画，当然你可能想要删除硬编码的大小，以便它可以在不同的尺度上重复使用等。

依次为视图和子视图设置动画

2 个答案: