Cambiar la opacidad de una vista con un material Swift sin alterar el efecto visual.

Estoy intentando animar la transición de una vista (imagen) en SwiftUI que está desenfocada usando un efecto visual de material del sistema:

ZStack { Image(uiImage: UIImage(named: "Landscape-Color.jpg")!) .resizable() .aspectRatio(contentMode: .fit) .frame(width: 200, height: 200) VisualEffectView(UIBlurEffect(style: .systemThinMaterial)) Text("¡Hola mundo!") }.opacity(0.5)

Puedes encontrar un playground con un ejemplo de código completo aquí.

La transición debería animar la opacidad de la vista, sin cambiar el efecto de desenfoque del material de SwiftUI.
Como puedes ver en el ejemplo de código y en la imagen a continuación, establecer una opacidad disminuye el efecto de desenfoque y hace que el contenido subyacente sea más visible. En mi ejemplo, el efecto visual no debería cambiar cuando se elimina la vista.

Mismo ZStack con Visual effect view, el primero con .opacity(0.5)

Estoy buscando una solución para disminuir la opacidad del ZStack sin cambiar la apariencia del efecto visual. (solo el fondo azul detrás debería ser más visible, no la imagen dentro de la vista).

Cualquier ayuda es muy apreciada, y no me importa si la solución está en SwiftUI o UIKit, siempre y cuando pueda incrustar todo en algún lugar de SwiftUI.
Por favor, avísame si algo no está claro.

davy.ai

July 28, 2023 at 2:50 am

Para animar la transición de una vista borrosa en SwiftUI sin cambiar el efecto de desenfoque, puedes usar el modificador blend mode en combinación con animation. Aquí tienes un ejemplo:

struct BlurredView: View {
    @State private var isShown = false

    var body: some View {
        ZStack {
            Image(uiImage: UIImage(named: "Landscape-Color.jpg")!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 200, height: 200)
            VisualEffectView(UIBlurEffect(style: .systemThinMaterial))
                .blendMode(.multiply) // Establecer el modo de mezcla en multiplicar
                .frame(width: 200, height: 200)
                .opacity(isShown ? 0.5 : 0) // Establecer opacidad encendido/apagado
            Text("¡Hola, mundo!")
        }.onTapGesture {
            withAnimation(.easeInOut(duration: 1)) {
                self.isShown.toggle()
            }
        }
    }
}

En este ejemplo, primero animamos la opacidad de VisualEffectView al alternar una variable booleana isShown cuando se toca la vista. Luego, establecemos el modo de mezcla de VisualEffectView en multiply, lo cual oscurecerá la vista de manera que se preserve el efecto de desenfoque cuando cambie la opacidad. Finalmente, usamos el modificador frame para ajustar el tamaño de VisualEffectView al tamaño de la imagen y establecemos una duración para la animación usando withAnimation.

Answer

davy.ai

July 28, 2023 at 2:50 am
Para animar la transición de una vista borrosa en SwiftUI sin cambiar el efecto de desenfoque, puedes usar el modificador blend mode en combinación con animation. Aquí tienes un ejemplo:
```
struct BlurredView: View {
    @State private var isShown = false

    var body: some View {
        ZStack {
            Image(uiImage: UIImage(named: "Landscape-Color.jpg")!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 200, height: 200)
            VisualEffectView(UIBlurEffect(style: .systemThinMaterial))
                .blendMode(.multiply) // Establecer el modo de mezcla en multiplicar
                .frame(width: 200, height: 200)
                .opacity(isShown ? 0.5 : 0) // Establecer opacidad encendido/apagado
            Text("¡Hola, mundo!")
        }.onTapGesture {
            withAnimation(.easeInOut(duration: 1)) {
                self.isShown.toggle()
            }
        }
    }
}
```
En este ejemplo, primero animamos la opacidad de VisualEffectView al alternar una variable booleana isShown cuando se toca la vista. Luego, establecemos el modo de mezcla de VisualEffectView en multiply, lo cual oscurecerá la vista de manera que se preserve el efecto de desenfoque cuando cambie la opacidad. Finalmente, usamos el modificador frame para ajustar el tamaño de VisualEffectView al tamaño de la imagen y establecemos una duración para la animación usando withAnimation.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cambiar la opacidad de una vista con un material Swift sin alterar el efecto visual.

Answer

davy.ai