SwiftUI—使用withAnimation制作缩放和渐隐动画

简介: SwiftUI—使用withAnimation制作缩放和渐隐动画

通过scaleEffect、opacity和withAnimation方法,实现linear类型的缩放动画,并设置动画的时长为1秒,制作一份缩放和渐隐同时进行的动画效果


示例代码:


struct ContentView : View {
    @State var factor: Double = 1 //图像视图的缩放比例
    @State var alpha: Double = 1 //图像视图的不透明度
    var body: some View {
        Image("logo")
            .scaleEffect(CGFloat(factor))
            .opacity(alpha) //按照浮点属性的大小修改图像视图的不透明度
            .onTapGesture { //给图像视图绑定单点的手势,当用户点击图像视图时执行后面的代码
                withAnimation(.linear(duration: 1.0)) { //设置动画的时间曲线为线型,动画的时长为1秒
                    self.factor += 0.1 //将图像放大到1.1倍
                    self.alpha -= 0.2  //将图像不透明度减少0.2
                }
            }
    }
}


2466108-5b4c808fcd9494b0.gif



目录
相关文章
|
iOS开发
SwiftUI极简教程13:NavigationView导航栏使用
SwiftUI极简教程13:NavigationView导航栏使用
2395 2
SwiftUI极简教程13:NavigationView导航栏使用
|
数据可视化 开发工具 网络虚拟化
GitHub Desktop-码云 使用 1
GitHub Desktop-码云 使用
271 1
SwiftUI—如何制作循环动画并指定动画的循环次数
SwiftUI—如何制作循环动画并指定动画的循环次数
791 0
SwiftUI—如何制作循环动画并指定动画的循环次数
SwiftUI—如何给图像视图添加遮罩以突出主题
SwiftUI—如何给图像视图添加遮罩以突出主题
758 0
SwiftUI—如何给图像视图添加遮罩以突出主题
|
10月前
|
存储 大数据 数据处理
大数据环境下的性能优化策略
大数据环境下的性能优化策略
354 2
|
iOS开发
加载中,加载中......使用SwiftUI设计2种Loading动画
加载中,加载中......使用SwiftUI设计2种Loading动画
655 0
|
Web App开发 编解码 iOS开发
iOS字体像素与磅的对应关系
iOS字体像素与磅的对应关系
537 1
|
Android开发 iOS开发
ios后台播放声音的三种实现方式
ios后台播放声音的三种实现方式
1309 1
|
JavaScript 程序员 Swift
The compiler is unable to type-check this expression in reasonable time; try breaking up the express
The compiler is unable to type-check this expression in reasonable time; try breaking up the express
191 0