编写带有点击特效的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

核心源码:

目录
相关文章
|
JavaScript 开发者
|
6月前
|
前端开发 C# 图形学
unity按钮绑定与场景切换
unity按钮绑定与场景切换
60 0
|
API iOS开发 Perl
iOS UIButton图文混排快捷显示
iOS UIButton图文混排快捷显示
iOS UIButton图文混排快捷显示
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
初学者自定义按钮UIButton
之前写了一篇自定义按钮的文章,不过还有两种比较适合初学者的自定义按钮的方法 第一种:用系统的按钮,然后在按钮上添加一张图片UIImageView,然后再按钮上添加一段文字UILabel 这种比较奇葩一点,不过也是初学者最容易想到的方法。不推荐使用。
119 0
初学者自定义按钮UIButton
|
API iOS开发 Perl
ios UIButton点击快捷回调
ios UIButton点击快捷回调
UGUI系列-鼠标移动到按钮上显示信息(Unity3D)
有时候图标不能很好的说明这个功能的解释,就需要一些说明性文字显示。就比如可以在鼠标移动到UI上面的时候显示文字。 那么如何在UGUI上,鼠标移动上去显示文字说明呢。 大家都知道,当鼠标移动到button按钮上面的时候会出现变化,主要是button这个组件在控制
|
前端开发 图形学 Python
【Unity使用UGUI实现王者荣耀UI界面(二)】加载页面-静音按钮和页面完善
【Unity使用UGUI实现王者荣耀UI界面(二)】加载页面-静音按钮和页面完善
391 0
【Unity使用UGUI实现王者荣耀UI界面(二)】加载页面-静音按钮和页面完善
|
开发工具 C语言
Qt编写自定义控件9-导航按钮控件
一、前言 导航按钮控件,主要用于各种漂亮精美的导航条,我们经常在web中看到导航条都非常精美,都是html+css+js实现的,还自带动画过度效果,Qt提供的qss其实也是无敌的,支持基本上所有的CSS2属性,配合QPainter这个无敌大法工具,没有什么不能绘制的。
1275 0
|
UED
uwp - 做一个相对炫酷的动画按钮/按钮动画
原文:uwp - 做一个相对炫酷的动画按钮/按钮动画   看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验。效果图: 动画分为几个部分,分别是:内圆从中心放大(1)并同时渐隐(2),外圆从中心放大(3)并同时渐隐(4),按钮整体从中心缩小放大(5),非常简单对吧,代码也是。
1102 0