iOS UIButton設定圖片動畫

標籤：top   關閉按鈕   按鈕   返回   rect   效果   音頻   atomic   touch   

1.問題描述：實現點擊按鈕播放MP3音頻並開啟動畫，再點擊按鈕關閉動畫以及音頻

效果類似以下（圖片來自網路，侵刪），動畫效果其實就是幾張連續的圖片組成：

2.實現思路

2.1 自訂view，設定imageview的動畫以及添加view的點選手勢控制動畫播放、結束；

2.2 直接自訂一個button，設定button的imageview屬性實現，這樣更加簡單；

3.實現代碼（採用第二種方法）

自訂一個UIbutton，如AnimateImgButton，實現方法

.m

//自訂button代碼.m- (id)initWithCoder:(NSCoder *)aDecoder{    if (self = [super initWithCoder:aDecoder]) {        [self commonInit];    }    return self;}- (id)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame]) {        [self commonInit];    }    return self;}- (void)commonInit{    }- (CGRect)imageRectForContentRect:(CGRect)bounds{　　//重寫 imageRectForContentRect 方法返回button的bounds，不然圖片大小無法控制，btn.imageView setContentMode:UIViewContentModeScaleAspectFill]; 試過添加無效    return CGRectMake(0.0, 0.0, self.size.width, self.size.height);}//重複動畫- (void)startImgAnimateWithImgArr:(NSArray *)imgArr time:(CGFloat)time{    [self.imageView setAnimationImages:imgArr];    self.imageView.animationDuration = time;    self.imageView.animationRepeatCount = 0;    self.isPlayAnimate = YES;    if (!self.imageView.isAnimating) {        [self.imageView startAnimating];    }    }- (void)stopImgAnimate{    self.isPlayAnimate = NO;    [self.imageView stopAnimating];    self.imageView.animationImages = nil;}

.h

/** 是否正在動畫 */@property (nonatomic, assign) BOOL isPlayAnimate;//重複動畫- (void)startImgAnimateWithImgArr:(NSArray *)imgArr time:(CGFloat)time;- (void)stopImgAnimate;

調用：

- (void)btnAnimateClick:(AnimateImgButton *)sender{
    if (sender.isPlayAnimate) {
        NSLog(@"關閉按鈕動畫");
        [sender stopImgAnimate];
    }else{
        NSLog(@"開啟按鈕動畫");
        [self.btnAnimate startImgAnimateWithImgArr:self.imgArr time:1];
    }
}


- (AnimateImgButton *)btnAnimate{    if (!_btnAnimate) {        _btnAnimate = [AnimateImgButton new];        _btnAnimate.isPlayAnimate = NO;        [_btnAnimate setImage:kImage(@"IMGVoice3") forState:UIControlStateNormal];        [_btnAnimate addTarget:self action:@selector(btnAnimateClick:) forControlEvents:UIControlEventTouchUpInside];    }    return _btnAnimate;}- (NSArray *)imgArr{    if (!_imgArr) {        _imgArr = [NSArray arrayWithObjects:                                  [UIImage imageNamed:@"IMGVoice1"],                                  [UIImage imageNamed:@"IMGVoice2"],                                  [UIImage imageNamed:@"IMGVoice3"],nil];    }    return _imgArr;}

 

iOS UIButton設定圖片動畫