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



目录
相关文章
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
1563 0
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
|
图形学 iOS开发
Unity——动效与缓动动画
Unity——动效与缓动动画
149 0
An动画基础之元件的图形动画与按钮动画
An动画基础之元件的图形动画与按钮动画
335 0
An动画基础之元件的图形动画与按钮动画
|
编解码
unity3dUGUI之UI粒子特效自适应缩放
using UnityEngine; using System.Collections; using System.Collections.Generic; public class UIParticleScale : MonoBehaviour...
1588 0
SwiftUI—色相和亮度的复合动画的制作
SwiftUI—色相和亮度的复合动画的制作
144 0
SwiftUI—色相和亮度的复合动画的制作
实现场景切换的时候淡入淡出的效果(Unity3D)
在游戏中不可避免的要进行场景切换,如果切换的场景要加载的资源太多太大,那么就要耗时很长时间,这对于用户的体验来说很不舒服,也就是常说的游戏卡了。怎么解决这种尴尬呢。比较推荐的就是异步加载场景,然后中间加一个过渡场景,过渡场景做的美观一些,然后加一个进度条,看起来就不会那么尴尬了。然后在场景过渡的时候,加一个淡入淡出的效果,就很nice了今天就实现一个场景切换的时候淡入淡出的效果。剩下的场景异步加载还有中间过渡场景有时间再写。
|
前端开发 数据可视化
threejs 贴图动画总结
threejs 贴图动画总结
threejs 贴图动画总结
|
存储 图形学
动画系统中的基础动画
动画系统中的基础动画
175 0
动画系统中的基础动画