Skip to content

Instantly share code, notes, and snippets.

@CodeSlicing
Created January 23, 2020 23:29
Show Gist options
  • Save CodeSlicing/358a0a7bd329f35f3836e8f403261f11 to your computer and use it in GitHub Desktop.
Save CodeSlicing/358a0a7bd329f35f3836e8f403261f11 to your computer and use it in GitHub Desktop.
Demo showing animating concentric arcs on a timer without pulsing with the timer duration
//
// ConcentricArcsDemo.swift
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
// of the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
// PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// Created by Adam Fordyce on 23/01/2020.
// Copyright © 2020 Adam Fordyce. All rights reserved.
//
import SwiftUI
import PureSwiftUI
let radiusStep: CGFloat = 100
struct ConcentricArcsDemo: View {
func radius(_ index: Int) -> CGFloat {
(radiusStep * 0.9 * index).asCGFloat
}
var body: some View {
ZStack {
ForEach(0..<11) { index in
ArcView(lineWidth: radiusStep / 2)
.frame(self.radius(index))
}
}
}
}
private struct ArcView: View {
let lineWidth: CGFloat
@State private var startAngle = randomStart()
@State private var arcLength = randomArcLength()
static func randomStart() -> Angle {
360.random().degrees
}
static func randomArcLength() -> Angle {
((45...360).randomElement() ?? 0).degrees
}
var body: some View {
ZStack {
AnimatableArc(startAngle: self.startAngle, endAngle: self.startAngle + self.arcLength, clockwise: true)
.strokeColor(.gray, lineWidth: self.lineWidth)
.blur(15)
.blendMode(.multiply)
AnimatableArc(startAngle: self.startAngle, endAngle: self.startAngle + self.arcLength, clockwise: true)
.strokeColor(.green, lineWidth: self.lineWidth)
.hueRotation(360.random().degrees)
}
.onAppear {
every(2) { timer in
withAnimation(Animation.easeInOut(duration: 4).delay(1.0.random())) {
self.randomize()
}
}
}
}
func randomize() {
self.startAngle = Self.randomStart()
self.arcLength = Self.randomArcLength()
}
}
private struct AnimatableArc: InsettableShape {
var startAngle: Angle
var endAngle: Angle
var clockwise: Bool
var insetAmount: CGFloat = 0
public var animatableData: AnimatablePair<Double, Double> {
get {
return AnimatablePair(startAngle.degrees, endAngle.degrees)
}
set {
self.startAngle = newValue.first.degrees
self.endAngle = newValue.second.degrees
}
}
public func path(in rect: CGRect) -> Path {
var path = Path()
path.arc(center: CGPoint(rect.midX, rect.midY), radius: rect.width / 2 - insetAmount, startAngle: startAngle, endAngle: endAngle, clockwise: clockwise)
return path
}
public func inset(by amount: CGFloat) -> some InsettableShape {
AnimatableArc(startAngle: startAngle, endAngle: endAngle, clockwise: clockwise, insetAmount: insetAmount + amount)
}
}
struct ConcentricArcsDemo_Previews: PreviewProvider {
struct ConcentricArcsDemo_Harness: View {
var body: some View {
ConcentricArcsDemo()
}
}
static var previews: some View {
ConcentricArcsDemo_Harness()
}
}
@heestand-xyz
Copy link

Nice animation technique!

@CodeSlicing
Copy link
Author

Nice animation technique!

Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment