《SwiftUI 自定义组件之 音量滑块和苹果音乐滑块动画特效（教程含源码）_ios 滑块动画.docx》由会员分享，可在线阅读，更多相关《SwiftUI 自定义组件之 音量滑块和苹果音乐滑块动画特效（教程含源码）_ios 滑块动画.docx（8页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、SwiftUI 自定义组件之 音量滑块和苹果音乐滑块动画特效（教程含源码） 实战需求SwiftUI自定义组件之 音量滑块和苹果音乐滑块动画特效本文价值与收获看完本文后，您将能够作出下面的界面1:24-I实战代码1、主界面1import SwiftUI23struct ContentView: View 45 State private var playerDuration: TimeInterval = 1006 private let maxDuration = TimeInterval(240)78 State private var volume: Double = 0.39 priva
2、te var maxVolume: Double = 11011 State private var sliderValue: Double = 1012 private var maxSliderValue: Double = 1001314State private var color: Color = .white1516 var body: some View 17 ZStack 18 LinearGradient(colors: .brown, .brown.opacity(0.1), startPoint: .top, endPoint: .bottom)19 .ignoresSa
3、feArea()20 .overlay(.ultraThinMaterial)2122VStack(alignment: .leading, spacing: 60) 23individualComponentsSection2425Spacer()2627.padding(.horizontal, .top, 50)28293031private var individualComponentsSection: some View 32VStack(alignment: .trailing, spacing: 20) 33VerticalVolumeSlider(value: $volume
4、, inRange: 0.maxVolume, activeFillColor: color, fillColor: normalFillColor, emptyC343536.frame(height: 130)3738CustomSlider(value: $sliderValue, inRange: 0.maxSliderValue, activeFillColor: color, fillColor: normalFillColor, empt394041.frame(height: 40)4243MusicProgressSlider(value: $playerDuration,
5、inRange: TimeInterval.zero.maxDuration, activeFillColor: color, fillColor444546.frame(height: 40)4748VolumeSlider(value: $volume, inRange: 0.maxVolume, activeFillColor: color, fillColor: normalFillColor, emptyColor: em495051.frame(height: 30)5253 /ColorPicker(selection: $color) 54/Text(Select Color)
6、55/56575859private var normalFillColor: Color color.opacity(0.5)60private var emptyColor: Color color.opacity(0.3) 616263struct ContentView_Previews: PreviewProvider 64static var previews: some View 65ContentView()66672、自定义Slider12 import SwiftUI34 struct CustomSlider: View 5 Binding var value: T6 l
7、et inRange: ClosedRange7 let activeFillColor: Color8 let fillColor: Color9 let emptyColor: Color10 let height: CGFloat11 let onEditingChanged: (Bool) - Void1213 / private variables14 State private var localRealProgress: T = 015 State private var localTempProgress: T = 016 GestureState private var is
8、Active: Bool = false1718 var body: some View 19 GeometryReader bounds in20 ZStack 21 VStack 22 ZStack(alignment: .center) 23 Capsule()24 .fill(emptyColor)25 Capsule()26 .fill(isActive ? activeFillColor : fillColor)27 .mask(28 HStack 29 Rectangle()30 .frame(width: max(bounds.size.width * CGFloat(loca
9、lRealProgress + localTempProgress), 0),31 Spacer(minLength: 0)3233)3435.frame(width: isActive ? bounds.size.width * 1.04 : bounds.size.width, alignment: .center)3637 /.shadow(color: .black.opacity(0.1), radius: isActive ? 20 : 0, x: 0, y: 0)38 .animation(animation, value: isActive)3940 .frame(width:
10、 bounds.size.width, height: bounds.size.height, alignment: .center)41 .gesture(DragGesture(minimumDistance: 0, coordinateSpace: .local)42 .updating($isActive) value, state, transaction in43 state = true4445 .onChanged gesture in46 localTempProgress = T(gesture.translation.width / bounds.size.width)4
11、7 value = max(min(getPrgValue(), inRange.upperBound), inRange.lowerBound)48 .onEnded value in49 localRealProgress = max(min(localRealProgress + localTempProgress, 1), 0)50 localTempProgress = 051)52 .onChange(of: isActive) newValue in53 value = max(min(getPrgValue(), inRange.upperBound), inRange.low
12、erBound)54 onEditingChanged(newValue)5556.onAppear 57localRealProgress = getPrgPercentage(value)5859.onChange(of: value) newValue in60if !isActive 61localRealProgress = getPrgPercentage(newValue)62636465.frame(height: isActive ? height * 2 : height, alignment: .center)666768private var animation: An
13、imation 69if isActive 70return .spring()71 else 72return .spring(response: 0.5, dampingFraction: 0.5, blendDuration:0.6)73747576private func getPrgPercentage(_ value: T) - T 77let range = inRange.upperBound - inRange.lowerBound78let correctedStartValue = value - inRange.lowerBound79let percentage = correctedStartValue / range80return percentage818283848586 private func getPrgValue() - T return (localRealProgress + localTempProgress) * (inRange.upperBound - inRange.lowerBound) + inRange.lowerBound项目文件1 578Custom-Slider-Control-main.zip2 链接: 密码:50pt