水波纹效果轻松实现，iOS Material Design 轻松 Get

iOS

2023-01-09 11:28:52

水波纹：点亮指尖，愉悦交互

序言

交互设计中，反馈是至关重要的。当用户与我们的应用程序交互时，他们需要知道他们的操作是否被注册和理解。水波纹效果就是这样一种反馈，它可以通过视觉和触觉方式告诉用户他们的点击或触摸已被识别。

实现思路

实现水波纹效果的一种方法是使用扩展（Category）。扩展允许我们为现有类添加新方法和属性，而无需创建新的子类。这意味着我们可以将水波纹效果添加到任何 UIView 中，而无需修改其代码。

实现步骤

创建扩展 ：创建一个 UIView 的扩展，并使用 @interface 和 @implementation 语句或 extension 语句来声明它。
添加方法 ：向扩展中添加一个方法来创建水波纹效果，可以命名为 showRippleEffect。
实现方法 ：在方法中，创建一个 CAShapeLayer 并将其添加到 UIView 的 layer 层。使用 UIBezierPath 来创建一个圆形路径，并使用 CABasicAnimation 来添加动画效果。
删除 CAShapeLayer ：在动画完成后，延迟一段时间后删除 CAShapeLayer。

应用场景

水波纹效果可用于各种场景，包括：

按钮：当用户点击按钮时，提供视觉反馈。
文本框 ：当用户输入文本时，指示文本框已激活。
开关：当用户切换开关时，提供视觉反馈。
导航栏 ：当用户点击导航栏上的按钮时，提供视觉反馈。

示例代码

@interface UIView (RippleEffect)

- (void)showRippleEffectAtPoint:(CGPoint)point;

@end

@implementation UIView (RippleEffect)

- (void)showRippleEffectAtPoint:(CGPoint)point {
    CAShapeLayer *rippleLayer = [CAShapeLayer layer];
    rippleLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(point.x - 20, point.y - 20, 40, 40)].CGPath;
    rippleLayer.fillColor = [UIColor colorWithWhite:0.9 alpha:0.3].CGColor;
    [self.layer addSublayer:rippleLayer];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.fromValue = [NSNumber numberWithFloat:0.0];
    animation.toValue = [NSNumber numberWithFloat:1.0];
    animation.duration = 0.5;
    animation.removedOnCompletion = NO;
    [rippleLayer addAnimation:animation forKey:@"rippleEffect"];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [rippleLayer removeFromSuperlayer];
    });
}

@end