Rectangle()
.fill(Color.blue)
.frame(width: 1000, height: randomPOS(true, false))
Hey so Im trying to rotate this rectangle and .rotationeffect() isn't working does anyone know how you would go about doing this I wasn't able to find anything on it.
You can use the rotationEffect(_:anchor:) modifier.
Example:
struct ContentView: View {
var body: some View {
Rectangle()
.fill(Color.blue)
.aspectRatio(contentMode: .fit)
.rotationEffect(.degrees(45))
}
}
Result:
Related
I just can't seem to get rid of the ~6 height padding(?) at the top of ScrollView. I've tried setting padding to 0 on both the ScrollView itself and on it's content. I've tried using SwiftUI-Introspect to get at the content insets, but they appear to already be 0 for the top. I could just use offset(y: -6), but I'd like to understand what is causing the padding. Does anyone know?
var body: some View {
VStack(spacing: 0) {
Rectangle()
.frame(width: UIScreen.main.bounds.width, height: 200)
.foregroundColor(.blue)
Rectangle()
.frame(width: UIScreen.main.bounds.width, height: 200)
.foregroundColor(.red)
ScrollView {
Rectangle()
.frame(width: UIScreen.main.bounds.width, height: 200)
.foregroundColor(.black)
}
}
}
I'm trying to write a public init that takes a UIImage, but I want to allow both a normal, actual UIImage made from say a photo (or otherwise drawn) OR use the SF Symbols, but I am stumped as to why the SF Symbols are blurred. What am I missing?
Here is the code I've got:
struct TempUIImageView: View {
var defaultImage: UIImage = UIImage(systemName: "globe")!
var defaultImageString: String = "globe"
var body: some View {
VStack {
Image(uiImage: defaultImage)
.resizable()
.scaledToFill()
.aspectRatio(contentMode: .fit)
Image(systemName: defaultImageString)
.resizable()
.scaledToFill()
.aspectRatio(contentMode: .fit)
}
.padding()
}
}
i'm hoping to use a solution in this:
#State private var displayedImage: UIImage?
...
private var displayImage: some View {
Image(uiImage: displayedImage!)
.resizable()
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
.scaledToFill()
.aspectRatio(contentMode: .fit)
.clipShape(Circle())
.shadow(radius: 4)
}
But displayedImage could be a UIImage OR an SF Symbol.
(The forced unwrap is dealt with in other code, but this is preliminary code anyways)
When you use Image(systemName:) the system draws to the screen using vector graphics, resulting in sharp, un-blurry renderings.
However, UIImage, including, it seems UIImage(systemName:) is a bitmapped image, at a set resolution. If you scale it up (as you're doing in your second block of code), you'll get blurriness, because you're not getting the benefits of the vector graphics.
Using a pattern like the following would allow you to conditionally display a Image(uiImage:) or Image(systemName:) and still use the same set of modifiers for each:
struct ContentView: View {
#State var displayedImage : UIImage?
var imageToDisplay: Image {
if let displayedImage = displayedImage {
return Image(uiImage: displayedImage)
} else {
return Image(systemName: "camera.circle")
}
}
var body: some View {
imageToDisplay
.resizable()
.scaledToFill()
.aspectRatio(contentMode: .fit)
.frame(width: 400, height: 400)
}
}
I am trying to create an animation where a small heart icon is pumping. I have the two images I believe are sufficient to create the effect, but I have no idea how to create this animation effect. I have tried several things and none of them seem to work.
Any help you can offer will be greatly appreciated.
Here's what I have so far:
#State var show : Bool = false
var body: some View {
VStack(alignment: .trailing){
ZStack{
BlackView()
if(show){
Image("heartOrgan1")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 50, height:50)
.hidden()
Image("heartOrgan")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 50, height: 50)
} else {
Image("heartOrgan1")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 50, height: 50)
Image("heartOrgan")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 50, height: 50)
.hidden()
}
}
.onAppear(){
withAnimation { self.show.toggle()}
}
}
}
The general idea is to loop the switching between two heart images that represent a heart beating. I am interested in using these particular heart images as they look like actual hearts, and I like that.
You don't necessarily need two images for this. You can use one image and apply the scale effect on it. Make the one image scale up and add a delay to it. Then make it repeat.
Example:
#State private var animationAmount: CGFloat = 1
var body: some View {
ZStack {
Color.black
Image(systemName: "heart.fill")
.resizable()
.frame(width: 50, height: 50)
.foregroundColor(.red)
.scaleEffect(animationAmount)
.animation(
.linear(duration: 0.1)
.delay(0.2)
.repeatForever(autoreverses: true),
value: animationAmount)
.onAppear {
animationAmount = 1.2
}
}
}
You can also change the decimal value in inside the delay() to have different heartbeats. The heartbeat looks consistent with delays between 0.1 - 0.4.
I would slightly modify the great answer provided by Jame to make the animation a little bit more realistic, just by changing the linear animation for a spring animation like this:
struct ContentView: View {
#State private var animationAmount: CGFloat = 1
var body: some View {
ZStack {
Color.black
Image(systemName: "heart.fill")
.resizable()
.frame(width: 50, height: 50)
.foregroundColor(.red)
.scaleEffect(animationAmount)
.animation(
.spring(response: 0.2, dampingFraction: 0.3, blendDuration: 0.8) // Change this line
.delay(0.2)
.repeatForever(autoreverses: true),
value: animationAmount)
.onAppear {
animationAmount = 1.2
}
}
}
}
You can play with repetition, dampingFraction and blenDuration parameters to get a more customised animation.
:)
I have this code:
struct ContentView: View {
var body: some View {
ZStack {
Image("bird")
.resizable()
.aspectRatio(contentMode: .fill)
.edgesIgnoringSafeArea(.all)
Image(systemName: "camera.on.rectangle")
.offset(x: 160, y: -380)
.font(.largeTitle)
Image(systemName: "heart")
.offset(x: -160, y: 380)
.font(.largeTitle)
.foregroundColor(.red)
Image(systemName: "square.and.arrow.up.on.square")
.offset(x: -160, y: -380)
.font(.largeTitle)
}
}
}
I use the .offset to set the specific place to the images to be. But when I change to another device format they move away. Is there a way to make constrains or better this code to function properly in SwiftUI?
Thanks.
The following code snippet yields a Cannot invoke initializer for type 'Circle' with no arguments error on the .clipShape() line. I've tried shuffling around the modifiers to no avail. Any suggestions for fixing? Thanks!
struct MedCircleImage: View {
var image: Image
var body: some View {
image
.resizable()
.aspectRatio(contentMode: .fit)
.clipShape(Circle())
.overlay(Circle().stroke(periwinkle, lineWidth: 3))
.frame(width: 86, height: 86)
}
}
try this:
you did not define your periwinkle variable...unfortunately SwiftUI does not always show the "real" error
struct ContentView: View {
var image: Image = Image("laguna")
var body: some View {
image
.resizable()
.aspectRatio(contentMode: .fit)
.clipShape(Circle())
.overlay(Circle().stroke(lineWidth: 3))
.frame(width: 86, height: 86)
}
}