AnyTransition/过渡动画, MatchedGeometryEffect/匹配几何动画效果 的使用

这篇具有很好参考价值的文章主要介绍了AnyTransition/过渡动画, MatchedGeometryEffect/匹配几何动画效果 的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. AnyTransition 过渡动画效果

  1.1 创建过度动画案例 AnyTransitionBootcamp.swift

import SwiftUI

/// 旋转修饰 View
struct RotateViewModifier :ViewModifier{
    let rotation: Double
    
    func body(content: Content) -> some View {
        content
            .rotationEffect(Angle(degrees: rotation))
            .offset(x: rotation != 0 ? UIScreen.main.bounds.width : 0,
                    y: rotation != 0 ? UIScreen.main.bounds.height : 0)
    }
}

// 扩展
extension AnyTransition{
    /// 旋转
    static var rotation: AnyTransition{
        modifier(
            active: RotateViewModifier(rotation: 180),
            identity: RotateViewModifier(rotation: 0))
    }
    
    /// 旋转自定义角度
    static func rotation(rotation: Double) -> AnyTransition{
        modifier(
            active: RotateViewModifier(rotation: rotation),
            identity: RotateViewModifier(rotation: 0))
    }
    
    /// 旋转 不对称方式
    static var rotateOn: AnyTransition{
        asymmetric(
            insertion: .rotation,
            removal: .move(edge: .leading))
    }
}

/// 过渡动画
struct AnyTransitionBootcamp: View {
    @State private var showRectangle: Bool = false
    
    var body: some View {
        VStack {
            Spacer()
            
            if showRectangle {
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color.black)
                    .frame(width: 250, height: 350)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                //.transition(.move(edge: .leading))
                //.transition(AnyTransition.scale.animation(.easeInOut))
                //.transition(AnyTransition.rotation.animation(.easeInOut))
                // 旋转
                //.transition(.rotation)
                // 旋转自定义角度
                //.transition(.rotation(rotation: 1080))
                // 不对称旋转
                .transition(.rotateOn)
            }
            
            Spacer()
            Text("Click Me!")
                .withDefaultButtonFormatting()
                .padding(.horizontal, 40)
                .onTapGesture {
                    //duration: 5.0
                    withAnimation(.easeInOut) {
                        showRectangle.toggle()
                    }
                }
        }
    }
}

struct AnyTransitionBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        AnyTransitionBootcamp()
    }
}

  1.2 效果图:

AnyTransition/过渡动画, MatchedGeometryEffect/匹配几何动画效果 的使用,SwiftUI Advanced Learning,iOS,Swift,UI

2. MatchedGeometryEffect 匹配几何动画效果

  2.1 创建匹配几何效果案例,MatchedGeometryEffectBootcamp.swift

import SwiftUI

/// 匹配几何效果
struct MatchedGeometryEffectBootcamp: View {
    /// 是否单击
    @State private var isClicked: Bool = false
    @Namespace private var namespace
    
    var body: some View {
        VStack {
            if !isClicked {
                Circle()
                    .matchedGeometryEffect(id: "rectangle", in: namespace)
                    .frame(width: 100, height: 100)
            }
            Spacer()
            if isClicked {
                Circle()
                    .matchedGeometryEffect(id: "rectangle", in: namespace)
                    .frame(width: 300, height: 200)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.orange)
        .onTapGesture {
            withAnimation(.easeIn(duration: 0.5)) {
                isClicked.toggle()
            }
        }
    }
}

/// 匹配几何效果二
struct MatchedGeometryEffectBootcamp2: View{
    let categories: [String] = ["Home", "Popular", "Saved"]
    @State private var selected: String = "Home"
    @Namespace private var namespace2
    
    var body: some View{
        HStack {
            ForEach(categories, id: \.self) { category in
                ZStack(alignment: .bottom) {
                    if selected == category{
                        RoundedRectangle(cornerRadius: 10)
                            .fill(Color.red.opacity(0.5))
                            .matchedGeometryEffect(id: "category_background", in: namespace2)
                            .frame(width: 35, height: 2)
                            .offset(y: 10)
                    }
                    
                    Text(category)
                        .foregroundColor(selected == category ? .red : .black)
                }
                .frame(maxWidth: .infinity)
                .frame(height: 55)
                .onTapGesture {
                    withAnimation(.spring()) {
                        selected = category
                    }
                }
            }
        }
        .padding()
    }
}

struct MatchedGeometryEffectBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        MatchedGeometryEffectBootcamp()
        //MatchedGeometryEffectBootcamp2()
    }
}

  2.2 效果图:

AnyTransition/过渡动画, MatchedGeometryEffect/匹配几何动画效果 的使用,SwiftUI Advanced Learning,iOS,Swift,UI     AnyTransition/过渡动画, MatchedGeometryEffect/匹配几何动画效果 的使用,SwiftUI Advanced Learning,iOS,Swift,UI文章来源地址https://www.toymoban.com/news/detail-724507.html

到了这里,关于AnyTransition/过渡动画, MatchedGeometryEffect/匹配几何动画效果 的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android远程过渡动画

    Android的系统动画我分为三类:窗口动画,过渡动画,旋转动画。而这篇文章将分析过渡动画。而过渡动画根据创建leash和运行动画是否在同一个进程可以分为本地过渡动画和远程过渡动画,启动远程过渡动画流程相比于其他系统动画的过程,因为涉及到了跨进程,所以涉及到

    2024年01月21日
    浏览(53)
  • React 之 过渡动画

    在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验 可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-group用来完成过渡动画 React曾为开发者提供过动画插件 react-addons-css-transition-group,后由社区维护,形成

    2024年02月13日
    浏览(40)
  • 前端高度变化实现过渡动画

    前提:已知初始高度与最终高度。 如果有这个前提,那么这个动画是最好实现的了。 利用最大高度实现过度动画。 但是有缺陷,如果最大高度大于需要的高度,就会有明显的延迟。(相当于设置了初始高度与最终高度) 利用的就是放大,缩小。 这个方法是用css实现最简单

    2024年03月21日
    浏览(53)
  • CSS基础-过渡动画

    CSS3新添加了过渡动画, 即使用者定义好 一个元素的 开始状态 和 结束状态 , CSS会根据变化曲线形成 补间动画 效果。 CSS3中用 transition 属性来描述动画如何运动。 定义 下面我们重点了解下, 哪个属性需要过渡 , 还有 变化曲线是什么 下面我们重点聊聊两点: 哪个属性需要

    2024年02月10日
    浏览(50)
  • 【CSS】过渡动画

    不加过渡动画,变化不太流畅 MDN css transitions w3school transform transform :用于元素的变形,显示变形后的状态,不是变形的过程,变形过程需要配合 transition 表示 2D 转换 translate(50px, 100px) 平移 rotate(20deg) 顺时针旋转 20 度 rotateX(150deg) 绕其 X 轴旋转给定角度 scaleX(2) 增大为其原始

    2024年02月04日
    浏览(38)
  • css3过渡与动画

    在数字时代,网页不再是静态的画面,而是充满活力和动感的空间。CSS3的过渡与动画技术就像是一场魔法表演,能够赋予网页以生命。本文将引领你进入这个奇妙的世界,解锁CSS3过渡与动画的神奇效果。 transition过渡属性时css3浓墨重彩的特性,过渡可以为一个元素在不同样

    2024年01月16日
    浏览(50)
  • 回到页面顶部(回到顶部、过渡动画)

    项目背景: vue 1.创建 backtop.vue 的回到顶部逻辑的组件 2.在相应的组件位置进行引用 进行组件封装 可以与业务代码进行解耦,预留插槽位置可以保留外部的样式定制化,预留外部api的定制化操作。

    2024年02月05日
    浏览(40)
  • Flutter动画库:animations(路由过渡动画或者页面切换动画)

    animations 是一个 Flutter 库,它提供了一组用于创建动画效果的工具和组件。 这个库的核心重点是路由过渡动画或者页面切换动画 地址 https://pub-web.flutter-io.cn/packages/animations 安装 看了下官方文档和官方例子,然后就有点懵。差点以为找错库了。还好flutter中的库可以直接点开(

    2024年02月16日
    浏览(44)
  • transition-group过渡动画

    安装lodash库 cnpm install lodash -S 安装lodash-type cnpm install @types/lodash -D

    2024年02月09日
    浏览(37)
  • 图片或视频充当网页背景+过渡动画

    这是目前的主页预览图。上一个版本带有学校logo,根据比赛规则,删掉了学校logo。 也就是将图片作为背景。 这个需求产生的场景是:如果直接用img标签显示界面左上角的logo,那么鼠标右键是可以直接选中图片的,也可以通过拖动的方式选中,跟文字一样。 而对于大多数现

    2024年04月14日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包