通过添加 DragGesture
时间记录滑动时 onChanged
的坐标来给选中的字符 Character
做缩放动画即可完成该效果,一下是效果演示。
演示效果
完整代码下载
部分代码示例
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 ·