SwiftUI 中淡入淡出特效

简介: SwiftUI 中淡入淡出特效

SwiftUI 中淡入淡出特效

>
>

import SwiftUI

struct Bounce: AnimatableModifier {
    
   let animCount: Int
   var animValue: CGFloat
   var amplitude: CGFloat  // 振幅
   var bouncingTimes: Int

   init(animCount: Int, amplitude: CGFloat = 10, bouncingTimes: Int = 3) {
    
       self.animCount = animCount
       self.animValue = CGFloat(animCount)
       self.amplitude = amplitude
       self.bouncingTimes = bouncingTimes
   }

   var animatableData: CGFloat {
    
       get {
     animValue }
       set {
     animValue = newValue }
   }

   func body(content: Content) -> some View {
    
       let t = animValue - CGFloat(animCount)
       let offset: CGFloat = -abs(pow(CGFloat(M_E), -t) * sin(t * .pi * CGFloat(bouncingTimes)) * amplitude)
       return content.offset(y: offset)
   }
}

struct InOut: Animatable {
    

}

extension View {
    
   func bounce(animCount: Int,
               amplitude: CGFloat = 10,
               bouncingTimes: Int = 3) -> some View {
    
       self.modifier(Bounce(animCount: animCount,
                            amplitude: amplitude,
                            bouncingTimes: bouncingTimes))
   }
}

struct ContentView: View {
    
   @State var taps = 0

   var body: some View {
    
       VStack{
    
       Button(action: {
    
           withAnimation(Animation.linear(duration: 1)) {
    
               taps += 1
           }
       }, label: {
    
           RoundedRectangle(cornerRadius: 15)
               .bounce(animCount: taps)
       })
       .frame(width: 100, height: 100)

       Button(action: {
    taps += 1}, label: {
    
           Image(systemName: "person")
               .resizable()
       })
       .frame(width: 100, height: 100)
       .background(Color.red)



       }

   }
}
AI 代码解读

Bounce是一个自定义的动画修饰器(Modifier),用于实现按钮的弹跳效果。它采用 AnimatableModifier 协议,其中包括了动画计数、振幅和弹跳次数等参数。animatableData 属性允许 SwiftUI 动画系统追踪 animValue 的变化。在 body(content:) 方法中,使用数学公式计算按钮在垂直方向上的偏移,以实现弹跳效果。

目录
打赏
0
0
0
0
3
分享
相关文章
SwiftUI极简教程02:Image图片的使用
SwiftUI极简教程02:Image图片的使用
1558 1
SwiftUI极简教程02:Image图片的使用
SwiftUI极简教程41:使用Segment、LazyVGrid和ImagePicker构建一个Logo生成器
在本章中,你将学会使用Segment分段器、LazyVGrid垂直网格、ImagePicker图片选择器构建一个Logo生成器。 在上一章中,我们完善了SearchBar搜索栏、TabView底部导航,还有做了一个Loading加载动作。最近突然有个想法,如果把色卡和图片进行组合,这不就是一个简单的Logo了吗?我能不能做个Logo生成器? 说干就干,我们继续完成App的相关内容。
762 0
SwiftUI极简教程41:使用Segment、LazyVGrid和ImagePicker构建一个Logo生成器
阿里云服务器99元和199元与轻量应用服务器38元各自性能、适用场景与选择参考
2025年,阿里云推出了多款低价特惠云服务器,其中轻量应用云服务器2核2G 200M带宽 40G ESSD云盘38元1年,云服务器ECS 2核2G 3M带宽 40G ESSD Entry盘活动价99元1年,而2核4G 5M带宽 80G ESSD Entry盘则仅售199元1年。对于还未使用过阿里云轻量应用服务器和云服务器的用户来说,并不是很清楚他们各自有性能怎么样,主要使用场景有哪些,本文来做个简单介绍与对比,以供参考和选择。
基于阿里云大数据平台的实时数据湖构建与数据分析实战
在大数据时代,数据湖作为集中存储和处理海量数据的架构,成为企业数据管理的核心。阿里云提供包括MaxCompute、DataWorks、E-MapReduce等在内的完整大数据平台,支持从数据采集、存储、处理到分析的全流程。本文通过电商平台案例,展示如何基于阿里云构建实时数据湖,实现数据价值挖掘。平台优势包括全托管服务、高扩展性、丰富的生态集成和强大的数据分析工具。
SwiftUI 中自定义 modifier
在 Swift UI 中,自定义 Modifier 是一种强大的方式,可以让你轻松地封装和重用视图的样式和行为。在本文中,我们将探讨如何使用自定义 Modifier ,以便在应用程序中保持一致的外观和风格。
如何在 Ubuntu 20.04 上安装和使用 Docker Compose
Docker Compose 是一个命令行工具,通过它你可以定义和编排多容器 Docker 应用,本文将为大家讲解如何在 Ubuntu 20.04 上安装最新版的 Docker Compose。
20045 0
如何在 Ubuntu 20.04 上安装和使用 Docker Compose
大师学SwiftUI第18章Part1 - 图片选择器和相机
如今,个人设备主要用于处理图片、视频和声音,苹果的设备也不例外。SwiftUI可以通过Image视图显示图片,但需要其它框架的支持来处理图片、在屏幕上展示视频或是播放声音。本章中我们将展示Apple所提供的这类工具。
436 1
清华架构大牛剖析高并发与多线程的关系、区别,带你击穿面试难题
当提起这两个词的时候,是不是很多人都认为高并发=多线程? 当面试官问到高并发系统可以采用哪些手段来解决,是不是一脸懵逼?
Swift 包管理器 -- cocoapods
当涉及到管理和集成第三方库和框架时,CocoaPods 是 Swift 开发中一个常用且强大的工具。它可以帮助你轻松地添加、更新和管理项目中所需的依赖项。本篇博客将介绍 CocoaPods 的基本概念、安装步骤、使用方法以及一些注意事项,帮助你更好地运用 CocoaPods 来管理你的 Swift 项目。
Swift 包管理器 -- cocoapods
AI助理
登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问

你好,我是AI助理

可以解答问题、推荐解决方案等