Animated transform only for superview

Question

I'm trying to animate the scale of the parent outerView, but keep child innerView with it's size, so that parent view transform just clips it during animation. For some reason, an inverted transform is scaling child view to bigger size.

Without inverted transform parent and child transforms equally.

    @IBAction func transformAction(_ sender: Any) {
    let animation = UIViewPropertyAnimator(duration: 5, curve: .linear) {
        self.outerView.transform = self.outerView.transform.scaledBy(x: 1, y: 0.1)
        self.innerView.transform = self.outerView.transform.inverted()
    }

    animation.addCompletion { _ in
        self.outerView.transform = CGAffineTransform.identity
        self.innerView.transform = CGAffineTransform.identity
    }

    animation.startAnimation()
}

What happens when you create a new transform for `innerView`, instead of inverting the `outerView` one? To understand what's going on: What is the `innerView`'s `transform` after the animation, if you only transform `outerView`? (I'd guess that this transform is applied to all `outerView`'s offspring.) Interesting! — meaning-matters, Oct 03 '18 at 08:32
It's clearer to see what's happening if the outer view doesn't clip the inner view. `innerView` immediately starts scaling up to 10x height, but as `outerView` scales down past 50% `innerView` starts shrinking again. — Ashley Mills, Oct 03 '18 at 08:42
@AshleyMills yes exactly, `innerView` always shrinks even transform matrix is for scaling up. — Jurasic, Oct 03 '18 at 08:47
@meaning-matters it doesn't matter how transform is created, animation stays the same. `innerView`s transform after the animation is equal to transform before animation if only `outerView` transform applied. — Jurasic, Oct 03 '18 at 08:58
Why do you want this? Does `innerView` need to be a child of `outerView`, or could they be overlapping siblings? — meaning-matters, Oct 03 '18 at 10:04
@meaning-matters I need to create the animation where `outerView` is collapsing by height and clips all inside content, while all inner views just fading out during animation without any distortion. — Jurasic, Oct 03 '18 at 10:39
[This](https://stackoverflow.com/a/15582691/1971013) is what you need to do. — meaning-matters, Oct 03 '18 at 21:40
@meaning-matters my goal is to clip `innerVIew` without its scale change, that way it would not clip it. — Jurasic, Oct 04 '18 at 08:10

meaning-matters · Answer 1 · 2018-10-04T08:29:22.273

2

Make innerView and outerView siblings in a parentView, where of course innerView is overlapping outerView.

Then animate the transform of outerView as you already do.

Finally, also animate the height of parentView. (Make sure that parentView.clipsToBounds is true.)

(The above assumes that outerView has content that needs to be compressed vertically. Of course, if there is no such content, you don't need a parentView and can just animate the height of outerView.)

BTW, the end result of your animation indeed has innerView back to its original height. But you don't see this in your animation because of outerView clipping. It's during the animation that the transforms mess up.

edited Oct 04 '18 at 08:29

answered Oct 04 '18 at 08:24

meaning-matters

21,929
10
82
142

this approach doesn't work as expected for two reasons: 1) siblings can't clip each other view so `outerView` don't clip content of `innerView` 2) during height animation all child views maintain top space to the `parentView`, so as the result it looks like they are all sliding down. What I need is to shrink `outerView` while `innerView` stays the same position relative to the screen and keep its original scale. – Jurasic Oct 04 '18 at 09:32
@Jurasic Did you try to animate `height` auto-layout constraints together with constraints that keep both views at `parentView`'s center? – meaning-matters Oct 04 '18 at 09:50
just did and it worked! `innerView` constraints keep view positioned and scaled appropriate – Jurasic Oct 04 '18 at 10:18
@Jurasic Great! Don't forget to accept and up the answer ;-) – meaning-matters Oct 04 '18 at 10:49

Animated transform only for superview

1 Answers1