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

我正在参与掘金创作者训练营第5期， 点击了解活动详情。

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

前言

为了更加熟悉和了解SwiftUI，本系列将从实战角度出发完成100个SwiftUI项目，方便大家更好地学习和掌握SwiftUI。

这同时也是对自己学习SwiftUI过程的知识整理。

如有错误，以你为准。

项目背景

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

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

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

项目搭建

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

背景颜色

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

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

徽章样式

对于徽章样式，由于找不到合适的徽章，我们这里使用App的Logo来作为徽章。示例：

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

上述代码中，我们使用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
                    }
                }
        }
    }
}

恭喜你，完成了整个项目的全部内容！

快来动手试试吧。

如果本专栏对你有帮助，不妨点赞、评论、关注～