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



目录
相关文章
|
2月前
|
前端开发
前端原生 CSS 跑马灯效果,无限轮播(横竖版本,带渐变遮罩,简单实用)
前端原生 CSS 跑马灯效果,无限轮播(横竖版本,带渐变遮罩,简单实用)
31 0
|
7月前
|
图形学 iOS开发
Unity——动效与缓动动画
Unity——动效与缓动动画
|
11月前
SwiftUI 中淡入淡出特效
SwiftUI 中淡入淡出特效
|
11月前
SVG SMIL 动画(基本动画 、变换动画)
SVG SMIL 动画(基本动画 、变换动画)
35 0
An动画基础之元件的图形动画与按钮动画
An动画基础之元件的图形动画与按钮动画
270 0
An动画基础之元件的图形动画与按钮动画
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
|
图形学
unity动画之帧动画使用
使用unity实现lol寒冰帧动画
unity动画之帧动画使用
SwiftUI—色相和亮度的复合动画的制作
SwiftUI—色相和亮度的复合动画的制作
115 0
SwiftUI—色相和亮度的复合动画的制作
SwiftUI—如何制作样式丰富的过渡动画
SwiftUI—如何制作样式丰富的过渡动画
206 0
SwiftUI—如何制作样式丰富的过渡动画
|
前端开发 数据可视化
threejs 贴图动画总结
threejs 贴图动画总结
threejs 贴图动画总结