SwiftUI之Transitions

SwiftUI搬运工 2020/6/29 23:27:32

在之前的文章中,我们已经介绍了SwiftUI中关于动画的进阶用法,有兴趣的朋友可以把文章翻出来看一下,很多人可能不太清楚.transition()的作用,不用担心,阅读完本文后,你心中的疑惑都会揭开。 Transition是什么? 在SwiftUI中,transition决定了某个View如何插入到视图…

在之前的文章中,我们已经介绍了SwiftUI中关于动画的进阶用法,有兴趣的朋友可以把文章翻出来看一下,很多人可能不太清楚.transition()的作用,不用担心,阅读完本文后,你心中的疑惑都会揭开。

Transition是什么?

在SwiftUI中,transition决定了某个View如何插入到视图栈中,或者如何在视图栈中移除。transition自身并没有任何效果, 需要配合动画一起使用,举个例子:

struct Example1: View {
    @State private var show = false
    
    var body: some View {
        VStack {
            Spacer()
            
            if show {
                LabelView()
                    .transition(.opacity)
            }
            
            Spacer()
            
            Button("点击") {
                self.show.toggle()
            }
            .padding(20)
        }
    }
}
复制代码

Kapture 2020-06-06 at 15.12.58.gif

可以看出,并没有什么动画效果,其实,这也很好理解,transition只是告诉系统试图如何过渡,系统并不知道过渡的动画函数是什么,也就无法做动画。

**注意,即使使用隐式动画,也就是.animation()modifier也不起作用。**代码如下:

struct Example1: View {
    @State private var show = false
    
    var body: some View {
        VStack {
            Spacer()
            
            if show {
                LabelView()
              			.animation(.easeInOut)
                    .transition(.opacity)
            }
 					...
    }
}
复制代码

要想让transition有动画,有两种方法:

第一种是给出一个显式动画,代码如下:

struct Example1: View {
    @State private var show = false
    
    var body: some View {
        VStack {
						...
            
            Button("点击") {
                withAnimation(.easeInOut(duration: 1.0)) {
                    self.show.toggle()
                }
            }
            .padding(20)
        }
    }
}
复制代码

另一种方法是为transition关联一个动画,这里值得注意的是,我们下边代码中与transition关联的动画作用于transition,并不是作用于view的。

struct Example2: View {
    @State private var show = false
    
    var body: some View {
        VStack {
            Spacer()
            
            if show {
                LabelView()
                    .transition(AnyTransition.opacity.animation(.easeInOut(duration: 1.0)))
            }
            
            Spacer()
            
            Button("点击") {
                self.show.toggle()
            }
            .padding(20)
        }
    }
}
复制代码

添加了动画的效果如下图所示:

Kapture 2020-06-06 at 15.21.59.gif

非对称的Transitions

在了解什么叫非对称之前,我们先了解一下对称,对于transition来说,当view出现的时候,会执行某个过渡效果,在默认情况下,当该view消失的时候,会执行与出现相反的过渡效果,这就是transiton的对称性。

Kapture 2020-06-06 at 15.54.50.gif

可以看到,绿色文本从左边滑入,然后从右边滑出,是一个对称的过渡效果。

我们可以使用.asymmetric来实现非对称的过渡效果,代码如下:

.transition(.asymmetric(insertion: .opacity, removal: .scale))
复制代码

Kapture 2020-06-06 at 16.09.09.gif

可以看出,出现和消失使用了不同的过渡效果。

组合Transitions

我们还想更进一步,我们可以使用组合来为某个过渡效果实现多个动画过程,在SwiftUI中的实现代码也超级简单:

.transition(AnyTransition.opacity.combined(with: .slide))
复制代码

Kapture 2020-06-06 at 16.51.06.gif

可以看到,绿色文本的过渡动画,通知执行了opacityslide两种效果,当然我们也可以在asymmetric中使用:

.transition(.asymmetric(insertion: AnyTransition.opacity.combined(with: .slide), removal: AnyTransition.scale.combined(with: .slide)))
复制代码

效果如下:

Kapture 2020-06-06 at 16.54.41.gif

带有参数的Transitions

我们在上边的代码中,只使用了类似.slide这样的参数,其实这些参数还可以接受一些额外的参数,例如下边这些:

.scale(scale: 0.0, anchor: UnitPoint(x: 1, y: 0))
.scale(scale: 2.0)
.move(edge: .leading)
.offset(x: 30)
.offset(y: 50)
.offset(x: 100, y: 10)
复制代码

自定义Transitions

本篇文章的核心内容来了,上边介绍的各种效果基本上能够满足我们大部分的开发需求,但是,总有例外,当我们需要复杂的过渡效果的时候,这一小节的内容能够给你提供更多的思路

**比如, 在App中的各种样式的弹屏,翻页等等,你能想到的过渡都属于Transitions的范畴。**当然我们这里只是演示了自定义这些过渡效果的核心思想。

我们先做一个简单的例子,我们自定义一个过渡效果,类似与上边用到的opacity效果。代码如下:

extension AnyTransition {
    static var myCustomOpacity: AnyTransition {
        AnyTransition.modifier(active: MyOpacityModifier(opacity: 0), identity: MyOpacityModifier(opacity: 1))
    }
}

struct MyOpacityModifier: ViewModifier {
    let opacity: Double
    
    func body(content: Content) -> some View {
        content.opacity(opacity)
    }
}
复制代码
  • 写一个AnyTransition的扩展
  • 实现一个myCustomOpacity的静态类型
  • 返回值为AnyTransition.modifier,它接受两个参数,activeidentity,分别表示开始和结束
  • activeidentity是个ViewModifier类型

基本上就这几步,然后我们这么使用:

.transition(.myCustomOpacity)
复制代码

Kapture 2020-06-06 at 15.21.59.gif

大家仔细看上边的代码,由于本质上是个ViewModifier,相当于修改了view的opacity,这也就是我们上边说过的,不加显式动画,不会产生过渡效果的原因。

有很多动画效果,比如.rotationEffect().transformEffect(),用transition都可以实现,我们在最后,使用GeometryEffect来实现一个下边这样的效果:

Kapture 2020-06-06 at 17.14.53.gif

我们先讲一下该动画的实现思路:

  • 出现的时候,一边缩放,一边旋转
  • 仔细观察,缩放动画在整个动画时间的一半的时候,就已经缩放完毕
  • 旋转沿着x轴

有了上边的思路后,我们再看下边的代码:

struct GeometryEffectTransitionsDemo: View {
    @State private var show = false
    
    var body: some View {
        
        return ZStack {
            Button("Open Booking") {
                withAnimation(.easeInOut(duration: 0.8)) {
                    self.show.toggle()
                }
            }.position(x: 100, y: 20)
            
            if show {
                RoundedRectangle(cornerRadius: 15)
                    .fill(Color.green)
                    .frame(width: 300, height: 400)
                    .shadow(color: .black, radius: 3)
                    .transition(.fly)
                    .zIndex(1)
            }
        }
    }
}

extension AnyTransition {
    static var fly: AnyTransition {
        AnyTransition.modifier(active: FlyModifier(pct: 0), identity: FlyModifier(pct: 1))
    }
}

struct FlyModifier: GeometryEffect {
    var pct: Double
    
    var animatableData: Double {
        get {
            pct
        }
        set {
            pct = newValue
        }
    }
    
    func effectValue(size: CGSize) -> ProjectionTransform {
        let a = CGFloat(Angle(degrees: 90 * (1 - pct)).radians)
        
        var transform3d = CATransform3DIdentity
        transform3d.m34 = -1 / max(size.width, size.height)
        
        transform3d = CATransform3DRotate(transform3d, a, 1, 0, 0)
        transform3d = CATransform3DTranslate(transform3d, -size.width / 2.0, -size.width / 2.0, 0)
        
        let afffineTransform1 = ProjectionTransform(CGAffineTransform(translationX: size.width / 2.0, y: size.width / 2.0))
        let afffineTransform2 = ProjectionTransform(CGAffineTransform(scaleX: CGFloat(pct * 2), y: CGFloat(pct * 2)))
        
        if pct <= 0.5 {
            return ProjectionTransform(transform3d).concatenating(afffineTransform2).concatenating(afffineTransform1)
        } else {
            return ProjectionTransform(transform3d).concatenating(afffineTransform1)
        }
    }
}
复制代码

GeometryEffect本身即实现了ViewModifier协议,又实现了Animatable协议,因此它可以作为activeidentity的参数,也可以通过animatableData获取动画状态。

整个过渡效果的核心代码如下:

    func effectValue(size: CGSize) -> ProjectionTransform {
      ...
        if pct <= 0.5 {
            return ProjectionTransform(transform3d).concatenating(afffineTransform2).concatenating(afffineTransform1)
        } else {
            return ProjectionTransform(transform3d).concatenating(afffineTransform1)
        }
    }
复制代码

我们用pct跟0.5做判断,返回不同的形变值,就实现了上边的效果。

总结

当我们考虑为某个View使用过渡动画的时候,我们就可以考虑Transitions了,Transitions强大的自定义功能能够让我们实现很多复杂的UI效果。

注:上边的内容参考了网站https://swiftui-lab.com/advanced-transitions/,如有侵权,立即删除。

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[SwiftUI之Transitions]http://www.zyiz.net/tech/detail-141536.html

上一篇:SwiftUI之id(_)如何标识View

下一篇:SwiftUI之Custom Styling

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程