Add Text to an animated object

Question

Created Jan ’22

Replies 5

Boosts 0

Participants 2

Hello guys, everything was working perfectly but I can't do a thing please help me.
I was trying to put into this Rectangle some text , I've tried several lines of code but I can't put the Text INTO the rectangle. Can someone help me?
Here's the code

import SwiftUI

import PlaygroundSupport







struct ContentView: View {

    @State  var flipped = false 

    var body: some View {

        

            Group {

                RoundedRectangle(cornerRadius: 20)

                    .frame(width: 140, height: 170)

                    .foregroundColor(self.flipped ? .red : .orange)

                    .padding()

                    .rotation3DEffect(self.flipped ? Angle(degrees: 180): Angle(degrees: 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0)))

                    .animation(.default) 

                    .onTapGesture {

                        self.flipped.toggle()

                        

                    }

            }

                

        }

    }




PlaygroundPage.current.setLiveView(ContentView())

Answered by Jad-T in 700258022

struct ContentView: View {
    @State private var flipped = false
    var body: some View {
        Group {
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 140, height: 170)
                .foregroundColor(flipped ? .yellow : .purple)
                .padding()
                .overlay(Text("Hello, world!").rotation3DEffect(Angle(degrees: flipped ? 180 : 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0))).opacity(flipped ? 1 : 0))
                .rotation3DEffect(flipped ? Angle(degrees: 180): Angle(degrees: 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0)))
                .animation(.default, value: flipped)
                .onTapGesture {
                    flipped.toggle()
                }
        }
    }
}

Is this ok?

Boost

Answer 1

Jad-T OP

Jan ’22

I don't know if I understand what you mean but you can try user .overlay( Text("Hello, World!") ) as a modifier to the RoundedRectangle

0

Answer 2

Jad-T OP

Jan ’22

Or maybe this:

struct ContentView: View {
    @State private var flipped = false
    var body: some View {
        Group {
            ZStack{
                RoundedRectangle(cornerRadius: 20)
                    .frame(width: 140, height: 170)
                    .foregroundColor(flipped ? .red : .orange)
                    .padding()
                
                Text("Hello, world!")
                    .rotation3DEffect(.degrees(flipped ? 180 : 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0)))
                    
            }
            .rotation3DEffect(Angle(degrees: flipped ? 180 : 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0)))
            .onTapGesture {
                withAnimation(.linear(duration: 1)) {
                    flipped.toggle()
                }
            }
        }
    }
}

1

Answer 3

Balvir-255 OP

Jan ’22

I putted .overlay(Text("Hello, world!")) before .rotation3DEffect(self.flipped1 ? Angle(degrees: 180): Angle(degrees: 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0))), so this is my syntax now:

RoundedRectangle(cornerRadius: 20)
                    .frame(width: 140, height: 170)
                    .foregroundColor(self.flipped1 ? .yellow : .purple)
                    .padding()
                    .overlay(Text("Hello, world!")) 
                    .rotation3DEffect(self.flipped1 ? Angle(degrees: 180): Angle(degrees: 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0)))
                    .animation(.default) 
                    .onTapGesture {
                        self.flipped1.toggle()
                    }

I want the rectangle to show the text only on one face (only when it is flipped)... Instead now he shows it on all 2 faces

0

Answer 4

Jad-T OP

Jan ’22

Accepted Answer

struct ContentView: View {
    @State private var flipped = false
    var body: some View {
        Group {
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 140, height: 170)
                .foregroundColor(flipped ? .yellow : .purple)
                .padding()
                .overlay(Text("Hello, world!").rotation3DEffect(Angle(degrees: flipped ? 180 : 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0))).opacity(flipped ? 1 : 0))
                .rotation3DEffect(flipped ? Angle(degrees: 180): Angle(degrees: 0), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0)))
                .animation(.default, value: flipped)
                .onTapGesture {
                    flipped.toggle()
                }
        }
    }
}

Is this ok?

1

Answer 5

Balvir-255 OP

Jan ’22

Yes it is correct. Thanks very much!

0