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)



       }

   }
}

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

相关文章
|
安全 开发者
SwiftUI极简教程02:Image图片的使用
SwiftUI极简教程02:Image图片的使用
1608 1
SwiftUI极简教程02:Image图片的使用
|
6月前
|
存储 弹性计算 缓存
阿里云服务器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年。对于还未使用过阿里云轻量应用服务器和云服务器的用户来说,并不是很清楚他们各自有性能怎么样,主要使用场景有哪些,本文来做个简单介绍与对比,以供参考和选择。
|
7月前
|
存储 分布式计算 大数据
基于阿里云大数据平台的实时数据湖构建与数据分析实战
在大数据时代,数据湖作为集中存储和处理海量数据的架构,成为企业数据管理的核心。阿里云提供包括MaxCompute、DataWorks、E-MapReduce等在内的完整大数据平台,支持从数据采集、存储、处理到分析的全流程。本文通过电商平台案例,展示如何基于阿里云构建实时数据湖,实现数据价值挖掘。平台优势包括全托管服务、高扩展性、丰富的生态集成和强大的数据分析工具。
|
人工智能 PyTorch TensorFlow
分布式训练:大规模AI模型的实践与挑战
【7月更文第29天】随着人工智能的发展,深度学习模型变得越来越复杂,数据集也越来越大。为了应对这种规模的增长,分布式训练成为了训练大规模AI模型的关键技术。本文将介绍分布式训练的基本概念、常用框架(如TensorFlow和PyTorch)、最佳实践以及可能遇到的性能瓶颈和解决方案。
1401 2
|
机器学习/深度学习 自然语言处理 算法
【CV大模型SAM(Segment-Anything)】真是太强大了,分割一切的SAM大模型使用方法:可通过不同的提示得到想要的分割目标
【CV大模型SAM(Segment-Anything)】真是太强大了,分割一切的SAM大模型使用方法:可通过不同的提示得到想要的分割目标
|
安全 Shell Linux
|
消息中间件 缓存 安全
清华架构大牛剖析高并发与多线程的关系、区别,带你击穿面试难题
当提起这两个词的时候,是不是很多人都认为高并发=多线程? 当面试官问到高并发系统可以采用哪些手段来解决,是不是一脸懵逼?
|
iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)
206 0