Анимированный градиентный фон в Swift UIIOS

Программируем под IOS
Ответить Пред. темаСлед. тема
Anonymous
 Анимированный градиентный фон в Swift UI

Сообщение Anonymous »

Я пытаюсь создать анимированный градиент в стиле «флаг» поверх моего профиля пользователя — вроде того, что есть здесь в Stripe: https://stripe.com/gb
Приведенный ниже код переключает внешний вид градиента при переключении/выключении страницы, содержащей это представление, но не анимирует его, когда страница открыта. Как это настроить, чтобы создать необходимую анимацию.
import SwiftUI

struct UserProfileHeaderView: View {
let plan: String
let headerTitle: String
let greeting: String
let planDescription: String
var isTrailingTitle: Bool
let description: String

@State private var animateGradient = false

var body: some View {
let startColor = plan == "Classic" ? Color.purple : plan == "Plus" ? Color.red : Color(hex: "#636363")
let endColor = plan == "Classic" ? Color.blue : plan == "Plus" ? Color.orange : plan == "Ultimate" ? Color(hex: "#010057") : Color(hex: "#636363")

let gradient = LinearGradient(
gradient: Gradient(colors: [startColor, endColor]),
startPoint: animateGradient ? .topLeading : .bottomTrailing,
endPoint: animateGradient ? .bottomTrailing : .topLeading
)

VStack(alignment: .leading, spacing: 8) {
HStack {
if !isTrailingTitle {
TextInfinity(text: headerTitle)
.font(.largeTitle)
.foregroundColor(.white)
.fontWeight(.bold)
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
} else {
Spacer()
TextInfinity(text: headerTitle)
.font(.largeTitle)
.foregroundColor(.white)
.fontWeight(.bold)
.padding()
.frame(maxWidth: .infinity, alignment: .trailing)
}
}
HStack {
if !isTrailingTitle {
TextInfinity(text: greeting)
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
.padding(.leading)
} else {
Spacer()
TextInfinity(text: greeting)
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
.padding(.leading)
.padding(.trailing)
}
}
HStack {
if !isTrailingTitle {
TextInfinity(text: description)
.font(.title3)
.foregroundColor(.white)
.padding(.leading)
} else {
Spacer()
TextInfinity(text: description)
.font(.title3)
.foregroundColor(.white)
.padding(.leading)
.padding(.trailing)
}
}
HStack {
Spacer()
TextInfinity(text: plan == "none" ? "NOT SUBSCRIBED" : planDescription.uppercased())
.font(.headline)
.fontWeight(.bold)
.foregroundColor(.white)
.padding([.trailing, .bottom], 10)
}
}
.padding(.top, 35)
.frame(maxWidth: .infinity)
.background(gradient)
.padding(.horizontal, 0)
.padding(.vertical, 20)
.ignoresSafeArea()
.onAppear {
withAnimation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
animateGradient.toggle()
}
}
}
}

// Preview Provider
struct UserProfileHeaderView_Previews: PreviewProvider {
static var previews: some View {
UserProfileHeaderView(
plan: "Classic",
headerTitle: "Your Profile",
greeting: "Welcome!",
planDescription: "Classic Plan",
isTrailingTitle: false,
description: "\( DeveloperPreview.shared.user.name ?? "")\(( DeveloperPreview.shared.user.name != nil && DeveloperPreview.shared.user.name != "") ? " | " : "")\( DeveloperPreview.shared.user.email)"
)
}
}


Подробнее здесь: https://stackoverflow.com/questions/785 ... n-swift-ui
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Анимированный градиентный фон в Swift UI
    Anonymous » » в форуме IOS
    0 Ответы
    23 Просмотры
    Последнее сообщение Anonymous
  • Swift/UIKIt: как сделать так, чтобы градиентный фон занимал всю длину UITableView?
    Anonymous » » в форуме IOS
    0 Ответы
    18 Просмотры
    Последнее сообщение Anonymous
  • Swift/UIKIt: как сделать так, чтобы градиентный фон занимал всю длину UITableView?
    Anonymous » » в форуме IOS
    0 Ответы
    23 Просмотры
    Последнее сообщение Anonymous
  • Градиентный движущийся фон [закрыто]
    Anonymous » » в форуме CSS
    0 Ответы
    16 Просмотры
    Последнее сообщение Anonymous
  • Как плавно анимировать градиентный фон
    Anonymous » » в форуме CSS
    0 Ответы
    10 Просмотры
    Последнее сообщение Anonymous

Вернуться в «IOS»