Skip to content

Instantly share code, notes, and snippets.

@agelessman
Created July 3, 2020 10:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save agelessman/64243e1dd89b8a1a53c094771302cdba to your computer and use it in GitHub Desktop.
Save agelessman/64243e1dd89b8a1a53c094771302cdba to your computer and use it in GitHub Desktop.
//
// ContentView.swift
// AngularDemo
//
// Created by MC on 2020/7/1.
//
import SwiftUI
struct ContentView: View {
var body: some View {
Example1()
}
}
struct Example1: View {
var body: some View {
HStack {
Spacer()
VStack {
RoundedRectangle(cornerRadius: 10)
.fill(LinearGradient(gradient: Gradient(colors: [.green, .orange, .blue]),
startPoint: .leading,
endPoint: .trailing))
Text("LinearGradient")
}
Spacer()
VStack {
RoundedRectangle(cornerRadius: 10)
.fill(RadialGradient(gradient: Gradient(colors: [.green, .orange, .blue]),
center: .center,
startRadius: 0,
endRadius: 100))
Text("RadialGradient")
}
Spacer()
VStack {
RoundedRectangle(cornerRadius: 10)
.fill(AngularGradient(gradient: Gradient(colors: [.white, .green, .white, .orange, .white, .blue, .white]),
center: .center))
Text("AngularGradient")
}
Spacer()
}
.padding(.vertical, 30)
}
}
struct Example2: View {
@State private var show = false
let colors: [UIColor] = [.green, .blue]
var body: some View {
VStack {
Spacer()
ZStack(alignment: .leading) {
RoundedRectangle(cornerRadius: 0)
.fill(LinearGradient(gradient: .init(colors: [.green, .blue]), startPoint: /*@START_MENU_TOKEN@*/ .leading/*@END_MENU_TOKEN@*/, endPoint: /*@START_MENU_TOKEN@*/ .trailing/*@END_MENU_TOKEN@*/))
.frame(width: 400, height: 150, alignment: /*@START_MENU_TOKEN@*/ .center/*@END_MENU_TOKEN@*/)
RoundedRectangle(cornerRadius: 0)
.modifier(MyAnimationModifier(pct: show ? 1 : 0, colors: colors))
.frame(width: 20, height: 200)
.offset(x: show ? 400 : 0, y: 0)
}
ZStack(alignment: .leading) {
RoundedRectangle(cornerRadius: 0)
.stroke(Color.green, lineWidth: 3)
.frame(width: 400, height: 150)
RoundedRectangle(cornerRadius: 0)
.fill(Color.black)
.frame(width: 5, height: 200)
.offset(x: show ? 400 : 0, y: 0)
}
ZStack(alignment: .leading) {
RoundedRectangle(cornerRadius: 0)
.stroke(Color.green, lineWidth: 3)
.frame(width: 400, height: 150)
RoundedRectangle(cornerRadius: 0)
.fill(Color.black)
.frame(width: 5, height: 200)
.rotationEffect(.degrees(45), anchor: .center)
.offset(x: show ? 500 : -100, y: 0)
}
//
Spacer()
Button("开始扫描") {
withAnimation(.linear(duration: 3)) {
self.show.toggle()
}
}
}
}
}
struct MyAnimationModifier: AnimatableModifier {
var pct: Double
let colors: [UIColor]
var animatableData: Double {
get {
pct
}
set {
pct = newValue
}
}
func body(content: Content) -> some View {
RoundedRectangle(cornerRadius: 0)
.fill(color(pct))
}
func color(_ pct: Double) -> Color {
let tmpPct = 1.0 / Double(colors.count - 1)
let index = Int(pct / tmpPct)
let percent = (pct - Double(index) * tmpPct) / tmpPct
let color2Index = ((index + 1) >= colors.count) ? (colors.count - 1) : (index + 1)
return colorMixer(c1: colors[index], c2: colors[color2Index], pct: CGFloat(percent))
}
func colorMixer(c1: UIColor, c2: UIColor, pct: CGFloat) -> Color {
let rgbSpace = CGColorSpaceCreateDeviceRGB()
guard let cc1 = c1.cgColor.converted(to: rgbSpace, intent: .defaultIntent, options: nil)?.components else {
return Color(c1)
}
guard let cc2 = c2.cgColor.converted(to: rgbSpace, intent: .defaultIntent, options: nil)?.components else {
return Color(c2)
}
let r = cc1[0] + (cc2[0] - cc1[0]) * pct
let g = cc1[1] + (cc2[1] - cc1[1]) * pct
let b = cc1[2] + (cc2[2] - cc1[2]) * pct
return Color(red: Double(r), green: Double(g), blue: Double(b))
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment