web虹彩图形_如何在SwiftUI中创建虹彩视图

web虹彩图形

变数 (Variables)

To create an iridescent view, we need to declare an x variable to animate the gradient’s endpoint and a degree variable to animate the rotation of the view. Let’s have a timer to animate the view every five seconds:

要创建虹彩视图，我们需要声明一个x 变量 动画渐变的端点和degree 变量 使视图旋转动画。 让我们有一个计时器，每隔五秒钟对视图进行动画处理：

For the gradient colors, I chose the colors below that look like the typical iridescent colors. You can change the colors to the colors of your choice.

对于渐变色，我选择了下面的颜色，这些颜色看起来像典型的彩虹色。 您可以将颜色更改为您选择的颜色。

视图 (View)

To create the view, we will use a ZStack that contains a RoundedRectangle shape and a Text view:

为了创建视图，我们将使用一个包含RoundedRectangle形状和Text视图的ZStack ：

动画 (Animation)

We have two values to animate. Use AnimatablePair to animate both the x and degree variables:

我们有两个要设置动画的值。 使用AnimatablePair对x和degree进行动画处理 变量：

To the RoundedRectangle, add .onReceive. That takes our timer and changes the values of our degree variable from 0 to 45 and our x variable from 0 to 1 and vice versa:

到RoundedRectangle ，添加.onReceive 。 这需要我们的计时器，并将degree变量的值从0更改为45，将x变量的值从0更改为1，反之亦然：

Finally, we need to rotate the ZStack on its y-axis. To do this, we need to use rotation3DEffect:

最后，我们需要在ZStack轴上旋转ZStack 。 为此，我们需要使用rotation3DEffect ：

Iridescent view

虹彩视图

Now you can build this too! Thanks for reading.

现在您也可以构建它！ 谢谢阅读。

翻译自: https://medium.com/better-programming/how-to-create-an-iridescent-view-in-swiftui-c2c9178490d1

web虹彩图形