编写带有点击特效的UIButton

效果:

源码:

//
// ViewController.m
// Button
//
// Created by XianMingYou on 15/1/18.
// Copyright (c) 2015年 XianMingYou. All rights reserved.
// #import "ViewController.h" @interface ViewController () @property (nonatomic, strong) UIButton *button;
@property (nonatomic, strong) UIView *showView;
@property (nonatomic, strong) UILabel *showLabel;
@property (nonatomic, strong) UILabel *staticLabel; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor blackColor]; self.showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
self.showView.transform = CGAffineTransformMakeRotation( * M_PI / 180.0);
self.showView.userInteractionEnabled = NO;
self.showView.backgroundColor = [UIColor redColor]; self.staticLabel = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
self.staticLabel.text = @"YouXianMing";
self.staticLabel.font = [UIFont fontWithName:@"HelveticaNeue-Thin" size:.f];
self.staticLabel.textAlignment = NSTextAlignmentCenter;
self.staticLabel.textColor = [UIColor redColor]; self.showLabel = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
self.showLabel.text = @"YouXianMing";
self.showLabel.alpha = .f;
self.showLabel.font = [UIFont fontWithName:@"HelveticaNeue-Thin" size:.f];
self.showLabel.textAlignment = NSTextAlignmentCenter;
self.showLabel.textColor = [UIColor blackColor]; // 完整显示按住按钮后的动画效果
_button = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
_button.backgroundColor = [UIColor clearColor];
_button.layer.borderWidth = .f;
_button.layer.borderColor = [UIColor redColor].CGColor;
_button.layer.masksToBounds = YES;
_button.center = self.view.center;
[self.view addSubview:_button]; self.showView.center = CGPointMake(_button.frame.size.width / .f, _button.frame.size.height / .f);
[_button addSubview:self.showView]; self.staticLabel.center = CGPointMake(_button.frame.size.width / .f, _button.frame.size.height / .f);
[_button addSubview:self.staticLabel]; self.showLabel.center = CGPointMake(_button.frame.size.width / .f, _button.frame.size.height / .f);
[_button addSubview:self.showLabel]; // 按住按钮后没有松手的动画
[_button addTarget:self
action:@selector(scaleToSmall)
forControlEvents:UIControlEventTouchDown | UIControlEventTouchDragEnter]; // 按住按钮松手后的动画
[_button addTarget:self
action:@selector(scaleAnimation)
forControlEvents:UIControlEventTouchUpInside]; // 按住按钮后拖拽出去的动画
[_button addTarget:self
action:@selector(scaleToDefault)
forControlEvents:UIControlEventTouchDragExit];
} - (void)scaleToSmall {
[UIView animateWithDuration:0.5f animations:^{
self.showView.bounds = CGRectMake(, , , );
self.showView.backgroundColor = [UIColor redColor];
self.showLabel.alpha = .f;
} completion:^(BOOL finished) {
NSLog(@"%d", finished);
}];
} - (void)scaleAnimation {
// 获取到当前的状态
self.showView.bounds = ((CALayer *)self.showView.layer.presentationLayer).bounds;
self.showView.layer.backgroundColor = ((CALayer *)self.showView.layer.presentationLayer).backgroundColor;
self.showLabel.alpha = ((CALayer *)self.showLabel.layer.presentationLayer).opacity; // 移除之前的动画状态
[self.showView.layer removeAllAnimations]; // 做全新的动画
[UIView animateWithDuration:0.25f animations:^{
self.showView.bounds = CGRectMake(, , , );
self.showView.backgroundColor = [UIColor clearColor];
self.showLabel.alpha = .f;
} completion:^(BOOL finished) { }];
} - (void)scaleToDefault {
// 获取到当前的状态
self.showView.bounds = ((CALayer *)self.showView.layer.presentationLayer).bounds;
self.showView.layer.backgroundColor = ((CALayer *)self.showView.layer.presentationLayer).backgroundColor;
self.showLabel.alpha = ((CALayer *)self.showLabel.layer.presentationLayer).opacity; // 移除之前的动画状态
[self.showView.layer removeAllAnimations]; // 做全新的动画
[UIView animateWithDuration:0.25f animations:^{
self.showView.bounds = CGRectMake(, , , );
self.showView.backgroundColor = [UIColor clearColor];
self.showLabel.alpha = .f;
} completion:^(BOOL finished) { }];
} @end

核心源码:

编写带有点击特效的UIButton的更多相关文章

  1. Waves:类Material Design 的圆形波浪(涟漪)点击特效插件

    Waves:类Material Design 的圆形波浪(涟漪)点击特效插件 2014/08/06 分类:前端开发, 素材分享 浏览:6,734次  来源:原创 1个评论       6,734   ...

  2. 编写带对话框界面的OCX

    编写带对话框界面的OCX步骤: 1.添加Dialog资源,切换到资源视图,将对话框的Style设置为Child,在对话框界面右击添加类,输入类名MyDlg,使得其继承与CDialogEx.(继承CDi ...

  3. cnblogs鼠标点击特效

    喜大普奔! 伸手党福利 ! 创建mouse.js文件, 上传到博客, 直接引用即可, 内容如下: (function(window, document, undefined) { var hearts ...

  4. 用POP动画编写带富文本的自定义动画效果

    用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection [效果] [特点] * 支持富文本 * ...

  5. javascript基础1 语法 点击事件 超链接带点击事件

    javascript ----------------------------------------------------------------------------------------- ...

  6. js鼠标点击特效,有关参数设置

    效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击 ...

  7. jQuery 使用 jQuery UI 部件工厂编写带状态的插件(翻译)

    首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...

  8. [译]SSRS 编写带参数的MDX报表

    编写MDX报表长久以来对于报表人员来说都比较痛苦. 当然如果你用查询设计器(Query Designer) 直接拖拉数据集那就很方便,但是你们有没有想过查询设计器是怎么创建MDX的.或者创建的参数是如 ...

  9. Android5.0以上的项目都会有的按钮点击特效--水波纹

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

随机推荐

  1. 面试题30:KMP 字符串查找

    参考:http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93Morris%E2%80%93Pratt_algorithm.html自己写的很简单的K ...

  2. SpringBoot入门 (六) 数据库访问之Mybatis

    本文记录学习在SpringBoot中使用Mybatis. 一 什么是Mybatis MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 ...

  3. 使用ichartjs进行布局图表页面

    先说官网  http://www.ichartjs.com/ 进入里面会有一个可视化布局系统,布局起来自己想要的样式快捷方便,和bootstrap可视化布局系统是一个道理的.

  4. PowerDesigner中利用数据库表反向生成PDM(jdk必须是32位)

    第一步:创建一个空的PDM模型(选择对应的DBMS):File-->New 第二步:选择DataBase-->Configure Connections,配置即将连接的数据库 第三步:选择 ...

  5. 远程桌面控制项目开发(Spring+Netty+Swing)

    [目录] 1.前言 2.初现端倪 3.款款深入 4.责任细分 5.功能层级图 6.项目结构 7.关键类设计 8.一些设计想法 9.待优化 10.一点心得 11.效果演示 12.讨论 13.GitHub ...

  6. 任务三十七:UI组件之浮出层

    任务三十七:UI组件之浮出层 面向人群: 有一定JavaScript基础 难度: 低 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量 ...

  7. 安装 wordpress 出现 抱歉,我不能写入wp-config.php文件

    本文告诉大家如何安装 wordpress ,在安装过程出现 抱歉,我不能写入wp-config.php文件如何解决 下载 wordpress China 简体中文 - WordPress 安装 在安装 ...

  8. SQLSERVER查询整个数据库中某个特定值所在的表和字段的方法

    这几天有业务部门需要使用一个SAP B1老系统  中的报表,但是由于此报表没有加时间条件,导致一旦开始查询 就会导致B1系统异常退出.由于报表对应的SQL 是存在数据库中,所以想通过查找到这个报表的S ...

  9. 使用mybatis-generator生成自动代码

    2019-02-22 配置文件: pom.xml  添加 dependency plugin    基于mybatis-plus <dependency> <groupId>o ...

  10. Freemarker详解一

    1 截取字符串有的时候我们在页面中不需要显示那么长的字符串,比如新闻标题,这样用下面的例子就可以自定义显示的长度<#if title.content?length lt 8>        ...