码迷,mamicode.com
首页 > 微信 > 详细

实现类似微信语音播放动画的效果

时间:2015-10-20 19:07:42      阅读:813      评论:0      收藏:0      [点我收藏+]

标签:

要求就是点击播放按钮,小喇叭开始动,当语音结束后,停止动画。如图:

技术分享

这需要用到UIImageView的帧动画,该动画可以让一系列图片在特定的时间内按顺序显示出来。需要的素材如下:

audio_icon_1

技术分享

*****分割线*****

audio_icon_2
技术分享

*******分割线*******
audio_icon_3

技术分享

代码如下:

// 添加播放时候的动画图片
[_audioBtn addSubview:self.animationview];
[_audioBtn setImage:[UIImage imageNamed:@"audio_icon_3"] forState:UIControlStateNormal];
_audioBtn.userInteractionEnabled = YES;
//动画的imageview
- (UIImageView *)animationview{
    if (!_animationview) {
        _animationview = [[UIImageView alloc] initWithFrame:CGRectMake(11.25, 5, 15, 15)];
        NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"audio_icon_3"],[UIImage imageNamed:@"audio_icon_1"],[UIImage imageNamed:@"audio_icon_2"],[UIImage imageNamed:@"audio_icon_3"],nil];
        
        _animationview.animationImages = myImages;
        _animationview.animationDuration = 1; 
        _animationview.animationRepeatCount = 0; //动画重复次数,0表示无限循环 
    }
    return _animationview;
}

点击按钮的事件

//点击播放按钮时,动画开始
[self.animationview startAnimating];
[self.audioBtn setImage:nil forState:UIControlStateNormal];
//在语音结束后,停止动画
[self.animationview stopAnimating];
[self.audioBtn setImage:[UIImage imageNamed:@"audio_icon_3"] forState:UIControlStateNormal];

 

实现类似微信语音播放动画的效果

标签:

原文地址:http://www.cnblogs.com/Apologize/p/4895489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!