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

2020-01-18 13:48:52于丽


- (void)setText:(NSString *)text withTextColor:(UIColor *)textColor
{
# 就是给 Label 赋外界传来的值 若有其他的控件可以改一些参数用此方法
  if (text)
  {
    [self.textLabel setText:text];
  }
  if (textColor)
  {
    [self.textLabel setTextColor:textColor];
  }
}

第 4 步: 根据风格的不同我们要控制动画展示的范围, 也就是加入动画在内部就不能超过 View 的范围



# 这里就是重写了ButtonType setter方法,同时判断一下风格根据风格选择是否把超过视图 View 的部分裁剪掉
- (void)setButtonType:(FlashButtonType)buttonType
{
  _buttonType = buttonType;
    if (buttonType == DDFlashButtonInner)
  {
// 内容和子视图是夹在视图的边界内 ( 只允许 view范围内有子视图和类容可以显示 )
    self.clipsToBounds = 1;
  }else
  {// 外面可以显示
    self.clipsToBounds = 0;
  }
}

第 5 步: 准备工作做好后, 一个思路就是去写点击事件, 需要什么就去创建什么! 这先去思考点击事件中需要的东西, 都满足之后再去写完善点击事件! 动画效果首先需要动画, 另外还需要能添加动画的 Layer;首先写个得到动画的方法!


- (CAAnimationGroup *)createFlashAnimationWisthScale:(CGFloat)scale
                      duration:(CGFloat)duratiton
{
# 创建按比例收缩变大的动画
// 指定要在渲染动画性能时的关键路径 也就是图形转换的方式 这里是按收缩比例 这里也可以不用.scale 因为我们初始值设置是根据CATransform3D
  CABasicAnimation *scaleAnnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// 动画开始点
  // 这个动画效果初值 就是本身的原始的位置
  scaleAnnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
  // 等价 scaleAnnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)];
// 动画结束点
  // 在 x 轴和 y 轴的变化比例
  scaleAnnimation.toValue = [NSValue valueWithCATransform3D:(CATransform3DMakeScale(scale, scale, 1))];

# 创建透明度变换的动画 
 CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
  alphaAnimation.fromValue = @1;
  alphaAnimation.toValue = @0;

# 创建动画组把上面两个动画加进去 
  CAAnimationGroup *animation = [CAAnimationGroup new];
  animation.animations = @[scaleAnnimation,alphaAnimation];
// 动画效果 (节奏, Timing Function的会被用于变化起点和终点之间的插值计算.形象点说是Timing Function决定了动画运行的节奏(Pacing),比如是均匀变化(相同时间变化量相同),先快后慢,先慢后快还是先慢再快再慢.)
  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

# 返回我们想要的动画效果组 
  return animation;
}

第 6 步: 得到一个CAShapeLayer 类型的图层(因为要结合贝塞尔曲线得到形状路径), 画一个形状那么就需要有位置