写一个气泡动画视图

最新推荐文章于 2021-11-30 14:34:14 发布

原创最新推荐文章于 2021-11-30 14:34:14 发布 · 799 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iOS

这篇博客介绍了如何在iOS应用中实现一个自定义的气泡动画视图。作者通过创建一个名为FLGGrowCourceTipView的UIView子类，并使用矢量图作为背景，实现了气泡视图的显示和动画效果。气泡视图会在指定位置从一点渐变扩大，显示文本内容，然后在点击时收缩消失。博客内容包括视图初始化、手势识别、图像拉伸、动画效果和视图布局等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先需要找一张气泡的矢量图

效果图：

创建自定义FLGGrowCourceTipView 继承UIView

- (instancetype)initWithFrame:(CGRect)frame{

self = [super initWithFrame:frame];

if (self) {

[self createView];

}

return self;

}

- (void)createView{

self.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.30];

/// 添加一个手势，，点击PopView试图时动画隐藏PopView

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction)];

[self addGestureRecognizer:tap];

/// 创建气泡imageview 对imageview取一小部分进行拉伸（聊天气泡实现）

self.backImageView = [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"用户汽泡"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10) resizingMode:UIImageResizingModeStretch]];

[self addSubview:self.backImageView];

/// 初始气泡为一点

self.backImageView.frame = CGRectMake(self.frame.size.width-kCustomWidth_(30), kCustomHeight_(70), 0, 0);

[UIView animateWithDuration:0.2 animations:^{

/// 开始动画气泡变大

self.backImageView.frame = CGRectMake(self.frame.size.width/2+kCustomWidth_(30), kCustomHeight_(70), self.frame.size.width/2-kCustomWidth_(60), kCustomHeight_(180));

}completion:^(BOOL finished) {

//// 动画结束气泡试图上添加相应的控件

self.tipLabel = [[UILabel alloc] init];

[self.backImageView addSubview:self.tipLabel];

self.tipLabel.numberOfLines = 0;

self.tipLabel.text = NSLocalizedString(@"The short-term scoring rate of a certain subject is equal to or equal to the average scoring rate, and the amount of rehearsal is equal to or equal to the average rehearsing amount. The subject name is green, if both are less than, it is red, otherwise it will not be colored.", nil);

self.tipLabel.font = FontWithSize(15);

self.tipLabel.sd_layout.leftSpaceToView(self.backImageView, kCustomWidth_(5)).topSpaceToView(self.backImageView, kCustomWidth_(5)).rightSpaceToView(self.backImageView, kCustomWidth_(5)).bottomSpaceToView(self.backImageView, kCustomWidth_(5));

}];

}

- (void)tapAction{

//先将未到时间执行前的任务取消，，，，防止点击过快动画出错（防止变态点击）

[[self class] cancelPreviousPerformRequestsWithTarget:self selector:@selector(allTaskBeginDownload)object:nil];

[self performSelector:@selector(allTaskBeginDownload)withObject:nil afterDelay:0.2f];

}

-(void) allTaskBeginDownload{

//// 点击了试图气泡动画缩成一点，，，动画结束后将所有试图移除

[UIView animateWithDuration:0.2 animations:^{

self.tipLabel.hidden = YES;

self.backImageView.frame = CGRectMake(self.frame.size.width-kCustomWidth_(30), kCustomHeight_(70), 0, 0);