编写带有点击特效的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-10-11 21:45:58

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

[译]SSRS 编写带参数的MDX报表

编写MDX报表长久以来对于报表人员来说都比较痛苦. 当然如果你用查询设计器(Query Designer) 直接拖拉数据集那就很方便,但是你们有没有想过查询设计器是怎么创建MDX的.或者创建的参数是如何工作的? 我听到很多用Analysis Services 作为数据源的(包括我)报表人员说写参数太难了,所以他们用查询设计器做报表. 我想关键的问题是查询设计器做的MDX看起来要比实际上更复杂.如果你知道一些MDX基础,你应该能直接写MDX而不是用查询分析器 ,你就是喜欢用查询分析器也没关系.本文

vb如何编写带执行参数的exe程序

关于vb如何编写带执行参数的exe程序 ,可以通过vb自带的 "command()"  命令来完成. 下面是CSDN说明: Command 函数 返回命令行的参数部分,该命令行用于装入 Microsoft Visual Basic 或 Visual Basic 开发的可执行程序. 语法 Command 说明 当从命令行装入 Visual Basic 时,/cmd 之后的命令行的任何部分作为命令行的参数传递给程序.下面的示例中,cmdlineargs 代表 Command 函数返回的参数

unity3d实现一个人物跟随鼠标点击地面那点就移动那点,实现点击特效加人物动画方向的切换。

//人物方向和判断点击事件加点击特效 using UnityEngine;using System.Collections; public class playerDir : MonoBehaviour { public GameObject effect_click_prefab;   private bool isMoving=false;//鼠标是否被按下   public Vector3 targetPosition=Vector3.zero;//目标位置 private PlayerM

Waves:类Material Design 的圆形波浪(涟漪)点击特效插件

Google Material Design 相信你也了解不少了,但目前无论是应用端还是网页端,可参考案例尚少.本着补充<Material Design 一些相关中文资料/资源收集汇总>一文的目的,介绍一款类Google Material Design 的圆形波浪(涟漪)点击特效插件Waves. Google Material Design 中有一个特效,点击某个色块区域会有圆形波浪(涟漪)渐现放大的效果(当然,对应应用端则为触摸事件).Waves 就是这么一款在网页上实现该特效的javasc

博客美化--页面点击特效

下面的添加都在博客侧边栏公告添加(要有JS权限) 表情特效 <script type="text/javascript"> onload = function() { var click_cnt = 0; var $html = document.getElementsByTagName("html")[0]; var $body = document.getElementsByTagName("body")[0]; $html.on

js鼠标点击特效,有关参数设置

效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击特效 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquer

博客园添加鼠标点击特效:字符表情包

在博客园的设置中可以看到「页首Html代码」这一项. 首先要申请 JS 权限,理由就是想要美化博客.设置鼠标点击特效等,自己补充. 「页首Html代码」处代码如下: <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array(&qu

鼠标点击特效:点击网站页面显示24字核心价值观上升的特效代码

将以下代码直接写入html中即可(也可以去掉首尾,添加进js文件中,然后在html中包含这个文件) <script type="text/javascript"> /* 鼠标点击特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", &q

Android5.0以上的项目都会有的按钮点击特效--水波纹

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/colorPrimary"/> <corners android:radius="10dp" /&