美文网首页
实践-小效果 Ⅳ

实践-小效果 Ⅳ

作者: 進无尽 | 来源:发表于2017-12-04 14:26 被阅读0次

    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

    相关文章

      网友评论

          本文标题:实践-小效果 Ⅳ

          本文链接:https://www.haomeiwen.com/subject/ylkecxtx.html