编写带有点击特效的UIButton
编写带有点击特效的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的更多相关文章
- Waves:类Material Design 的圆形波浪(涟漪)点击特效插件
Waves:类Material Design 的圆形波浪(涟漪)点击特效插件 2014/08/06 分类:前端开发, 素材分享 浏览:6,734次 来源:原创 1个评论 6,734 ...
- 编写带对话框界面的OCX
编写带对话框界面的OCX步骤: 1.添加Dialog资源,切换到资源视图,将对话框的Style设置为Child,在对话框界面右击添加类,输入类名MyDlg,使得其继承与CDialogEx.(继承CDi ...
- cnblogs鼠标点击特效
喜大普奔! 伸手党福利 ! 创建mouse.js文件, 上传到博客, 直接引用即可, 内容如下: (function(window, document, undefined) { var hearts ...
- 用POP动画编写带富文本的自定义动画效果
用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection [效果] [特点] * 支持富文本 * ...
- javascript基础1 语法 点击事件 超链接带点击事件
javascript ----------------------------------------------------------------------------------------- ...
- js鼠标点击特效,有关参数设置
效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击 ...
- jQuery 使用 jQuery UI 部件工厂编写带状态的插件(翻译)
首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...
- [译]SSRS 编写带参数的MDX报表
编写MDX报表长久以来对于报表人员来说都比较痛苦. 当然如果你用查询设计器(Query Designer) 直接拖拉数据集那就很方便,但是你们有没有想过查询设计器是怎么创建MDX的.或者创建的参数是如 ...
- Android5.0以上的项目都会有的按钮点击特效--水波纹
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...
随机推荐
- Redis笔记(一):Redis安装教程
Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Redis是目前应用最广泛的内存数据存储技术,相比之前的Me ...
- Python 开发
1.GIL,CPython,Python跟编译器没关系,语言有多个编译器,如:JPython.IronPython等,其他语言如是.GIL对IO密集型友好,计算密集型惨淡 2.pass,定义空执行函数 ...
- prometheus安装、使用
本文主要参考https://songjiayang.gitbooks.io/prometheus/introduction/what.html 二进制包安装 我们可以到 Prometheus 二进制下 ...
- Python 工匠:善用变量来改善代码质量
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂优文发表于云+社区专栏 作者:朱雷 | 腾讯IEG高级工程师 『Python 工匠』是什么? 我一直觉得编程某种意义上是一门『手艺 ...
- SC Create 创建一个Windows系统服务 转
转自:http://www.360doc.com/content/13/0428/09/7555793_281451268.shtml sc create Serv-U binpath= &q ...
- rem手机端适配
<script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...
- Ruby on Rails中的Rake教程(Rake如何把我灌醉!)
下面是我们使用Rake任务的例子: 1.给列表中的用户发送邮件 2.每晚数据的计算和报告 3.过期或重新生成缓存 4.备份数据和svn版本(how's this : subversion reposi ...
- 【LeetCode题解】9_回文数(Palindrome-Number)
目录 9_回文数(Palindrome-Number) 描述 解法一:转化为字符串的比较 思路 Java 实现 Python 实现 复杂度分析 解法二:反转数字的后半部分 ★ 思路 Java 实现 P ...
- 【LeetCode题解】136_只出现一次的数字
目录 [LeetCode题解]136_只出现一次的数字 描述 方法一:列表操作 思路 Java 实现 Python 实现 方法二:哈希表 思路 Java 实现 Python 实现 方法三:数学运算 思 ...
- Kaggle(一):房价预测
Kaggle(一) 房价预测 (随机森林.岭回归.集成学习) 项目介绍:通过79个解释变量描述爱荷华州艾姆斯的住宅的各个方面,然后通过这些变量训练模型, 来预测房价. kaggle项目链接:ht ...