I have a custom ImageView and i use a scaleEffect to animate / scale the ImageView using the code below
ImageView(named: imagename)
.padding(.trailing, 16)
.padding(.top, 105)
.scaleEffect(scale)
.onAppear {
let baseAnimation = Animation.easeInOut(duration: 0.5)
let repeated = baseAnimation.repeatCount(5, autoreverses: true)
withAnimation(repeated) {
scale = 0.5
}
}
Tha imageview scales to 0.5 five times. Each one repeat completes in 0.5 seconds. I need the following. I have to change the duration of the easeInOut by 0.1 for each repeat. So first time the animation is going to complete in 0.5 seconds. Second time it repeats should complete in 0.4 seconds and so on. Is this possible using withAnimation? Any help or suggestion appreciated.
Related
I want that my y-axis always shows a range from 0-60 even though there are data sets that do not represent the full range.
E.g. if I'm showing a data set with values of just 10 and 40 the y-axis range is only from 0-40 instead of 0-60.
Any ideas how to configure the y-axis for Swift Charts (iOS 16) with a fixed range?
Chart {
ForEach(model.series.entries, id: \.weekday) { element in
BarMark(
x: .value("Day", element.weekday, unit: .day),
y: .value("Feeling", element.value)
)
}
}
.chartXAxis {
let unit: Calendar.Component = model.resolution == .yearly ? .month : .day
AxisMarks(values: .stride(by: unit, count: 1)) { _ in
AxisGridLine()
AxisValueLabel(format: .dateTime.weekday(.narrow), centered: true)
}
}
try adding this to your Chart, ...to configure the y-axis for Swift Charts (iOS 16) with a fixed range:
.chartYScale(domain: 0...60)
In my SwiftUI app, I have an Image:
I added this image using:
Image("shoe_test")
.resizable()
.frame(width: 275, height: 275)
.rotationEffect(Angle(degrees: 30))
However, I would like to flip this image in the opposite direction, like:
For this, I haven't tried anything, but I had no luck with rotationEffect, and I can't get my head over this, Any help is greatly appreciated,
You could use
.rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
documentation
With the rotation3DEffect you can rotate your image in all 3 Dimensions.
rotating along the x axis will flip the image top/bottom
rotating along the y axis will mirror it right/left
rotating along the z axis will flip and mirror it.
It can be done with scale
.scaleEffect(x: -1, y: 1) // flip horizontally
.scaleEffect(x: 1, y: -1) // flip vertically
I am trying to move a CGPoint (greenPoint) by moving another one (bluePoint). The distance and angle must remained the same. In order to capture that, I store the x delta as adjacent and y delta as opposite. My issue is that when I move the blue point, the adjacent and opposite values get updated and therefore the greenPoint stays in the same place.
I was thinking I could maybe take a snapshot of the values before the .onChanged, but can’t work out how? Code is below.
Circle()
.strokeBorder(.white, lineWidth: 2)
.background(Circle().fill(.blue))
.frame(width:10, height:10)
.position(bluePoint)
.gesture(DragGesture()
.onChanged{state in
greenPoint = CGPoint(x: bluePoint.x+adjacent, y: bluePoint.y+opposite)
bluePoint = state.location
})
Note: I need to keep adjacent and opposite as variables rather than static values, because in another part of the code moving the greenPoint is permitted while the bluePoint stays still.
Thanks!
Thanks for the suggestions. Got it to work with the following:
let adj = baseCoords.adjacent
let op = baseCoords.opposite
…
Circle()
.strokeBorder(.white, lineWidth:2)
.background(Circle().fill(.blue))
.frame(width:12, height:12)
.position(bluePoint)
.gesture(DragGesture()
.onChanged{state in
bluePoint = state.location
greenPoint.x = bluePoint.x + adj
greenPoint.y = bluePoint.y + op
}
)
By copying into 2 new variables, the adj and op values do not update during the .onChanged.
I have an app that shows a bunch of people who each have an origin and angle.
struct Location {
var centre:CGPoint
var facing:Angle
}
SwiftUI magically and automatically does a lot of the animation as they move from location A to location B
withAnimation {
person.location = newLocation
}
However - for the Angle (facing) property, I want the animation to go in the shortest route (bearing in mind that in the real world - angles wrap around).
e.g. Swift UI correctly animates when the angle changes 5 -> 10 (degrees)
5,6,7,8,9,10
but going from 2 to 358, it takes the long way around
SwiftUI does 2,3,4,5,6,7.......,357,358
where I would like it to do
2,1,0,359,358
how can I go about this?
thank you
update: I'm hoping for a solution which allows me to work with the animation system, perhaps using a new MyAngle struct which provides the animation steps directly, perhaps using some kind of animation modifier.
.easeInOut modifies the steps - is there an equivalent approach where I can create a .goTheRightWay animation?
Ok - Posting my own answer.
It works a bit like #Ben's answer - but moves the 'shadow angle' management to the rotation effect.
All you have to do is switch rotationEffect(angle:Angle) for shortRotationEffect(angle:Angle,id:UUID)
this looks like
#State private var rotationStorage = RotationStorage()
//and then in body
Image(systemName: "person.fill").resizable()
.frame(width: 50, height: 50)
.shortRotationEffect(self.person.angle,id:person.id,storage:rotationStorage)
.animation(.easeInOut)
the ShortRotationEffect uses the provided id to maintain a dictionary of previous angles. When you set a new angle, it figures out the equivalent angle which provides a short rotation and applies that with a normal rotationEffect(...)
Here it is:
class RotationStorage {
private var storage: [UUID: Angle] = [:]
fileprivate func setAngle(id:UUID,angle:Angle) {
storage[id] = angle
}
fileprivate func getAngle(_ id:UUID) -> Angle? {
return storage[id]
}
}
extension View {
/// Like RotationEffect - but when animated, the rotation moves in the shortest direction.
/// - Parameters:
/// - angle: new angle
/// - anchor: anchor point
/// - id: unique id for the item being displayed. This is used as a key to maintain the rotation history and figure out the right direction to move
func shortRotationEffect(_ angle: Angle,
anchor: UnitPoint = .center,
id: UUID,
storage:RotationStorage) -> some View {
modifier(ShortRotation(angle: angle,
anchor: anchor,
id: id,
storage:storage))
}
}
struct ShortRotation: ViewModifier {
var angle: Angle
var anchor: UnitPoint
var id: UUID
let storage:RotationStorage
func getAngle() -> Angle {
var newAngle = angle
if let lastAngle = storage.getAngle(id) {
let change: Double = (newAngle.degrees - lastAngle.degrees) %% 360.double
if change < 180 {
newAngle = lastAngle + Angle.init(degrees: change)
} else {
newAngle = lastAngle + Angle.init(degrees: change - 360)
}
}
storage.setAngle(id: id, angle: newAngle)
return newAngle
}
func body(content: Content) -> some View {
content
.rotationEffect(getAngle(), anchor: anchor)
}
}
this relies on my positive modulus function:
public extension Double {
/// Returns modulus, but forces it to be positive
/// - Parameters:
/// - left: number
/// - right: modulus
/// - Returns: positive modulus
static func %% (_ left: Double, _ right: Double) -> Double {
let truncatingRemainder = left.truncatingRemainder(dividingBy: right)
return truncatingRemainder >= 0 ? truncatingRemainder : truncatingRemainder+abs(right)
}
}
How about adjusting the newLocation value to keep within 180˚ of the start? Here's a function to check if the distance animated is greater than half way around and provide a new endpoint that satisfies it.
func adjustedEnd(from start: CGFloat, to target: CGFloat) -> CGFloat {
// Shift end to be greater than start
var end = target
while end < start { end += 360 }
// Mod the distance with 360, shifting by 180 to keep on the same side of a circle
return (end - start + 180).truncatingRemainder(dividingBy: 360) - 180 + start
}
Some sample test cases:
let startValues: [CGFloat] = [2, -10, 345, 365, 700]
let endValues: [CGFloat] = [2, 10, 180, 185, 350, -10, 715, -700]
for start in startValues {
print("From \(start):")
for end in endValues {
let adjusted = adjustedEnd(from: start, to: end)
print("\t\(end) \tbecomes \(adjusted);\tdistance \(abs(adjusted - start))")
}
}
prints the following:
From 2.0:
2.0 becomes 2.0; distance 0.0
10.0 becomes 10.0; distance 8.0
180.0 becomes 180.0; distance 178.0
185.0 becomes -175.0; distance 177.0
350.0 becomes -10.0; distance 12.0
-10.0 becomes -10.0; distance 12.0
715.0 becomes -5.0; distance 7.0
-700.0 becomes 20.0; distance 18.0
From -10.0:
2.0 becomes 2.0; distance 12.0
10.0 becomes 10.0; distance 20.0
180.0 becomes -180.0; distance 170.0
185.0 becomes -175.0; distance 165.0
350.0 becomes -10.0; distance 0.0
-10.0 becomes -10.0; distance 0.0
715.0 becomes -5.0; distance 5.0
-700.0 becomes 20.0; distance 30.0
From 345.0:
2.0 becomes 362.0; distance 17.0
10.0 becomes 370.0; distance 25.0
180.0 becomes 180.0; distance 165.0
185.0 becomes 185.0; distance 160.0
350.0 becomes 350.0; distance 5.0
-10.0 becomes 350.0; distance 5.0
715.0 becomes 355.0; distance 10.0
-700.0 becomes 380.0; distance 35.0
From 365.0:
2.0 becomes 362.0; distance 3.0
10.0 becomes 370.0; distance 5.0
180.0 becomes 540.0; distance 175.0
185.0 becomes 185.0; distance 180.0
350.0 becomes 350.0; distance 15.0
-10.0 becomes 350.0; distance 15.0
715.0 becomes 355.0; distance 10.0
-700.0 becomes 380.0; distance 15.0
From 700.0:
2.0 becomes 722.0; distance 22.0
10.0 becomes 730.0; distance 30.0
180.0 becomes 540.0; distance 160.0
185.0 becomes 545.0; distance 155.0
350.0 becomes 710.0; distance 10.0
-10.0 becomes 710.0; distance 10.0
715.0 becomes 715.0; distance 15.0
-700.0 becomes 740.0; distance 40.0
(Edited to account for negative ending values)
Edit: From your comment about keeping a second value around, what about setting Location.facing to the adjusted angle, and then adding to Location something like
var prettyFacing: Angle {
var facing = self.facing
while facing.degrees < 0 { facing += Angle(degrees: 360) }
while facing.degrees > 360 { facing -= Angle(degrees: 360) }
return facing
}
After trying both of the other options, we were still getting visual glitches (less common, but still there!).
Our Solution: Use UIKit for Animation
We've created a SPM package that adds a simple modifier, .uiRotationEffect(). This modifier wraps your View in a UIView, and uses UIView's .animate(...) function to get the correct behavior.
You can install the package here or you can just copy and paste the code here, it's not very long.
GIF of the working solution:
the documentation is too breif.
can anyone knowa about how to use Element.status() in Raphael.js?
very appreciate if you can give a demo.
Element.status shows the current animation applied to an element OR you can set the status on a particular animation.
Think of an animation interpolating between 0 and 1. So half way through an animation, it would have a value of 0.5. This is applied to whatever attribute is being animated. (So if animating x from 0 to 100 half way through, status will be 0.5 and x will be 50, not accounting for any easing applied like bounce).
So lets suppose instead of creating a nice smooth interpolation between attributes, we want to make an element move in 10 discrete steps. We can set the status each time of an animation manually. Example.
var raphAnimation = Raphael.animation( { x: 100, y: 100 }, 1000);
rect.status( raphAnimation, 0.5 )
example jsfiddle
var rect = paper.rect(10, 20, 300, 200);
var raphAnimation = Raphael.animation( { x: 100, y: 100 }, 1000);
for( var c = 1; c <= 10; c++ ) {
(function() {
var step = c
setTimeout( function() {
rect.status( raphAnimation, 0.1 * step )
}, step * 200)
})();
}
Note: If you repeat using the status set command, I think it will take the animation as fresh. So suppose the animation is from 0->100 and you set status to be 0.5 it will go half way. Now suppose you do the same and call it again with 0.5, it will now be 0.5 of the 'remainder' as it now only has half the distance to traverse.