SwiftUI-抖音Logo动画

案列展示

macos_wechat_clone_show.gif

案例源码

import SwiftUI

struct ContentView: View {
    
    let blue = Color(red: 0, green: 255/255.0, blue: 255/255.0)
    let red = Color(red: 255/255.0, green: 24/255.0, blue: 84/255.0)
    let ratio: CGFloat = 1.2
    
    @State private var isRightSide: Bool = true
    
    var body: some View {
        
        ZStack {
            RoundedRectangle(cornerRadius: 25.0)
                .frame(width: 300, height: 300)
                .foregroundColor(.black)
            
            ZStack {
                DouYinShape()
                    .frame(width: 200, height: 200 * ratio)
                    .foregroundColor(red)
                
                DouYinShape()
                    .frame(width: 200, height: 200 * ratio)
                    .foregroundColor(blue)
                    .offset(x: -10.0, y: -10.0)
                
                DouYinShape()
                    .frame(width: 200, height: 200 * ratio)
                    .foregroundColor(.white)
                    .mask(
                        DouYinShape()
                            .frame(width: 200, height: 200 * ratio)
                            .foregroundColor(blue)
                            .offset(x: -10.0, y: -10.0)
                    )
            }
            .rotationEffect(.degrees(isRightSide ? 2 : -2), anchor: UnitPoint(x: 0.5, y: 1))
            .animation(.easeInOut(duration: 0.1).repeatForever(autoreverses: true))
            .onAppear() {
                isRightSide.toggle()
            }
            
            Text("@Super V")
                .font(.title)
                .foregroundColor(.gray)
                .offset(y: 250)
        }
    }
}

struct DouYinShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let part = rect.maxX / 21
        path.move(to: CGPoint(x: rect.maxX - part * 10, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addRelativeArc(center: CGPoint(x: rect.maxX, y: rect.minY), radius: part * 6, startAngle: .degrees(-180), delta: .degrees(-90))
        path.addRelativeArc(center: CGPoint(x: rect.maxX, y: rect.minY), radius: part * 10, startAngle: .degrees(90), delta: .degrees(38))
        
        path.addLine(to: CGPoint(x: rect.maxX - (part * 6), y: rect.maxY - (part * 7)))
        path.addRelativeArc(center: CGPoint(x: rect.minX + (part * 7.5), y: rect.maxY - (part * 7.5)), radius: part * 7.5, startAngle: .degrees(0), delta: .degrees(278))
        path.addRelativeArc(center: CGPoint(x: rect.minX + (part * 7.5), y: rect.maxY - (part * 7.5)), radius: part * 3.5, startAngle: .degrees(-75), delta: .degrees(-(360-75)))
        
        path.closeSubpath()
        return path
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}