显示脉冲效果的PulsingView

效果如下:

源码:

PulsingView.h 与 PulsingView.m

//
//  PulsingView.h
//  PulsingView
//
//  Created by YouXianMing on 14/10/29.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface PulsingView : UIView

/**
 *  startScale与endScale需要设置值
 */
@property (nonatomic, assign) CGFloat  startScale;
@property (nonatomic, assign) CGFloat  endScale;

/**
 *  动画时间
 */
@property (nonatomic, assign) NSTimeInterval duration;

/**
 *  最高程度的alpha
 */
@property (nonatomic, assign) CGFloat  maxAlpha;

/**
 *  用来做动画的view
 */
@property (nonatomic, strong) UIView  *inputView;

/**
 *  做动画
 */
- (void)startAnimation;

@end
//
//  PulsingView.m
//  PulsingView
//
//  Created by YouXianMing on 14/10/29.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "PulsingView.h"

@interface PulsingView ()

@end

@implementation PulsingView

- (void)startAnimation {
    CGFloat tmpStartScale = (_startScale < 0 ? 0.5 : _startScale);
    CGFloat tmpEndScale   = (_endScale < 0 ? 2 : _endScale);

    _inputView.transform  = CGAffineTransformMake(tmpStartScale, 0, 0, tmpStartScale, 0, 0);
    _inputView.alpha      = ((_maxAlpha <= 0 || _maxAlpha > 1) ? 1: _maxAlpha);

    [UIView animateWithDuration:(_duration <= 0 ? 1.f : _duration)
                          delay:0.f options:UIViewAnimationOptionCurveEaseOut animations:^{
                              _inputView.transform = CGAffineTransformMake(tmpEndScale, 0, 0, tmpEndScale, 0, 0);
                              _inputView.alpha     = 0.f;
                          } completion:nil];
}

@synthesize inputView = _inputView;
- (void)setInputView:(UIView *)inputView {
    _inputView       = inputView;
    inputView.frame  = inputView.bounds; // 重设inputView的frame值
    self.bounds      = inputView.bounds; // 重设view的bounds

    // 先删除掉所有的子view
    [[self subviews] enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        UIView *tmp = (UIView *)obj;
        [tmp removeFromSuperview];
    }];

    [self addSubview:inputView];
}
- (UIView *)inputView {
    return _inputView;
}

@end

使用:

//
//  ViewController.m
//  PulsingView
//
//  Created by YouXianMing on 14/10/29.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "PulsingView.h"
#import "YXGCD.h"

@interface ViewController ()

@property (nonatomic, strong) NSTimer     *timer;
@property (nonatomic, strong) PulsingView *pulsingView;
@property (nonatomic, strong) UIView      *circleView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 设置背景
    self.view.backgroundColor      = [UIColor blackColor];

    // 用来显示的view
    _circleView                    = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    _circleView.backgroundColor    = [self randomColor];
    _circleView.layer.cornerRadius = 50.f;

    // 脉冲view
    _pulsingView            = [PulsingView new];
    _pulsingView.inputView  = _circleView;
    _pulsingView.startScale = 0.1f;
    _pulsingView.duration   = 1.f;
    _pulsingView.center     = self.view.center;
    [self.view addSubview:_pulsingView];

    // 定时器
    _timer = [NSTimer scheduledTimerWithTimeInterval:1.2f
                                              target:self
                                            selector:@selector(animationTimerEvent)
                                            userInfo:nil
                                             repeats:YES];
}

- (void)animationTimerEvent {
    _circleView.backgroundColor = [self randomColor];
    _pulsingView.endScale       = arc4random()%200/100.f + 1.f;
    [_pulsingView startAnimation];
}

- (UIColor *)randomColor {
    return [UIColor colorWithRed:arc4random()%255/255.f
                           green:arc4random()%255/255.f
                            blue:arc4random()%255/255.f
                           alpha:1.f];
}

@end

类的详细细节:

时间: 2024-10-07 01:11:00

显示脉冲效果的PulsingView的相关文章

javascript超过容器后显示省略号效果(兼容一行或者多行)

javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了.css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写: {width:27em; white-space:nowrap; text-overflow:ellipsis; -o

VC++实现位图显示透明效果--实现原理

我们在进行程序的界面设计时,常常希望将位图的关键部分,也既是图像的前景显示在界面上,而将位图的背景隐藏起来,将位图与界面很自然的融合在一起,本文介绍了透明位图的制作知识,并将透明位图在一个对话框中显示了出来.本文所使用的原始位图及程序编译运行后的界面效果如下图所示: 图一.原始位图 图二.对话框界面上透明显示位图 一.实现方法 绘制"透明"位图是指绘制某一位图中除指定颜色外的其余部分,我们称这种颜色为"透明色".通过将位图的背景色指定为"透明色"

在不同浏览器中空格显示的效果不一致的问题(主要是宽度不一致)

<div>  abc</div> 在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同. 到网上查了一下资料,大概意思是这样的: 不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,而firefox和chrome的默认字体是Times New Roman,宋体是字符等宽的字体,但Times New  Roman不是字符等宽的字体,因为浏览器默认字体的不同,空格符 在不同的浏览器下面的显示宽度也不同. 解决办法:在空格那一行设置一下字体,把

Android 仿QQ浏览器WebView,滑动隐藏显示ActionBar效果

Android 仿QQ浏览器,滑动隐藏显示ActionBar效果. 往上推,是一个ScrollView会将,actionbar以及内容往上推,当actionbar消失后,将滚动Webview的内容. 此效果是基于QuickReturnHeader源码,修改而来的,代码也不多,实现方法比较简单. 直接上demo:http://download.csdn.net/detail/xufeifandj/8388493 直接看效果图:

jquery实现的随机显示图片效果代码

jquery实现的随机显示图片效果代码:下面介绍一下,点击按钮就可以实现图片的随机切换效果,代码实现非常的简单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <tit

js图片未加载完显示loading效果

<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:left;width:200px;height:200px;margin:0 10px 10px 0} </style> <script> //判断浏览器 var Browser=new Object(); Browser.userAgent=window.navigator.userAge

一个简单的全屏图片上下打开显示网页效果

打包下载地址:http://download.csdn.net/detail/sweetsuzyhyf/7602105 上源码看效果: <!DOCTYPE html> <html> <head> <title></title> <style> body { margin: 0; padding: 0; } .wrap { overflow: hidden; position: fixed; z-index: 99999; width:

android listview 不显示选中效果分析

android listview有时会发现没有选中效果,解决办法 1:listview布局中设置颜色,如 android:background="@android:color/white" 2:在listview的item布局文件中背景设置为 android:background="@android:color/transparent" 原因:颜色设置在整体的listview上面,每一行布局设置透明色即可 android listview 不显示选中效果分析

CSS实现DIV感应鼠标Hover时的显示隐藏效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现DIV感应鼠标Hover时的显示隐藏效果</title> <style> .wrap{} .wrap .box{border:2px solid red;width:200px;height:200px;float:left;margi