我正在参与创作者训练营第5期， 点击了解活动概略。

在本章中，你将学会运用SwiftUI创建一个徽章旋转动画。

前语

为了更加了解和了解SwiftUI，本系列将从实战角度启航结束100个SwiftUI项目，便当大家更好地学习和掌握SwiftUI。

这一起也是对自己学习SwiftUI进程的常识收拾。

如有差错，以你为准。

项目布景

回想起以前有块AppleWatch的时候，达成一个运动效果，AppleWatch会给予一个效果徽章作为用户激励。

每次看到徽章在面前旋转时，心里的满足感总是爆棚，形成了一个正向的激励。

那么本章，我们就来结束下徽章旋转动画的效果。

项目树立

首要，创建一个新的SwiftUI项目，命名为RotaryBadge。

运用SwiftUI建立一个徽章旋转动画，旋转吧，我的掘金～

布景颜色

为了突出徽章的效果，我们给整个App加一个布景颜色。示例：

ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
}

运用SwiftUI建立一个徽章旋转动画，旋转吧，我的掘金～

徽章样式

对于徽章样式，因为找不到适宜的徽章，我们这儿运用App的Logo来作为徽章。示例：

Image("juejin")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100)
.clipShape(Circle())
.overlay(
Circle()
.stroke(Color.white, lineWidth: 5)
)
.shadow(radius: 20)

运用SwiftUI建立一个徽章旋转动画，旋转吧，我的掘金～

上述代码中，我们运用Image构建了一个图片视图。

然后运用resizable修饰符改变其巨细，再经过aspectRatio修饰符坚持宽高比，运用frame修饰符调整巨细为80，运用clipShape将图像切开为Circle圆形，运用overlay覆盖了一个lineWidth线宽为5的白色边框，最后运用shadow给图像加了个暗影。

旋转动画

动画部分，我们能够运用rotation3DEffect修饰符构建3D旋转动画。首要我们先声明一个变量animation存储旋转角度，示例：

@State var animation = 0.0

然后给Image徽章图片加一个rotation3DEffect修饰符运用3D旋转动画，示例：

.rotation3DEffect(.degrees(animation), axis: (x: 0, y: 1, z: 0.2))

我们让Image徽章图片沿着Y轴旋转，而且Z轴偏移0.2，让动画看起来好看些。

别的，当我们点击Image徽章图片时，修改旋转角度，示例：

.onTapGesture {
 withAnimation(.interpolatingSpring(stiffness: 20, damping: 5)) {
  self.animation += 360
 }
}

上述代码中，我们给Image徽章图片加一个点击工作，然后运用withAnimation函数运用显性动画，并且运用interpolatingSpring修饰符加了个弹簧的效果。

项目展示

本章代码

import SwiftUI
struct ContentView: View {
@State var animation = 0.0
var body: some View {
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
Image("juejin")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100)
.clipShape(Circle())
.overlay(
Circle()
.stroke(Color.white, lineWidth: 5)
)
.shadow(radius: 20)
.rotation3DEffect(.degrees(animation), axis: (x: 0, y: 1, z: 0.2))
.onTapGesture {
withAnimation(.interpolatingSpring(stiffness: 20, damping: 5)) {
self.animation += 360
}
}
}
}
}

恭喜你，结束了整个项目的全部内容！

快来着手试试吧。

假如本专栏对你有帮助，无妨点赞、议论、关注～