实践－小效果 Ⅳ

進无尽

发布于 2018-09-12 18:11:12

5920

发布于 2018-09-12 18:11:12

1.为imageView添加倒影

    UIImageView *imageV  =[[UIImageView alloc] initWithFrame:CGRectMake(110,80,100,200)];
    imageV.image = [UIImage  imageNamed:@"2.jpeg"];
    imageV.backgroundColor = [UIColor clearColor];
    [self.view addSubview:imageV];
    
  // 设置倒影图层
    CGRect frame = imageV.frame;
    frame.origin.y += (frame.size.height);
    
    UIImageView *reflectionImageView = [[UIImageView alloc] initWithFrame:frame];
    imageV.clipsToBounds = TRUE;
    reflectionImageView.contentMode = imageV.contentMode;
    [reflectionImageView setImage:imageV.image];
   //倒立
    reflectionImageView.transform = CGAffineTransformMakeScale(1.0, -1.0);
    
    CALayer *reflectionLayer = [reflectionImageView layer];
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.bounds = reflectionLayer.bounds;
    gradientLayer.position = CGPointMake(reflectionLayer.bounds.size.width / 2, reflectionLayer.bounds.size.height * 0.5);
    gradientLayer.colors = [NSArray arrayWithObjects:
                            (id)[[UIColor clearColor] CGColor],
                            (id)[[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.4] CGColor], nil];
    
    gradientLayer.startPoint = CGPointMake(0.5,0.2);
    gradientLayer.endPoint = CGPointMake(0.5,1.0);
    reflectionLayer.mask = gradientLayer;
    
    [self.view addSubview:reflectionImageView];

设置一个UIImageView为倒立的同等控件，设置这个UIImageView的layer的mask为一个渐变图层，效果就出来了。

2.为imageView画水印

@implementation UIImageView (addImage)
// 画水印
- (void) setImage:(UIImage *)image withWaterMark:(UIImage *)mark inRect:(CGRect)rect
{
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 4.0)
    {
        UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0.0);
    }
    //原图
    [image drawInRect:self.bounds];
    //水印图
    [mark drawInRect:rect];
    UIImage *newPic = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    self.image = newPic;
}
@end

使用类别的方法为图片加水印

3.仿新版ofo共享单车小黄人动态效果

这个效果是通过重力感应来实现。对于重力感应，我们需要使用iOS中的CoreMotion框架。其中包括加速计、陀螺仪、磁力计等。 具体参照此文

4.动态的暂停按钮

按钮.gif

使用 CAShapeLayer UIBezierPath 和 CABasicAnimation动画实现

@property (nonatomic, strong) CAShapeLayer *leftShape;

[_leftShape removeAllAnimations];

CABasicAnimation *leftanimation = [CABasicAnimation animationWithKeyPath:@"path"];
leftanimation.removedOnCompletion = NO;
leftanimation.duration = 0.3;
leftanimation.fromValue = (__bridge id)(self.isSelect ? [self getSelectLeftLayerBezierPath].CGPath : [self getNormalLeftLayerBezierPath].CGPath);
leftanimation.toValue = (__bridge id)(self.isSelect ? [self getNormalLeftLayerBezierPath].CGPath : [self getSelectLeftLayerBezierPath].CGPath);
_leftShape.path = self.isSelect ? [self getNormalLeftLayerBezierPath].CGPath : [self getSelectLeftLayerBezierPath].CGPath;
[_leftShape addAnimation:leftanimation forKey:@"leftAnimationPath"];

5.按钮设置文字和图片并设置位置

自带的效果

自带的效果是左侧图片，右侧文字，现在的效果是：

  [selectButton[i] setTitleEdgeInsets:UIEdgeInsetsMake(Scale_Y(10), 0, Scale_Y(10), Scale_X(40))];
  [selectButton[i] setImageEdgeInsets:UIEdgeInsetsMake(Scale_Y(10), Scale_X(40), Scale_Y(10), 0)];
  
  这个按钮是 Scale_X(80) 的宽度

通过设置 setTitleEdgeInsets setImageEdgeInsets 和随意设置图片和文字的位置。

6.UITabelViewCell上实现自带的打勾效果

 cell.accessoryType      = UITableViewCellAccessoryNone;

   // 点击行事件
  -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
      // 获取点击行的cell
   UITableViewCell *cell   = [tableView cellForRowAtIndexPath:indexPath];
  // 如果cell已经被标记
  if (cell.accessoryType == UITableViewCellAccessoryCheckmark) {
      // 取消标记
      cell.accessoryType  = UITableViewCellAccessoryNone;
  }  // 如果cell未标记
  else{
    // 标记cell
      cell.accessoryType  = UITableViewCellAccessoryCheckmark;
  }
  // 取消选中效果
  [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

蓝色是tableViewCell的默认前景色（tintColor），所以我们设置cell.tintColor = [UIColor redColor];就可以改前景色为红色了，同样那个accessoryCheckmark的颜色就变成红色了

此时，点击行即可选中，取消选中，但是滚动一下视图吧，你会发现下面某些未被点击的行也已经被标记了，这是因为cell的重用机制造成的，在第一篇文章中就这个问题有提到过 解决cell重用问题，在cellForRow方法中，定义cellIdetifier时，将其每一行都定义为不同的值，就不会出现覆盖，重复等现象了

NSString *cellIdentifier = [NSString stringWithFormat:@“cellIdentifier%d%d",indexPath.row,indexPath.section];

7.实现毛玻璃效果

UIImageView *imageView =[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"cell2"]];
imageView.frame =CGRectMake(50, 100, self.view.frame.size.width-100, self.view.frame.size.width-100);
[self.view addSubview:imageView];
//    //iOS 8.0
//    * * 模糊效果的三种风格
//    *
//    *  @param UIBlurEffectStyle
//    *
//    * UIBlurEffectStyleExtraLight,  //高亮
//    * UIBlurEffectStyleLight,       //亮
//    * UIBlurEffectStyleDark         //暗
//    * *
UIBlurEffect *blurEffect =[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *effectView =[[UIVisualEffectView alloc]initWithEffect:blurEffect];
effectView.frame = CGRectMake(self.view.frame.size.width/2,0,
                              self.view.frame.size.width/2, self.view.frame.size.height);
[self.view addSubview:effectView];

UIBlurEffectStyleExtraLight

UIBlurEffectStyleLight

UIBlurEffectStyleDark

8表滚动到底部

自动移动.gif

之前使用如下方法一直出现抖动的Bug；

if (self.tableView.contentSize.height > self.tableView.frame.size.height)
{
    CGPoint offset = CGPointMake(0, self.tableView.contentSize.height - self.tableView.frame.size.height);
    [self.tableView setContentOffset:offset animated:animated];
}

最后无奈使用了如下方法，只是没有了渐变的动画效果；；

 [self.Tb insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:self.dataArray.count-1 inSection:0]] withRowAnimation:UITableViewRowAnimationLeft];

[self.Tb scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:self.dataArray.count-1 inSection:0]  atScrollPosition:UITableViewScrollPositionBottom animated:NO];
//这里一定要设置为NO，动画可能会影响到scrollerView，导致增加数据源之后，tableView到处乱跳

9.左右摇晃的动画

[self startAnimate: whileBgView[0] ];
 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(100 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self stopAnimate: whileBgView[0] ];
 });
  
#define RADIANS(degrees) (((degrees) * M_PI) / 180.0)

- (void)startAnimate :(UIView *)view
{
    view.transform = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-5));
    [UIView animateWithDuration:0.25 delay:0.0 options:(UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse) animations:^ {
        view.transform = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(5));
    } completion:nil];
}

- (void)stopAnimate :(UIView *)view
{
    [UIView animateWithDuration:0.25 delay:0.0 options:(UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionCurveLinear) animations:^ {
        view.transform = CGAffineTransformIdentity;
    } completion:nil];
}

10.怎么像safari一样滑动的时候隐藏navigationbar?

  self.navigationController.hidesBarsOnSwipe = YES;

滑动隐藏导航条.gif

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.12.04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度