编写带有点击特效的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(0, 0, 300, 0)];
    self.showView.transform              = CGAffineTransformMakeRotation(45 * M_PI / 180.0);
    self.showView.userInteractionEnabled = NO;
    self.showView.backgroundColor        = [UIColor redColor];

    self.staticLabel               = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 130, 30)];
    self.staticLabel.text          = @"YouXianMing";
    self.staticLabel.font          = [UIFont fontWithName:@"HelveticaNeue-Thin" size:18.f];
    self.staticLabel.textAlignment = NSTextAlignmentCenter;
    self.staticLabel.textColor     = [UIColor redColor];

    self.showLabel               = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 130, 30)];
    self.showLabel.text          = @"YouXianMing";
    self.showLabel.alpha         = 0.f;
    self.showLabel.font          = [UIFont fontWithName:@"HelveticaNeue-Thin" size:18.f];
    self.showLabel.textAlignment = NSTextAlignmentCenter;
    self.showLabel.textColor     = [UIColor blackColor];

    // 完整显示按住按钮后的动画效果
    _button                     = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 130, 30)];
    _button.backgroundColor     = [UIColor clearColor];
    _button.layer.borderWidth   = 1.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 / 2.f, _button.frame.size.height / 2.f);
    [_button addSubview:self.showView];

    self.staticLabel.center = CGPointMake(_button.frame.size.width / 2.f, _button.frame.size.height / 2.f);
    [_button addSubview:self.staticLabel];

    self.showLabel.center = CGPointMake(_button.frame.size.width / 2.f, _button.frame.size.height / 2.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(0, 0, 300, 90);
        self.showView.backgroundColor = [UIColor redColor];
        self.showLabel.alpha          = 1.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(0, 0, 300, 0);
        self.showView.backgroundColor = [UIColor clearColor];
        self.showLabel.alpha          = 0.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(0, 0, 300, 0);
        self.showView.backgroundColor = [UIColor clearColor];
        self.showLabel.alpha          = 0.f;
    } completion:^(BOOL finished) {

    }];
}

@end

核心源码:

时间: 2024-12-02 19:04:19

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

Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解_Android

先说明一下,项目代码已上传至github,不想看长篇大论的也可以先去下代码,对照代码,哪里不懂点哪里. 代码在这https://github.com/zgzczzw/ZHFollowButton 前几天发现知乎关注的点击效果确实赞,查了一下实现方式,刚好看到这个问题,花了一天时间终于把这个效果实现了,现在来回答一下,很不幸,楼上各位的答案都不全对,且听我一一道来. 首先,我先详细观察了一些知乎的效果,其中有一个很神奇的地方,如图: 注意看第二张图,这个圆形在扩散的时候,圆形底下的字还在,而且新的

富文本带点击事件的解决方案

富文本带点击事件的解决方案   效果   分析 富文本中要添加点击link事件,需要深入到CoreText里面才能够解决,本人将TTTAttributedLabel进行了封装(封装并不完全,以后会继续完善),简化了操作.   源码 https://github.com/YouXianMing/UI-Component-Collection https://github.com/TTTAttributedLabel/TTTAttributedLabel // // TTTAttributeLabe

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

用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection   [效果]   [特点] * 支持富文本 * 可定制型强(继承父类重写父类的startAnimation方法即可) * 支持动画的中断与持续 * 支持CAMediaTimingFunction * 数据与UI隔离,便于你封装属于你的类   [核心] // // POPNumberCount.h // POP // // Created

jqzoom实现带控制按钮相册特效

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 今天要向大家介绍的这个特效是通过jqzoom插件来实现的,但我们要给它加多一些功能.如果大家在百度搜索jqzoom的例子,估计会看到那个摩托车的实例,但我们今天要更上一层楼. 昨天我刚刚完成了联通商城的放大镜特效,其实,它的功能已经非常完善了,下面的小图可以点击按钮,上面的放大镜效果也非常好,然而,我不得不思考一个问题,当图片只有四张的时候,

如何使用vue开发波纹点击特效组件

最近在使用 vue2 做一个新的 material ui 库,波纹点击效果在 material design 中被多次使用到,于是决定把它封装成一个公共的组件,使用时直接调用就好啦. 开发之前的思考 常见的波纹点击效果的实现方式是监听元素的 mousedown 事件,在元素内部创建一个 波纹元素 ,并调整元素的 transform: scale(0); 到 transform: scale(1);, 通过计算点击的位置来设置 波纹元素 的大小和位置,以达到波纹扩散的效果. 我将组件分为两个部分,

JavaScript编写带旋转+线条干扰的验证码脚本实例_javascript技巧

基础版 从我们平时上网的经验来看,验证码一般是四位,由数字和字母组成. 那么接下来楼主将带领大家一步步用JavaScript做出一个验证码脚本! 先给出成品,方便大家理解: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #securityCode{ background-color: #008000; width

Sublime Text 3 使用MarkDown编写带预览的文本

看到别人使用一个叫Markdown的标记语言来完成编码,心里就有点小激动,毕竟简短的几个符号,就可以写出如此精美的界面,实在是让人感到心旷神怡啊.于是我就在网上搜索了一些相关项的设置,于是便有了下面的文章. 我的Markdown 初体验学习笔记 首先是安装Sublime Text 无论是2还是3,都是支持markdown标记语言的,所以我们不必为选择那个版本而纠结. 下载完成之后一般来说我们都要先配置一下. (那个go to anything 的很简单,在这里就不再叙述了.) 然后是安装需要的包

jquery编写Tab选项卡滚动导航切换特效_jquery

本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=

edius自带特效面板之特效该怎么用?

  edius作为一款基础的视频编辑软件,其特效制作能力相对较差,很多较为高大上的特效是它不能完成的,但是作为一款基础的视频编辑软件,它自带的特效已经可以满足大多数视频制作的需求了.edius软件的特效是复杂多样的, 我首先向大家介绍一下edius的特效面板. 1.可以看到edius特效大致分为5类,系统预设.视音频滤镜.转场/音频淡入淡出.字幕混合.键5类特效. 2.系统预设的特效是最简单的部分,用到的时候较少,使用也十分简单,特效的名称就是特效的结构描述. 3.视音频滤镜是edius自带的一