编写带有点击特效的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: ...
随机推荐
- Java读取Maven工程下的配置文件,工具类
Java开发中,经常需要在maven工程中读取src/main/resources下的配置文件: 思路如下: Class.getClassLoader() 返回类加载器ClassLoader,进而可以 ...
- 发布Framework 4.0到iis时,出现HTTP 错误 403.14 - Forbidden
新发布MVC到服务器的时候,经常碰到403.14错误,绝大部分的时候都是因为Framework 4.0需要重新注册下,在运行里输入:C:\Windows\Microsoft.NET\Framework ...
- 亿级别记录的mongodb批量导入Es的java代码完整实现
针对mongodb亿级别或者十亿级别的模糊查询,效率不高,解决方式是使用Es查询,这样就需要把数据导入的ES中 完整的代码实现如下所示:(仅供参考) import java.io.IOExceptio ...
- rails render
Render結果 在根據request資訊做好資料處理之後,我們接下來就要回傳結果給用戶.事實上,就算你什麼都不處理,Action方法裡面空空如也,甚至不定義Action,Rails預設也還是會執行r ...
- 如何学习JavaEE,项目又该如何做?
本文主要分为三个部分: 如何学习java基础 如何学习javaEE 你关心的项目问题 01 java基础学习 建议初学者看视频学习,不推荐看书.入门视频选择非常重要,最好是通俗易懂.深入浅出的教学视频 ...
- 不用bootstrap,只用CSS创建网格布局
本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...
- 网页3D效果库Three.js学习[二]-了解照相机
camera 上篇大致了解了three.js ,并可以创建一个简单的可动的立方体.下来我们着重了解下camera (照相机),照相机其实就是视角,就像你的眼睛.Three.js有两种不同的相机模式:直 ...
- SQL 修改表字段失败 解决方法
OK 大功告成 !!!
- asp后台读id设置样式
加runat=“server”
- [android] 手机卫士接收打电话广播显示号码归属地
使用广播接收者接收打电话的意图,显示号码归属地 新建一个类OutCallReceiver继承系统的BroadcastReceiver 重写onReceive()方法 调用getResultData() ...