SwiftUI搭建一个类似支付宝中的余额宝余额数字动画效果

立即下载用AI写一个

发布时间：2022-09-06

0人 | 浏览：1523次 | 收藏 |

技术：SwiftUI、SwiftUI3.0、支付宝、余额宝、数字动画

运行环境：SwiftUI3.0 + Xcode13.4.1 + MacOS12.5 + iPhone Simulator iPhone 13 Pro Max

概述

SwiftUI搭建一个类似支付宝中的`余额宝`余额数字动画效果

详细

### 一、运行效果
![请添加图片描述](https://img-blog.csdnimg.cn/e90198fc740c4442b073a088e4fe3a72.gif)

### 二、项目结构图
![在这里插入图片描述](https://img-blog.csdnimg.cn/a2a149bdbb464f578db9dd7c9bc8a4db.png)

### 三、程序实现 - 过程
> 思路
> 1. 先看一下原理图 
> 
> ![在这里插入图片描述](https://img-blog.csdnimg.cn/129f58abe2184a559908a84b92b6f8eb.png)
> 2. 其实就是在视图里面创建一排数字比如 0~9 垂直排列展示 然后将其他部分进行切割
> 3. 拿到当前的数字 和 之前的数字进行每一个位数进行比较 
> 如果是当前数字位数大于之前位数 就向上滚动。
> 如果当前位数小数之前的尾数就向下滚动

#### 1.创建一个项目命名为 `RollingCounter`
![在这里插入图片描述](https://img-blog.csdnimg.cn/62c877296f7c4a448a44407c45550902.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/e977c73f9f5c475bac9f8d1bed9f1d02.png)

#### 1.1.引入资源文件和颜色
> 无

#### 2. 创建一个虚拟文件`New Group` 命名为 `View`
![在这里插入图片描述](https://img-blog.csdnimg.cn/33300d854c294656b7c83e49e86862d1.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/6791dc7d02d64a72bfbf78b6cebff2b7.png)

#### 2. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`RollingText` 
> 主要是:处理数字的动画效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9bc11a5d821d4da1b9d465dcc4b354e9.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/6586bd52196c45f9b1b32f6507249dd3.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/03c68b6dc463444e8c363cfef0d1e6a5.png)

### Code

#### ContentView - 主窗口
> 主要是展示主窗口`Home`和手动改变随机数

```swift
//
//  ContentView.swift
//  Shared
//
//  Created by lyh on 2022/8/29.
//

import SwiftUI

struct ContentView: View {
    @State var value :Int = 0
    var body: some View {
    
        NavigationView{
            VStack(spacing:25){
                RollingText(font: .system(size: 55), weight: .black, value: $value)
                
                Button("change Value"){
                    value = .random(in: 100...2999)
                }
            }
            .padding()
            .navigationTitle("RollingCounter")
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

#### Home - 主页
> 思路
> 1. 先看一下原理图 
> 
> ![在这里插入图片描述](https://img-blog.csdnimg.cn/129f58abe2184a559908a84b92b6f8eb.png)
> 2. 其实就是在视图里面创建一排数字比如 0~9 垂直排列展示 然后将其他部分进行切割
> 3. 拿到当前的数字 和 之前的数字进行每一个位数进行比较 
> 如果是当前数字位数大于之前位数 就向上滚动。
> 如果当前位数小数之前的尾数就向下滚动

```swift
//
//  RollingText.swift
//  RollingCounter (iOS)
//
//  Created by lyh on 2022/8/30.
//

import SwiftUI

struct RollingText: View {
    // 文本属性
    var font : Font = .largeTitle
    var weight : Font.Weight = .regular
    @Binding var value : Int
    
    // 动画属性
    @State var animationRange: [Int] = []
    var body: some View {
      
        HStack(spacing:0){
            ForEach(0..<animationRange.count,id: \.self){index in
                //查找给定字体的文本大小
                Text("8")
                    .font(font)
                    .fontWeight(weight)
                    .opacity(0)
                    .overlay{
                        GeometryReader{ proxy in
                            let size = proxy.size
                            
                            VStack(spacing:0){
                                // MARK:因为它的个人价值
                                //我们需要从0到9
                                ForEach(0...9,id: \.self){number in
                                    Text("\(number)")
                                        .font(font)
                                        .fontWeight(weight)
                                        .frame(width:size.width,height:size.height,alignment: .top)
                                }
                            }
                            // 设置偏移量
                            .offset(y:-CGFloat(animationRange[index]) * size.height)
                        }
                        .clipped()
                    }
            }
        }
        .onAppear{
            // 加载范围
            animationRange = Array(repeating: 0, count: "\(value)".count)
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.06) {
                updateText()
            }
        }
        .onChange(of: value) { newValue in
            // 处理额外价值的添加/移除
            let extra = "\(value)".count - animationRange.count
            if extra > 0{
                // 添加额外的范围
                for _ in 0..<extra {
                    withAnimation(.easeIn(duration:0.1)){ animationRange.append(0)
                        
                    }
                }
            }
            else
            {
                for _ in 0..<(-extra) {
                    withAnimation(.easeIn(duration:0.1)){ animationRange.removeLast()
                    }
                }
            }
            updateText()
        }
    }
    
    func updateText(){
        let stringValue = "\(value)"
        for(index,value) in zip(0..<stringValue.count, stringValue){
            //如果First Value = 1
            //然后Offset将被应用为-1
            //所以文本将向上移动显示1Value
            // 基于指标值的阻尼分数
            var fraction = Double(index) * 0.15
            // Max = 0.5
            // Total = 1.5
            
            fraction = (fraction > 0.5 ? 0.5 : fraction)
            withAnimation(.interactiveSpring(response: 0.8, dampingFraction: 1, blendDuration: 1 + fraction)){
                animationRange[index] = (String(value) as NSString).integerValue
            }
        }
    }
}

struct RollingText_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

SwiftUI搭建一个类似支付宝中的余额宝余额数字动画效果

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子