IOS开发之bounce动画发布界面的效果

来源:爱站网时间:2020-10-04编辑:网友分享
随着互联网的发展,很多东西都在不断的更新换代,当然我们的开发也是一样的,本文是爱站技术频道小编为大家带来的IOS开发之bounce动画发布界面的效果,希望对大家有所帮助。

随着互联网的发展,很多东西都在不断的更新换代,当然我们的开发也是一样的,本文是爱站技术频道小编为大家带来的IOS开发之bounce动画发布界面的效果,希望对大家有所帮助。

效果图:

代码:

 

// PublishView.m
// UIImage+ImageEffects.h 苹果蒙化图片的分类 pop.h弹跳动画框架 EJExtension.h模型转换框架
// ComposeModel 用于设置按钮文字与图片的模型,在本地设置plist文件保存image(按钮图片)和text(按钮文字)

#import "PublishView.h"
#import "BSVerticalButton.h"
#import "UIImage+ImageEffects.h"
#import "pop.h"
#import "MJExtension.h"
#import "ComposeModel.h"

@interface PublishView ()

/** 取消按钮 */
@property (nonatomic, weak) UIButton *cancelButton;

@end

@implementation PublishView

/** 全局 window_ */
static UIWindow *window_;

/** 显示发布view */
+ (void)show{
  // 添加一个独立的window是为了隔离点击事件
  window_ = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
  
  window_.hidden = NO;
  
  PublishView *publish = [[PublishView alloc]init];
  
  publish.frame = window_.bounds;
  
  [window_ addSubview:publish];
}

- (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if (self) {
    
    UIImageView *imageView = [[UIImageView alloc]initWithImage:[self getEffectImage]];
    [self addSubview:imageView];

    [self setupUI];
  }
  return self;
}

- (void)setupUI{
  
  //这里用自定义的 window 是为了隔绝点击事件 不让点击事件传到后面控制器的view上去
 
  // 按钮弹跳动画时让view本身不能点击
  self.userInteractionEnabled = NO;
  
  // 从plis文件获得一个模型数组
  NSArray *buttonModelArray = [ComposeModel mj_objectArrayWithFilename:@"buttonImage.plist"];
  
  CGFloat button_w = 72;
  CGFloat button_h = button_w + 30;
  NSInteger maxLoc = 3; //最多列数
  
  //按钮弹跳动画停止后的起始 y 值
  CGFloat buttonEnd_y = ([[UIScreen mainScreen] bounds].size.height - button_h * 2) / 2;
  
  //最开始在屏幕外上方的的起始 y 值
  CGFloat buttonBegin_y = buttonEnd_y - [[UIScreen mainScreen] bounds].size.height;
  
  //按钮的起始间隙值
  CGFloat buttonStartMargin = 20;
  
  //中间的一个按钮相对于两边按钮的间隙
  CGFloat buttonMargin = ([[UIScreen mainScreen] bounds].size.width - buttonStartMargin * 2 - button_w * maxLoc) / (maxLoc - 1);
  
  for (NSInteger i = 0; i  *)touches withEvent:(UIEvent *)event{
  
  [self animationWithBlock:nil];
}

// 获得一个磨纱蒙板 image 图片
- (UIImage *)getEffectImage{
  UIWindow *window = [UIApplication sharedApplication].keyWindow; //获取当前 window
  UIGraphicsBeginImageContext(window.size); //开启window大小的图形上下文
  CGContextRef ref = UIGraphicsGetCurrentContext(); //开启图形上下文
  [window.layer renderInContext:ref]; //把window图层 渲染到图形上下文当中
  UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); //获取图片
  UIGraphicsEndImageContext(); //关闭图形上下文
  image = [image applyLightEffect]; //调用 image 分类方法 使图片调成蒙板状态
  return image;
}

@end

项目中用到的垂直布局自定义按钮 BSVerticalButton

#import "BSVerticalButton.h"

@implementation BSVerticalButton

- (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if (self) {
    [self setupUI];
  }
  return self;
}

- (void)awakeFromNib{

  [super awakeFromNib];
  
  [self setupUI];
}


- (void)setupUI{

  self.titleLabel.textAlignment = NSTextAlignmentCenter;

}

- (void)layoutSubviews{

  [super layoutSubviews];
  
  //按钮内部图片 frame
  CGRect imageViewFrame = self.imageView.frame;
  imageViewFrame.origin.x = 0;
  imageViewFrame.origin.y = 0;
  imageViewFrame.size.width = self.bounds.size.width;
  imageViewFrame.size.height = self.bounds.size.width;
  self.imageView.frame = imageViewFrame;
  
  //按钮内部label frame
  CGRect titleLabelFrame = self.titleLabel.frame;
  titleLabelFrame.origin.x = 0;
  titleLabelFrame.origin.y = self.imageView.frame.size.height + 10;
  titleLabelFrame.size.width = self.bounds.size.width;
  self.titleLabel.frame = titleLabelFrame;
  
  //按钮自身大小
  CGRect buttonBounds = self.bounds;
  buttonBounds.size.width = self.imageView.frame.size.width;
  buttonBounds.size.height = self.imageView.bounds.size.height + self.titleLabel.bounds.size.height + 10;
  self.bounds = buttonBounds;
}
@end


以上就是爱站技术频道小编介绍的IOS开发之bounce动画发布界面的效果,其实程序的的开发并不难,最关键的还是要看后期的运作。 

上一篇:PickerDate控件使用安装步骤介绍

下一篇:IOS开发中触摸事件的详细介绍

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载