One Finger Rotation of a SwiftUI element

• Table of Content
• Presentation
• Usage
  • Simple Rotation
  • Simple Rotation with Inertia
  • Value Rotation
  • Value Rotation with Inertia
  • Auto Rotation
  • Value Auto Rotation
  • Value Auto Rotation with Inertia
  • Knob
  • Knob with Inertia
• Examples
• Versions
• Contributions
• Next to come:
• Donations / Support
• Contact
• License

The Simple Rotation allows for a simple rotation using one finger.

Declaration:

  .simpleRotation()

Customization:

• rotationAngle: identifies the original angle of the element [Type: Angle – Stock value: .degrees(0)]

• angleSnap: allows snapping using an angle factor which identifies the basic multiple of the angle [Type: Binding<Double> – Stock Value: Non declared]

  .simpleRotation(
    rotationAngle: .degrees(20)
    angleSnap: .constant(60)
  )

The Simple Inertia Rotation allows the view for a simple rotation with consequent inertia effect.

Declaration:

Declaration should be like this:

  .simpleRotationInertia()

Customization:

These are the customization possibilities:

• friction: the inertia factor of slowdown.[Type: Binding<Double> – Stock value: 0.005]
• velocityMultiplier: the speed multiplier of the inertia function related to the speed of the gesture on screen.[Type: Binding<Double> – Stock value: 0.1]
• decelerationFactor: the deceleration factor multiplier, big value indicates a longer inertia.[Type: Binding<Double> – Stock value: 0.4]
• rotationAngle: identifies the original angle of the element [Type: Angle – Stock value: .degrees(0)]
• angleSnap: allows snapping using an angle factor which identifies the basic multiple of the angle [Type: Binding<Double> – Stock Value: Non declared]
• angleSnapShowFactor: this variable controls the visibility during the inertia of angles not belonging to the angleSnap range.[Type: Binding<Double> – Stock value: 0.1]

  .simpleRotationInertia(
    friction: .constant(0.005),
    velocityMultiplier: .constant(0.1),
    decelerationFactor: .constant(0.4),
    rotationAngle: .degrees(0.0),
    angleSnap: .constant(20),
    angleSnapShowFactor: .constant(0.1)
  )

The Value Rotation allows for a simple rotation using one finger with a linked value related to the total angle of rotation.

Setup

To use the modifier it’s necessary to create a variable of type double that will indicate the starting point of the element. Example:

  @State private var totalAngle: Double = 0.0

Declaration:

To declare the modifier it is mandatory to link the variable and also the onAngleChanged, inside of this there must be the linked variable.

  .valueRotation(
    totalAngle: $totalAngle2,
    onAngleChanged: { newAngle in
    totalAngle2 = newAngle
    }
  )

Customization:

• animation: this parameter controls the animation during a change of totalAngle from outside the modifier.[Type: Animation – Stock value: Missing value]

  .valueRotation(
    totalAngle: $totalAngle,
    onAngleChanged: { newAngle in
    totalAngle = newAngle
    },
    animation: .spring()
  )

The Value Rotation with Inertia allows for a rotation with value linked and inertia effect at the end of the gesture.

Setup

To use the modifier it’s necessary to create a variable of type double that will indicate the starting point of the element. Example:

  @State private var totalAngle: Double = 0.0

Declaration:

To declare the modifier it is mandatory to link the variable and also the onAngleChanged, inside of this there must be the linked variable.

  .valueRotationInertia(
      totalAngle: $totalAngle,
      onAngleChanged: { newAngle in
      totalAngle = newAngle
    }
  )

Customization:

These are the customization possibilities:

• friction: the inertia factor of slowdown.[Type: Binding<Double> – Stock value: 0.005]
• velocityMultiplier: the speed multiplier of the inertia function related to the speed of the gesture on screen.[Type: Binding<Double> – Stock value: 0.1]
• animation: this parameter controls the animation during a change of totalAngle from outside the modifier.[Type: Animation – Stock value: Missing]
• stoppingAnimation: this variable controls if the rotation stops after the value of knobValue changes outside the modifier. It is suggested to use a variable as it will be needed in case of this application.[Type: Binding<Bool> – Stock value: false]

  .valueRotationInertia(
    totalAngle: $totalAngle,
    friction: .constant(0.005),
    onAngleChanged: { newAngle in
      totalAngle3 = newAngle
    },
    velocityMultiplier: .constant(0.1),
    animation: .spring(),
    stoppingAnimation: $valueChange
)

The Auto Rotation applies an automatic rotation to a simple rotation.

Declaration:

  .autoRotation()

Customization:

• rotationAngle: Identifies the original angle of the element [Type: Angle – Stock value: .degrees(0)]

• autoRotationSpeed: Indicates the speed of the rotation of the content during motion.[Type: Binding<Double> – Stock value: 20]

• autoRotationActive: Indicates if the content has to rotate or not, allowing for pause of the rotation.[Type: Binding<Bool> – Stock value: true]

  .autoRotation(
    rotationAngle: .degrees(20)
    autoRotationSpeed: .constant(20),
    autoRotationActive: .constant(true)
  )

In case there have been use of variables for the last two parameters it is possible to modify them using binding variables:

  .autoRotation(
    rotationAngle: .degrees(20),
    autoRotationSpeed: $autoRotationSpeed,
    autoRotationActive: $autoRotationActive
  )

Using this method will make able to modify the variables during the use of the modifier:

  Button(action: {
    autoRotationActive.toggle()
  }, label: {
    Text("Pause the Rotation")
  })

  Button(action: {
    autoRotationSpeed = [Insert double value here]
  }, label: {
    Text("Modify the speed")
  })

The Value Auto Rotation links a value related to the angle of an Auto Rotation

Setup

To use the modifier it’s necessary to create a variable of type double that will indicate the starting point of the element. Example:

  @State private var totalAngle: Double = 0.0

Declaration:

To declare the modifier it is mandatory to link the variable and also the onAngleChanged, inside of this there must be the linked variable.

  .valueAutoRotation(
    totalAngle: $totalAngle,
    onAngleChanged: { newAngle in
        totalAngle = newAngle
    }
  )

Customization:

• animation: this parameter controls the animation during a change of totalAngle from outside the modifier.[Type: Animation – Stock value: Missing value]

• autoRotationSpeed: Indicates the speed of the rotation of the content during motion.[Type: Binding<Double> – Stock value: 20]

• autoRotationActive: Indicates if the content has to rotate or not, allowing for pause of the rotation.[Type: Binding<Bool> – Stock value: true]

  .valueAutoRotation(
    totalAngle: $totalAngle,
    onAngleChanged: { newAngle in
        totalAngle = newAngle
    },
    animation: .spring(),
    autoRotationSpeed: .constant(20),
    autoRotationEnabled: .constant(true)
  )

At this point is also possible to add the reading of the totalAngle:

  Text("The value is: \(totalAngle)")

In case there have been use of variables for the last two parameters it is possible to modify them using binding variables:

  .valueAutoRotation(
    totalAngle: $totalAngle,
    onAngleChanged: { newAngle in
        totalAngle = newAngle
    },
    animation: .spring(),
    autoRotationSpeed: $autoRotationSpeed,
    autoRotationActive: $autoRotationActive
  )

Using this method will make able to modify the variables during the use of the modifier:

  Button(action: {
    autoRotationActive.toggle()
  }, label: {
    Text("Pause the Rotation")
  })

  Button(action: {
    autoRotationSpeed = [Insert double value here]
  }, label: {
    Text("Modify the speed")
  })

content

An Automatic rotation with finger rotation gesture and inertia effect. All in one.

Setup

To use the modifier it’s necessary to create a variable of type double that will indicate the starting point of the element. Example:

  @State private var totalAngle: Double = 0.0

Declaration:

To declare the modifier it is mandatory to link the variable and also the onAngleChanged, inside of this there must be the linked variable.

  .valueAutoRotationInertia(
    totalAngle: $totalAngle,
    onAngleChanged: { newAngle in
    totalAngle = newAngle
    }
  )

Customization

These are the customization possibilities:

• friction: the inertia factor of slowdown.[Type: Binding<Double> – Stock value: 0.005]
• velocityMultiplier: the speed multiplier of the inertia function related to the speed of the gesture on screen.[Type: Binding<Double> – Stock value: 0.1]
• animation: this parameter controls the animation during a change of totalAngle from outside the modifier.[Type: Animation – Stock value: Missing value]
• stoppingAnimation: this variable controls if the rotation stops after the value of knobValue changes outside the modifier. It is suggested to use a variable as it will be needed in case of this application.[Type: Binding<Bool> – Stock value: false]
• autoRotationSpeed: Indicates the speed of the rotation of the content during motion.[Type: Binding<Double> – Stock value: 20]
• autoRotationActive: Indicates if the content has to rotate or not, allowing for pause of the rotation.[Type: Binding<Bool> – Stock value: true]

  .valueAutoRotationInertia(
    totalAngle: $totalAngle,
    friction: .constant(0.1)
    onAngleChanged: { newAngle in
      totalAngle = newAngle
    },
    velocityMultiplier: .constant(0.1),
    animation: .spring(),
    stoppingAnimation: $valueChange,
    autoRotationSpeed: .constant(90),
    autoRotationEnabled: .constant(true)
  )

The Knob applies a range value from 0 to 1 to a certain angle interval.

Setup:

To use the modifier it’s necessary to create a variable of type double between the range 0.0-1.0, this variable will indicate the starting point of the knob. For example in this next implementation, the knob will start from the middle point:

  @State private var knobValue: Double = 0.5

Declaration:

To declare the modifier it is mandatory to link the variable and also the onKnobValueChanged, inside of this there must be the linked variable.

  .knobRotation(
    knobValue: $knobValue,
    onKnobValueChanged: { newValue in
      knobValue = newValue
    }
  )

Customization:

• minAngle: the minimum angle of the knob.[Type: Double – Stock value: -90]
• maxAngle: the maximum angle of the knob.[Type: Double – Stock value: +90]
• animation: this parameter controls the animation during a change of knobValue from outside the modifier.[Type: Animation – Stock value: Missing value]

  .knobRotation(
    knobValue: $knobValue,
    minAngle: -180,
    maxAngle: +180,
    onKnobValueChanged: { newValue in
      knobValue = newValue
    },
    animation: .spring()
  )

At this point is also possible to add the reading of the knobValue:

  Text("The value is: \(knobValue)")

In case there is need to change the value from outside this is the procedure ot call it:

  Button(action: {
    knobValue = 0.6
  }, label: {
    Text("Button")
  })

The Knob Inertia applies inertia effect to a simple knob.

Setup:

To use the modifier it’s necessary to create a variable of type double between the range 0.0-1.0, this variable will indicate the starting point of the knob. For example in this next implementation, the knob will start from the middle point:

  @State private var knobValue: Double = 0.5

Declaration:

To declare the modifier it is mandatory to link the variable and also the onKnobValueChanged, inside of this there must be the linked variable.

  .knobInertia(
    knobValue: $knobValue,
    onKnobValueChanged: { newValue in
      knobValue = newValue
    }
  )

Customization:

You can customize these parameters:

• minAngle: the minimum angle of the knob.[Type: Double – Stock value: -90]
• maxAngle: the maximum angle of the knob.[Type: Double – Stock value: +90]
• friction: the inertia factor of slowdown.[Type: Binding<Double> – Stock value: 0.2]
• velocityMultiplier: the speed multiplier of the inertia function related to the speed of the gesture on screen.[Type: Binding<Double> – Stock value: 0.1]
• animation: this parameter controls the animation during a change of knobValue from outside the modifier.[Type: Animation – Stock value: Missing value]
• stoppingAnimation: this variable controls if the rotation stops after the value of knobValue changes outside the modifier. It is suggested to use a variable as it will be needed in case of this application.[Type: Binding<Bool> – Stock value: false]

@State var valueChange: Bool = false
///Other code sections
  .knobInertia(
    knobValue: $knobValue,
    minangle: -180,
    maxAngle: +180,
    friction: .constant(0.1),
    onKnobValueChanged: { newValue in
      knobValue = newValue
    },
    velocityMultiplier: .constant(0.1),
    animation: .spring(),
    stoppingAnimation: $valueChange
  )

At this point is also possible to add the reading of the knobValue:

  Text("The value is: \(knobValue)")

In case there is need to change the value from outside this is the procedure ot call it:Other than sending the new value it is necessary to switch the value of valueChange like this:

  Button(action: {
    knobValue = 0.6
    valueChange = true
  }, label: {
    Text("Button")
  })