├── .gitignore ├── LICENSE ├── Package.swift ├── README.md ├── Sources └── SineWaveShape │ └── SineWaveShape.swift ├── Tests └── SineWaveShapeTests │ └── SineWaveShapeTests.swift └── waveAnimation.gif /.gitignore: -------------------------------------------------------------------------------- 1 | # Xcode 2 | # 3 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore 4 | 5 | ## User settings 6 | xcuserdata/ 7 | 8 | ## compatibility with Xcode 8 and earlier (ignoring not required starting Xcode 9) 9 | *.xcscmblueprint 10 | *.xccheckout 11 | 12 | ## compatibility with Xcode 3 and earlier (ignoring not required starting Xcode 4) 13 | build/ 14 | DerivedData/ 15 | *.moved-aside 16 | *.pbxuser 17 | !default.pbxuser 18 | *.mode1v3 19 | !default.mode1v3 20 | *.mode2v3 21 | !default.mode2v3 22 | *.perspectivev3 23 | !default.perspectivev3 24 | 25 | ## Obj-C/Swift specific 26 | *.hmap 27 | 28 | ## App packaging 29 | *.ipa 30 | *.dSYM.zip 31 | *.dSYM 32 | 33 | ## Playgrounds 34 | timeline.xctimeline 35 | playground.xcworkspace 36 | 37 | # Swift Package Manager 38 | # 39 | # Add this line if you want to avoid checking in source code from Swift Package Manager dependencies. 40 | # Packages/ 41 | # Package.pins 42 | # Package.resolved 43 | # *.xcodeproj 44 | # 45 | # Xcode automatically generates this directory with a .xcworkspacedata file and xcuserdata 46 | # hence it is not needed unless you have added a package configuration file to your project 47 | # .swiftpm 48 | 49 | .build/ 50 | 51 | # CocoaPods 52 | # 53 | # We recommend against adding the Pods directory to your .gitignore. However 54 | # you should judge for yourself, the pros and cons are mentioned at: 55 | # https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control 56 | # 57 | # Pods/ 58 | # 59 | # Add this line if you want to avoid checking in source code from the Xcode workspace 60 | # *.xcworkspace 61 | 62 | # Carthage 63 | # 64 | # Add this line if you want to avoid checking in source code from Carthage dependencies. 65 | # Carthage/Checkouts 66 | 67 | Carthage/Build/ 68 | 69 | # Accio dependency management 70 | Dependencies/ 71 | .accio/ 72 | 73 | # fastlane 74 | # 75 | # It is recommended to not store the screenshots in the git repo. 76 | # Instead, use fastlane to re-generate the screenshots whenever they are needed. 77 | # For more information about the recommended setup visit: 78 | # https://docs.fastlane.tools/best-practices/source-control/#source-control 79 | 80 | fastlane/report.xml 81 | fastlane/Preview.html 82 | fastlane/screenshots/**/*.png 83 | fastlane/test_output 84 | 85 | # Code Injection 86 | # 87 | # After new code Injection tools there's a generated folder /iOSInjectionProject 88 | # https://github.com/johnno1962/injectionforxcode 89 | 90 | iOSInjectionProject/ 91 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Zerlz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Package.swift: -------------------------------------------------------------------------------- 1 | // swift-tools-version:5.3 2 | // The swift-tools-version declares the minimum version of Swift required to build this package. 3 | 4 | import PackageDescription 5 | 6 | let package = Package( 7 | name: "SineWaveShape", 8 | platforms: [ 9 | .macOS(.v10_15), .iOS(.v13), .tvOS(.v13) 10 | ], 11 | products: [ 12 | // Products define the executables and libraries a package produces, and make them visible to other packages. 13 | .library( 14 | name: "SineWaveShape", 15 | targets: ["SineWaveShape"]), 16 | ], 17 | dependencies: [ 18 | // Dependencies declare other packages that this package depends on. 19 | // .package(url: /* package url */, from: "1.0.0"), 20 | ], 21 | targets: [ 22 | // Targets are the basic building blocks of a package. A target can define a module or a test suite. 23 | // Targets can depend on other targets in this package, and on products in packages this package depends on. 24 | .target( 25 | name: "SineWaveShape", 26 | dependencies: []), 27 | .testTarget( 28 | name: "SineWaveShapeTests", 29 | dependencies: ["SineWaveShape"]), 30 | ] 31 | ) 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WaveAnimation 2 | 3 | --- 4 | 5 | 6 | 7 | A SwiftUI implementation of Wave animating shape. 8 | 9 | ## Preview 10 | 11 | --- 12 | 13 | 14 | 15 | ![waveAnimation](./waveAnimation.gif) 16 | 17 | ## Usage 18 | 19 | --- 20 | 21 | 22 | 23 | ```swift 24 | import SineWaveShape 25 | SineWaveShape(percent: 0.4, strength: 30, frequency: 7, phase: 0) 26 | .fill(color1) 27 | .offset(y: CGFloat(1) * 2) 28 | .animation( 29 | Animation.linear(duration: duration).repeatForever(autoreverses: false) 30 | ) 31 | ``` 32 | 33 | ## Customization like preview 34 | 35 | --- 36 | 37 | 38 | 39 | ```swift 40 | import SwiftUI 41 | import SineWaveShape 42 | 43 | struct ContentView_Previews: PreviewProvider { 44 | static var previews: some View { 45 | ContentView( 46 | circleLineWidth: 1.0, 47 | strokeColor: .constant(Color.blue), 48 | color1: .constant(Color(#colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)).opacity(0.7)), 49 | color2: .constant(Color(#colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1)).opacity(0.9)), 50 | color3: .constant(Color(#colorLiteral(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1)))) 51 | .preferredColorScheme(.dark) 52 | } 53 | } 54 | 55 | struct ContentView: View { 56 | @State var phase: Double = 0 57 | let frequency: Double = 5 58 | let duration: Double = 3 59 | let strength: Double = 30 60 | @State var percent: Double = 0.3 61 | @State var circleLineWidth: CGFloat 62 | @Binding var strokeColor: Color 63 | @Binding var color1: Color 64 | @Binding var color2: Color 65 | @Binding var color3: Color 66 | 67 | var body: some View { 68 | VStack { 69 | Circle() 70 | .stroke(strokeColor, lineWidth: circleLineWidth) 71 | .background( 72 | ZStack { 73 | Color(.systemPink) 74 | SineWaveShape(percent: percent, strength: strength * 0.9, frequency: frequency + 2, phase: self.phase) 75 | .fill(color1) 76 | .offset(y: CGFloat(1) * 1) 77 | .animation( 78 | Animation.linear(duration: duration).repeatForever(autoreverses: false) 79 | ) 80 | .mask( 81 | LinearGradient(gradient: Gradient(colors: [color1.opacity(0.7), color1]), startPoint: .top, endPoint: .bottom) 82 | ) 83 | 84 | SineWaveShape(percent: percent, strength: strength * 0.8, frequency: frequency + 1, phase: self.phase) 85 | .fill(color2) 86 | .offset(y: CGFloat(2) * 1) 87 | .animation( 88 | Animation.linear(duration: duration).repeatForever(autoreverses: false) 89 | ) 90 | .mask( 91 | LinearGradient(gradient: Gradient(colors: [color2.opacity(0.7), color2]), startPoint: .top, endPoint: .bottom) 92 | ) 93 | 94 | SineWaveShape(percent: percent, strength: strength * 0.7, frequency: frequency, phase: self.phase) 95 | .fill(color3) 96 | .offset(y: CGFloat(3) * 1) 97 | .animation( 98 | Animation.linear(duration: duration).repeatForever(autoreverses: false) 99 | ) 100 | .mask( 101 | LinearGradient(gradient: Gradient(colors: [color3.opacity(0.7), color3]), startPoint: .top, endPoint: .bottom) 102 | ) 103 | } 104 | .clipShape(Circle()) 105 | .onAppear(perform: { 106 | phase = .pi * 2 107 | }) 108 | ) 109 | Slider(value: $percent, in: 0...1, minimumValueLabel: Text("0"), maximumValueLabel: Text("1")) { 110 | 111 | } 112 | } 113 | } 114 | } 115 | 116 | ``` 117 | 118 | ## License 119 | 120 | --- 121 | 122 | 123 | 124 | SineWaveShape is licensed under [MIT](https://github.com/MrChens/SineWaveShape/blob/main/LICENSE). 125 | 126 | Copyright © 2021 IFunny. All Rights Reserved. 127 | -------------------------------------------------------------------------------- /Sources/SineWaveShape/SineWaveShape.swift: -------------------------------------------------------------------------------- 1 | // 2 | // WaveSinView.swift 3 | // trafficStat 4 | // 5 | // Created by Dolor•Sawalon•Zerlz on 2021/9/15. 6 | // 7 | 8 | /* 9 | 基础知识： 10 | y=A*sin(wt±φ) 11 | A 為波幅/振幅（縱軸）， ω 為角频率， t 為時間（橫軸）， θ 為相偏移（橫軸左右） 12 | A振幅，离开平衡位置的距离 13 | 以下为左边原点在左下角 14 | w变大横坐标压缩，w变小横坐标拉伸(相对于sin(x)) 15 | θ为Pi * 1/3,则坐标不变横坐标向左边偏移Pi * 1/3(相对于sin(x)) 16 | θ为-Pi * 1/3,则坐标不变横坐标向右边偏移Pi * 1/3(相对于sin(x)) 17 | A变大则横坐标不变，则纵坐标变为A倍， 18 | 比如A=2,则纵坐标为原来的2倍，A=1/2，则纵坐标为原来的1/2倍 19 | A=-1，则曲线根据X轴进行了翻转 20 | A=-2，则在-1的基础上进行拉伸 21 | 22 | https://www.bilibili.com/video/BV1a7411s75L/?spm_id_from=333.788.recommend_more_video.-1 23 | 24 | 25 | https://zh.wikipedia.org/wiki/正弦曲線 26 | y=A*sin(kx-wt - φ) + D 27 | k 為波數（周期密度）， D 為（直流）偏移量（y軸高低 28 | 29 | https://zh.wikipedia.org/wiki/抛物线 30 | 让波浪不规则 31 | */ 32 | import SwiftUI 33 | 34 | public struct SineWaveShape: Shape { 35 | 36 | public var animatableData: Double { 37 | get { phase } 38 | set { self.phase = newValue } 39 | } 40 | //波浪的高度相对于rect.height的百分比 41 | var percent: Double 42 | 43 | //波浪振幅 44 | var strength: Double 45 | 46 | // 频率 47 | var frequency: Double 48 | 49 | // 波浪的相位 50 | var phase: Double 51 | 52 | public init( 53 | percent: Double, 54 | strength: Double, 55 | frequency: Double, 56 | phase: Double 57 | 58 | ) { 59 | self.percent = percent 60 | self.strength = strength 61 | self.frequency = frequency 62 | self.phase = phase 63 | } 64 | 65 | public func path(in rect: CGRect) -> Path { 66 | var path = Path() 67 | let width = Double(rect.width) 68 | let height = Double(rect.height) 69 | let midWidth = width / 2 70 | let oneOverMidWidth = 1 / midWidth 71 | 72 | //根据 波的相速度 / 频率 = 波长 73 | let wavelength = width / frequency 74 | 75 | //从左边的终点开始画 76 | path.move(to: CGPoint(x: 0, y: height)) 77 | 78 | // 根据x轴,计算每个横向点对应的y位置 79 | for x in stride(from: 0, through: width, by: 1) { 80 | //找到当前x相对于波长的位置 81 | let relativeX = x / wavelength 82 | 83 | //当前x距离中心位置多远 84 | let distanceFromMidWidth = x - midWidth 85 | 86 | // 波浪规则变化系数， 从-1 到 1的变化（让曲线不是一成不变的 87 | let normalDistance = oneOverMidWidth * distanceFromMidWidth 88 | 89 | let parabola = -(normalDistance * normalDistance) + 1 90 | 91 | //计算那个位置的正弦，加上我们的相位偏移 92 | let sine = sin(relativeX + phase) 93 | 94 | //将计算出来的正弦乘以我们的波浪振幅然后再乘以规则变化系数以确定最终偏移量，然后将其向下移动到midHeight 95 | let y = parabola * strength * sine + height * percent 96 | 97 | // 画线 98 | path.addLine(to: CGPoint(x: x, y: y)) 99 | } 100 | 101 | path.addLine(to: CGPoint(x: rect.width, y: rect.height)) 102 | path.addLine(to: CGPoint(x: 0, y: rect.height)) 103 | path.closeSubpath() 104 | return path 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /Tests/SineWaveShapeTests/SineWaveShapeTests.swift: -------------------------------------------------------------------------------- 1 | import XCTest 2 | @testable import SineWaveShape 3 | 4 | final class SineWaveShapeTests: XCTestCase { 5 | func testExample() { 6 | // This is an example of a functional test case. 7 | // Use XCTAssert and related functions to verify your tests produce the correct 8 | // results. 9 | XCTAssertEqual(SineWaveShape().text, "Hello, World!") 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /waveAnimation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrChens/SineWaveShape/f0db321d770a86dee477b982bedcd79ee7ad7b7a/waveAnimation.gif --------------------------------------------------------------------------------