iOS 利用动画和贝塞尔实现咻咻效果

先上效果图:

圆形

方形

思路分析:

这四种风格其实就是两种, 一种是动画效果在视图View的内部, 另一种是在视图的外部! 我们可以尝试封装自定义 View 设置相关属性去实现这两个风格. 点击时候触及动画, 说明要在这个 View 上添加手势! 分析动画效果其实是两种, 第一种是视图的比例由小到大,第二种是动画显示效果是渐渐变暗! 那么我们可以把两种效果写到一个动画组中!还有一个问题是效果的形状, 也就是 Layer 动画展示的形状有方形有圆形, 这个形状就需要我们思考如何去绘制和判断!

代码分析:

首先要创建自定义一个 View 类去实现点击有动画的效果! 因为分析有两种风格(在外在内)的动画, 因此要在. h 文件中声明属性去接收外界告知的风格! 我们还可以添加一些供外界修改的值, 比如动画的边界粗细, 填充颜色, 动画时间等等这里我用一个颜色举例! 外界可提供一个颜色, 怎么用具体代码中有!

typedef NS_ENUM(NSUInteger, FlashButtonType){
  # 风格定义一个枚举类型的去表示 分别是代表动画在里面和外面 (便于理解)
  DDFlashButtonInner = 0,
  DDFlashButtonOuter = 1

};
# 定义的两个属性
@property (strong, nonatomic) UIColor *flashColor;
@property (assign, nonatomic) FlashButtonType buttonType;

# 写这个方法可以对 View 的子视图上的子控件进行操作, 可以不把子控件都暴露出去
- (void)setText:(NSString *)text withTextColor:(UIColor *)textColor;

- (instancetype) initWithFrame:(CGRect)frame{

  if (self = [super initWithFrame:frame]) {
# 创建手势 并添加到 View 上
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTap:)];
     [self addGestureRecognizer:tap];
    self.textLabel = [[UILabel alloc] initWithFrame:self.bounds];
    self.textLabel.backgroundColor = [UIColor clearColor];
    [self.textLabel setTextAlignment:NSTextAlignmentCenter];
    [self addSubview:self.textLabel];
    self.backgroundColor = [UIColor cyanColor];
# 给一个默认的风格 不设置就是代表 动画在里面
    self.buttonType = DDFlashButtonInner;
  }  
  return self;
}