按顺序动画视图和子视图

Question

我对动画印象深刻。我想按以下顺序制作动画，如图所示。

Please click here for Image

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

 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

You're on the right path, except obviously there will be a lot more animations than the few that you've shown in the snippet. There's no reason why you can't continue building this animation using the CAAnimation classes, but I suspect that using the newer UIViewPropertyAnimator classes (will need to target iOS10) will be useful because they allow you to 'scrub' the steps in the animation which will be useful debugging. Here's a good intro: 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 跳入 explore/refine/debug 动画。它包括用于将 UISlider 连接到动画的样板，因此您只需关注动画本身。

这一切都是为了调试动画，为了制作，当然你可能想要删除硬编码的尺寸，这样它就可以在不同的比例下重复使用等。

按顺序动画视图和子视图

Animating Views and subviews in sequence

ios

objective-c

swift

cabasicanimation

catransition