SwiftUI—如何制作样式丰富的过渡动画

简介: SwiftUI—如何制作样式丰富的过渡动画

本节课将制作样式丰富、视觉精美的过渡动画。


struct ContentView : View {
    @State var showPicture = false //标识是否显示或隐藏指定的视图
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.showPicture.toggle() //以动画的方式改变toggle布尔属性的值
                }
            }) {
                Text("Show picture")
            }
            if showPicture { //当布尔属性为真时,显示一个指定名称的图像视图
//                Image("logo")
//                Image("logo")
//                    .transition(.move(edge: .top)) //设置图像视图的过渡效果,过渡样式为向上方移动
//                Image("logo")
//                    .transition(.scale(scale: 0))
//                Image("logo")
//                    .transition(.slide)
//                Image("logo")
//                    .transition(.asymmetric(insertion: .scale(scale: 0), removal: .slide))
                Image("logo")
                    .transition(AnyTransition.scale(scale: 0).combined(with:.slide))
            }
        }
    }
}


微信图片_20220523165556.png


目录
相关文章
|
2月前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
39 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
5月前
|
前端开发 JavaScript
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
107 0
|
7月前
|
JavaScript 定位技术 API
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
151 1
|
程序员 索引
SwiftUI极简教程18:SwipeCard卡片滑动效果的使用(上)
SwiftUI极简教程18:SwipeCard卡片滑动效果的使用(上)
1068 0
SwiftUI极简教程18:SwipeCard卡片滑动效果的使用(上)
|
前端开发
css3制作鼠标悬浮图文动画效果
css3制作鼠标悬浮图文动画效果
63 0
|
存储 索引
SwiftUI极简教程19:SwipeCard卡片滑动效果的使用(下)
SwiftUI极简教程19:SwipeCard卡片滑动效果的使用(下)
671 0
SwiftUI极简教程19:SwipeCard卡片滑动效果的使用(下)
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
SwiftUI—使用withAnimation制作缩放和渐隐动画
SwiftUI—使用withAnimation制作缩放和渐隐动画
1021 0
SwiftUI—使用withAnimation制作缩放和渐隐动画
|
Android开发
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片预览和图片切换
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片的单选、限数量的多选和不限数量的多选。支持图片预览和图片文件夹的切换。支持图片单选并剪裁。 先上效果图: 1、引入依赖 在Project的build.gradle在添加以下代码 allprojects { repositories { ... maven { url 'https://jitpack.io' } // 如果你使用的是1.4.0或更早的版本,这句可以不用。
6042 0