编写带有点击特效的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. canvas文字自动换行、圆角矩形画法、生成图片手机长按保存、方形图片变圆形

    canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineH ...

  2. SpringMVC 之 Hello World 入门

    1 准备开发环境和运行环境 依赖 jar 包下载,如下图所示: 2 前端控制器的配置 在我们的web.xml中添加如下配置: <!-- The front controller of this ...

  3. SQL运算符

    SQL运算符实例代码教程 - 运算符是一个保留字或字符,主要用于在SQL语句的WHERE子句来执行,比较和算术运算等操作.  http://www.yiibai.com/sql/sql_operato ...

  4. ado.net中事务的使用

    ADO.Net中也提供了事务处理功能,通过ADO.net事务,可以将多个任务绑定在一起,如果所有的任务成功,就提交事务,如果有一个任务失败,就讲滚回事务 执行ADO.Net事务包含四个步骤,接下来以S ...

  5. SQL查询几种的区别。

    最近看了几篇SQL查询的文章做一下总结哦,大概简记如下: SQL查询的实质是,是指从数据库中取得数据的子集,可以先取列子集,然后再取符合条件的行子集. 1.单表查询: SELECT [Name] ,[ ...

  6. 【转】C#中continue、break和return用法

    continue和break的用法一样,直接写上这个单词,后面加一个分号就行 比如: continue; break; 我们先来谈continue 看代码 for (int i=0; i<10; ...

  7. ssh基础配置大全

    firstweb firstweb-pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi= ...

  8. Java Web整合开发王者归来(JSP + Servlet + Struts + Hibernate + Spring) - 读书笔记

    第1章 状态码表示响应类型: 保留 表示请求成功地接收 完成请求客户需进一步细化请求 客户错误 服务器错误 Web服务器: Apache服务器,特长是处理静态页面,效率非常高. Tomcat提供对JS ...

  9. Code Signal_练习题_matrixElementsSum

    After they became famous, the CodeBots all decided to move to a new building and live together. The ...

  10. JavaWeb学习总结(十):Session简单使用

    一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...