UIButton的压缩与拉伸动画

这篇博客详细介绍了如何使用代码实现UIButton的压缩和拉伸动画,同时确保在动画过程中圆角保持不变形。从初始的半圆角按钮到压缩成圆形,再到拉伸回原状,整个过程平稳流畅。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文主要完成UIButton的一个拉伸与压缩动画

压缩动画:将半圆角的的按钮压缩成圆形按钮(背景波纹动画单独完成)

拉伸动画;将圆形按钮拉伸成半圆角Button

注:压缩和拉伸过程装,要保证圆角不变形

初始状态:

初始状态/结束状态

 

压缩状态:

压缩后状态

 

代码如下:

 

//带圆角的UIButton压缩成圆形
//圆形UIButton拉伸成带圆角的:圆角不拉伸


- (void) startPkMatchingAction:(UIButton*)sender
{
    if (sender.tag == RHCStarlightPKFree)
    {
        //Button压缩成圆形
        [UIView animateWithDuration:0.5 animations:^{
            self.matchingButton.width = self.matchingButton.height;
            self.matchingButton.centerX = self.width/2;
            [self.matchingButton setText:nil];
        } completion:^(BOOL finished) {

            [self.matchingButton setBackgroundImage:[UIImage imageForKey:@"matchingPKButton_background_matching"] forState:UIControlStateNormal];
            self.explainLabel.text = @"再次点击暂停匹配...";
            self.matchingButton.tag = RHCStarlightPKWait;
        }];
    }else if (sender.tag == RHCStarlightPKWait)
    {
        //圆形Button拉伸成圆角矩形
        self.matchingButton.width = 41;//先将圆形的宽度扩大一点点
        self.matchingButton.centerX = self.width/2;
        [self.matchingButton setBackgroundImage:[UIImage imageForKey:@"matchingPKButton_background"] forState:UIControlStateNormal];
        [UIView animateWithDuration:0.5 animations:^{
           //关键代码:保证圆角不被拉伸
            [self.matchingButton.imageView.image  resizableImageWithCapInsets:UIEdgeInsetsMake(0, 20, 0, 20) resizingMode:UIImageResizingModeStretch];
            self.matchingButton.width = 150;
            self.matchingButton.centerX = self.width/2;
        } completion:^(BOOL finished) {
           
            [self.matchingButton setTitle:@"开始匹配" forState:UIControlStateNormal];
            self.explainLabel.text = @"*由系统随机匹配好友";
            self.matchingButton.tag = RHCStarlightPKFree;
        }];
    }
   
}

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值