6.4_SkewEffect- 实现倾斜效果

理解倾斜效果

倾斜效果，或称“Skew”，是一种强大的视觉变换。它能让你的视图沿着X轴或Y轴倾斜，创造出独特的透视感。想象一下，一个矩形如何变成平行四边形！✨

这种效果在UI设计中非常流行。你可以用它来模拟3D深度，或者为元素添加动感。例如，按钮在点击时轻微倾斜，会显得更加生动。

实现 SkewEffect

要实现倾斜效果，你需要创建一个遵循 GeometryEffect 协议的结构体。这个协议要求你实现 effectValue(size:) 方法。这个方法是核心，它定义了视图如何被变换。

在 effectValue(size:) 中，你将使用 CGAffineTransform 来应用倾斜。CGAffineTransform 是一个强大的工具，用于2D图形的仿射变换。

struct SkewEffect: GeometryEffect {
    var skewAngle: CGFloat

    var animatableData: CGFloat {
        get { skewAngle }
        set { skewAngle = newValue }
    }

    func effectValue(size: CGSize) -> ProjectionTransform {
        return ProjectionTransform(CGAffineTransform(a: 1, b: tan(skewAngle), c: 0, d: 1, tx: 0, ty: 0))
    }
}

在上面的代码中，b: tan(skewAngle) 是关键。它控制了X轴方向的倾斜量。skewAngle 越大，倾斜度就越大。

应用倾斜动画

一旦你定义了 SkewEffect，就可以将其应用到任何 View 上。使用 .modifier() 或 . skewEffect() 扩展方法。

例如，你可以让一个文本视图在轻触时倾斜：

Text("倾斜我！")
    .modifier(SkewEffect(skewAngle: isSkewed ? 0.5 : 0))
    .animation(.easeInOut, value: isSkewed)
    .onTapGesture {
        isSkewed.toggle()
    }

这里，isSkewed 状态变量控制着倾斜角度。当 isSkewed 改变时，SwiftUI 会自动为 skewAngle 的变化添加动画。

创意应用场景

倾斜效果的应用非常广泛，可以极大地提升用户体验。

• 卡片翻转动画：在卡片翻转时加入轻微的倾斜，增加真实感。
• 文字特效：为标题或特殊文字添加倾斜，使其更具视觉冲击力。
• 视差滚动：结合滚动视图，创建元素倾斜的视差效果，带来深度感。

通过巧妙地运用 SkewEffect，你的SwiftUI动画将变得更加生动和引人入胜。快去尝试吧！🚀