SwiftUI Text 字体触摸滑动动画效果

通过添加 DragGesture 时间记录滑动时 onChanged 的坐标来给选中的字符 Character 做缩放动画即可完成该效果,一下是效果演示。


演示效果

Text 字体滑动效果

完整代码下载


部分代码示例

VStack {
    HStack(spacing: 0.5) {
        ForEach(Array(string.enumerated()), id: \.offset) { (index, character) in
            Text(String(character))
                .font(.system(size: fontSize, weight: .bold, design: .rounded))
                .multilineTextAlignment(.center)
                // 设置选中字符的颜色效果
                .foregroundColor(calculateForegroundColor(for: index))
                // 设置选中字符的缩放效果
                .scaleEffect(scaleFactors[index])
                // 设置选中字符的偏移效果
                .offset(y: -scaleFactors[index]*(fontSize+5))
                // 设置选中字符的显示优先级
                .zIndex(scaleFactors[index])
        }
    }
    // 添加滑动触摸事件监控
    .gesture(dragGesture())
    .background(
        GeometryReader { geo in
            Color.clear
                .onAppear {
                    // 获取中心坐标并储存
                    characterCenters = getCharacterCenters(in: geo)
                }
        }
    )
}

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/1074.html ·

(2)
上一篇 2023-04-21 下午12:20
下一篇 2023-04-24 下午2:48

相关推荐

发表回复

登录后才能评论