SwiftUI 自定义组件之 音量滑块和苹果音乐滑块动画特效（教程含源码）_ios 滑块动画.docx

SwiftUI自定义组件之音量滑块和苹果音乐滑块动画特效（教程含源码）

实战需求

\hSwiftUI 自定义组件之音量滑块和苹果音乐滑块动画特效

本文价值与收获

看完本文后，您将能够作出下面的界面

1:24??

1:24

??

-

-I

实战代码

1、主界面

1

importSwiftUI

2

3

structContentView:View{

4

@StateprivatevarplayerDuration:TimeInterval=100

privateletmaxDuration=TimeInterval(240)

7

@Stateprivatevarvolume:Double=0.3

privatevarmaxVolume:Double=1

10

@StateprivatevarsliderValue:Double=10

privatevarmaxSliderValue:Double=100

13

14 @Stateprivatevarcolor:Color=.white

15

varbody:someView{

ZStack{

LinearGradient(colors:[.brown,.brown.opacity(0.1)],startPoint:.top,endPoint:.bottom)

.ignoresSafeArea()

.overlay(.ultraThinMaterial)

21

22 VStack(alignment:.leading,spacing:60){

23 individualComponentsSection

24

25 Spacer()

26 }

27 .padding([.horizontal,.top],50)

28 }

29 }

30

31 privatevarindividualComponentsSection:someView{

32 VStack(alignment:.trailing,spacing:20){

33 VerticalVolumeSlider(value:$volume,inRange:0...maxVolume,activeFillColor:color,fillColor:normalFillColor,emptyC

34

35 }

36 .frame(height:130)

37

38 CustomSlider(value:$sliderValue,inRange:0...maxSliderValue,activeFillColor:color,fillColor:normalFillColor,empt

39

40 }

41 .frame(height:40)

42

43 MusicProgressSlider(value:$playerDuration,inRange:TimeInterval.zero...maxDuration,activeFillColor:color,fillColor

44

45 }

46 .frame(height:40)

47

48 VolumeSlider(value:$volume,inRange:0...maxVolume,activeFillColor:color,fillColor:normalFillColor,emptyColor:em

49

50 }

51 .frame(height:30)

52

53// ColorPicker(selection:$color){

54

//

Text("SelectColor")

55

//

}

56

}

57

}

58

59

privatevarnormalFillColor:Color{color.opacity(0.5)

}

60

privatevaremptyColor:Color{color.opacity(0.3)}

61

}

62

63

structContentView_Previews:PreviewProvider{

64

staticvarpreviews:someView{

65

ContentView()

66

}

67

}

2、自定义Slider

1

2importSwiftUI

3

structCustomSlider<T:BinaryFloatingPoint>:View{

@Bindingvarvalue:T

letinRange:ClosedR