iOS自定义UIButton点击动画特效

借鉴相关资料,整理了一个很有意思的button动画效果,iOS自定义UIButton点击动画特效

先看一下效果图:

下面贴上代码:

ViewController:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

#import "ViewController.h"
#import "HWButton.h"

#define mainW [UIScreen mainScreen].bounds.size.width
#define mainH [UIScreen mainScreen].bounds.size.height

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  self.view.backgroundColor = [UIColor blackColor];

  //创建控件
  [self creatButton];
}

- (void)creatButton
{
  HWButton *button = [[HWButton alloc] initWithFrame:CGRectMake(mainW * 0.5 - 60, mainH - 100, 120, 72) maxLeft:100 maxRight:100 maxHeight:300];
  [button setImage:[UIImage imageNamed:@"button"] forState:UIControlStateNormal];
  button.images = @[[UIImage imageNamed:@"Circle 1"], [UIImage imageNamed:@"Circle 2"], [UIImage imageNamed:@"Circle 3"], [UIImage imageNamed:@"Hero"]];
  button.duration = 10;
  [button addTarget:self action:@selector(buttonOnClick:) forControlEvents:UIControlEventTouchUpInside];
  [self.view addSubview:button];
}

- (void)buttonOnClick:(HWButton *)btn
{
  [btn generateBubbleInRandom];
}

@end

HWButton:

#import <UIKit/UIKit.h>

@interface HWButton : UIButton

@property (nonatomic, assign) CGFloat maxLeft;
@property (nonatomic, assign) CGFloat maxRight;
@property (nonatomic, assign) CGFloat maxHeight;
@property (nonatomic, assign) CGFloat duration;
@property (nonatomic, strong) NSArray *images;

- (instancetype)initWithFrame:(CGRect)frame maxLeft:(CGFloat)maxLeft maxRight:(CGFloat)maxRight maxHeight:(CGFloat)maxHeight;

- (void)generateBubbleWithImage:(UIImage *)image;

- (void)generateBubbleInRandom;

@end

#import "HWButton.h"

@implementation HWButton
{
  CGPoint _startPoint;
  CGFloat _maxWidth;
  NSMutableSet *_recyclePool;
  NSMutableArray *_array;
}

- (instancetype)initWithFrame:(CGRect)frame maxLeft:(CGFloat)maxLeft maxRight:(CGFloat)maxRight maxHeight:(CGFloat)maxHeight
{
  self = [super initWithFrame:frame];
  if (self) {
    _maxHeight = maxHeight;
    _maxLeft  = maxLeft;
    _maxRight = maxRight;

    [self initData];
  }
  return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder
{
  self = [super initWithCoder:aDecoder];
  if (self) {
    [self initData];
  }
  return self;
}

- (void)initData
{
  _array = @[].mutableCopy;
  _recyclePool = [NSMutableSet set];
}

- (void)generateBubbleInRandom
{
  CALayer *layer;

  if (_recyclePool.count > 0) {
    layer = [_recyclePool anyObject];

    [_recyclePool removeObject:layer];

  }else {
    UIImage *image = self.images[arc4random() % self.images.count];

    layer = [self createLayerWithImage:image];
  }

  [self.layer addSublayer:layer];
  [self generateBubbleWithCAlayer:layer];
}

- (void)generateBubbleWithImage:(UIImage *)image
{
  CALayer *layer = [self createLayerWithImage:image];

  [self.layer addSublayer:layer];
  [self generateBubbleWithCAlayer:layer];
}

- (void)generateBubbleWithCAlayer:(CALayer *)layer
{
  _maxWidth = _maxLeft + _maxRight + self.bounds.size.width;

  _startPoint = CGPointMake(self.frame.size.width / 2, 0);

  CGPoint endPoint = CGPointMake(_maxWidth * [self randomFloat] - _maxLeft, -_maxHeight);
  CGPoint controlPoint1 = CGPointMake(_maxWidth * [self randomFloat] - _maxLeft, -_maxHeight * 0.2);
  CGPoint controlPoint2 = CGPointMake(_maxWidth * [self randomFloat] - _maxLeft, -_maxHeight * 0.6);

  CGMutablePathRef curvedPath = CGPathCreateMutable();
  CGPathMoveToPoint(curvedPath, NULL, _startPoint.x, _startPoint.y);
  CGPathAddCurveToPoint(curvedPath, NULL, controlPoint1.x, controlPoint1.y, controlPoint2.x, controlPoint2.y, endPoint.x, endPoint.y);

  CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animation];
  keyFrame.keyPath = @"position";
  keyFrame.path = CFAutorelease(curvedPath);
  keyFrame.duration = self.duration;
  keyFrame.calculationMode = kCAAnimationPaced;

  [layer addAnimation:keyFrame forKey:@"keyframe"];

  CABasicAnimation *scale = [CABasicAnimation animation];
  scale.keyPath = @"transform.scale";
  scale.toValue = @1;
  scale.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 0.1)];
  scale.duration = 0.5;

  CABasicAnimation *alpha = [CABasicAnimation animation];
  alpha.keyPath = @"opacity";
  alpha.fromValue = @1;
  alpha.toValue = @0.1;
  alpha.duration = self.duration * 0.4;
  alpha.beginTime = self.duration - alpha.duration;

  CAAnimationGroup *group = [CAAnimationGroup animation];
  group.animations = @[keyFrame, scale, alpha];
  group.duration = self.duration;
  group.delegate = self;
  group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
  group.fillMode = kCAFillModeForwards;
  group.removedOnCompletion = NO;
  [layer addAnimation:group forKey:@"group"];

  [_array addObject:layer];
}

- (CGFloat)randomFloat
{
  return (arc4random() % 100)/100.0f;
}

- (CALayer *)createLayerWithImage:(UIImage *)image
{
  CGFloat scale = [UIScreen mainScreen].scale;
  CALayer *layer = [CALayer layer];
  layer.frame  = CGRectMake(0, 0, image.size.width / scale, image.size.height / scale);
  layer.contents = (__bridge id)image.CGImage;;
  return layer;
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
  if (flag) {
    CALayer *layer = [_array firstObject];
    [layer removeAllAnimations];
    [layer removeFromSuperlayer];
    [_array removeObject:layer];
    [_recyclePool addObject:layer];
  }
}

@end

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-04-26

IOS 解决UIButton 点击卡顿/延迟的问题

前言 一开始还以为代码写的有问题,点击事件里面有比较耗时卡主线程的代码,逐一删减代码发现并不是这么回事. 正文 和参考文章里说的情况不完全相同,UIButton 并没有放在 UIScrollView 或 UITableView 上,但是 ViewController 是支持滑动返回的. ------------------华丽的分割线,搜索猜测解题中------------------ 解决办法:也没什么好办法,换成 ImageView 加 UITapGestureRecognizer 吧,另外

iOS UIButton 点击无响应的解决办法

前言 在日常开发中我们经常和按钮打交道,但是有时候会碰到比较难处理的问题,就是按钮不响应点击事件,这时候我们需要从下面几方面排查 按钮不响应的原因 1.按钮添加到了一个没有开启用户交互的父View上,例如UIImageView,这时候开启父试图的交互 view.userInteractionEnabled = YES 设为YES就可以解决问题 2.按钮自身被遮挡,点击的时候根本就没有点击到button,而是他上面一层View,自然就不会响应 这里有个看图层的方法,下图点击那个红框的按钮就可以看到

iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果

之前想过一些通过第三方的方式实现动画,感觉有点麻烦,就自己写了一个 不足之处还望大家多多指出 // 一句话,写在UITabBarController.m脚本中,tabBar是自动执行的方法 // 点击tabbarItem自动调用 -(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSInteger index = [self.tabBar.items indexOfObject:item]; [self a

Swift自定义iOS中的TabBarController并为其添加动画

自定义TabBarController 有时候默认的TabBarController不能满足我们的开发需求,比如你想用彩色的图标,系统却只调用图标的轮廓,所以我们需要自己定义一下TabBar. 方法一:修改TabBarController中的TabBar 新建 CustomTabBarController 类继承自 UITabBarController,并在Storyboard中设置: 首先自定义 tabBar 的背景,在 viewDidLoad() 方法中添加: 复制代码 代码如下: // 用

Android如何给按钮添加点击音效

有很多制作精良的APP都自带点击音效,那么如何简单的来实现这一效果,这里需要使用到的一个概念叫做SoundPool,这个类主要用于播放一些比较小的音频文件,因为比较方便,通常用在游戏里比较多. 代码 闲话不多说,我们现在需要做一个功能,就是点击某一按钮的时候同时播放音效出来. 首先准备好你的音频文件,然后,在你的rec下面简历一个文件夹命名为raw,放入音频文件,如图所示: 然后布局文件只有一个按钮 <LinearLayout xmlns:android="http://schemas.a

iOS中自定义弹出pickerView效果(DEMO)

UIPickerView平常用的地方好像也不是很多,顶多就是一些需要选择的地方,这次项目需要这一个功能,我就单独写了一个简单的demo,效果图如下: 新增主页面弹出view,在主页面添加的代码 有个小问题就是第四个直接添加在主页弹出来的view好像被导航栏给覆盖了,我还没去研究,就着急的先吧功能写了.大家谅解下 最初版本 话说我终于弄了gif了,再也不要去截图每张图都发一遍了!! 这个demo呢,等于是可以拿来直接用的第三方了吧,只需要传数据就可以了,弹出的三个框显示的数据也不一样,我的封装能力

微信小程序开发之自定义tabBar的实现

最近开发微信小程序,公司要求做一个类似闲鱼的tabbar,但是网上大多资料的tabbar都会在页面切换的时候重新渲染,所以我写了一个不会重新渲染的tabbar,有需要的直接拿走不谢.https://github.com/SuRuiGit/wxapp-customTabbar 在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页

Android自定义ImageView实现自动放大缩小动画

这篇讲的是如何生成一个自定义的ImageView,实现自动放大缩小动画. 为什么实现这个功能呢?因为我想在ViewPager实现图片放大缩小的动画,但是ViewPager几个页面的动画会一起动,而且放大全屏图片的话会相互覆盖,很诡异.于是上网搜demo,一无所获.迫于无奈... 废话不多说,直接贴代码. 1.配置文件直接添加 当直接在布局文件中添加图片的话,可以在自定义View代码中用getDrawable()获取图片资源,然后通过DrawBitmap绘制图片.通过不断绘制图片的位置,达到放大缩

iOS中UIActionSheet动态添加按钮

一,效果图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UIActionSheetDelegate> @end RootViewController.m //点击任何处,弹出UIActionSheet -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)even

iOS自定义UITabBar中间按钮

iOS自定义UITabBar中间按钮的具体代码,供大家参考,具体内容如下 自定义YLTbaBar继承自UITabBar git地址 YLTbaBar.h // // YLTabBar.h // 自定义tabbar // // Created by nyl on 2018/10/15. // Copyright © 2018年 nieyinlong. All rights reserved. // #import <UIKit/UIKit.h> //tab页面个数 typedef NS_ENUM

详解iOS中按钮点击事件处理方式

写在前面 在iOS开发中,时常会用到按钮,通过按钮的点击来完成界面的跳转等功能.按钮事件的实现方式有多种,其中较为常用的是目标-动作对模式.但这种方式使得view与controller之间的耦合程度较高,不推荐使用: 另一种方式是代理方式,按钮的事件在view中绑定,controller作为view的代理实现代理方法. 目标-动作对实现方式 具体来说,假设我们有一个包含一个Button的veiw,view将Button放在头文件中,以便外部访问.然后controller将view作为自己的vie