如何逐渐降低 UIButton 的不透明度?

Posted

技术标签:

【中文标题】如何逐渐降低 UIButton 的不透明度?【英文标题】:How to reduce the opacity of an UIButton gradually? 【发布时间】:2015-06-24 11:06:44 【问题描述】:

在我的项目中,我有一个 UIButton,它可以在单击时缩放。到目前为止一切都很好,但我需要按钮的不透明度从 1 逐渐减小到 0。我的意思是它应该以 1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0.0 的顺序减小。我当前的代码是

    -(void)roundButtonAnimation

    self.buttonZoom = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    self.buttonZoom.duration = 0.8f;
    self.buttonZoom.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(2,2,2)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(3,3,3)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(5,5,5)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(6,6,6)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(7,7,7)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(9,9,9)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(10,10,10)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(11,11,11)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(12,12,12)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(13,13,13)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(14,14,14)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(15,15,15)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(16,16,16)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(17,17,17)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(18,18,18)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(50,50,50)]];
    self.buttonZoom.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    self.roundButton.transform = CGAffineTransformMakeScale(0,0);
    self.roundButton.alpha = 0.3;
    [self.roundButton.layer addAnimation:self.buttonZoom forKey:@"buttonScale"];

[self.CLSpinnerView1 stopAnimating];
    //[self performSelector:@selector(secondView) withObject:self afterDelay:0.3];

    [self performSelector:@selector(postNotification) withObject:self afterDelay:0.6];

【问题讨论】:

这个代码是什么产生的?怎么了? 你有什么特别的原因为什么不使用曲线线性的简单变换和阿尔法动画? @Andrea 简单变换和 alpha 动画曲线线性...是否可以使用此代码进行缩放?? @Ilario 此代码缩放按钮 尝试两个 CAAnimations,一个用于缩放,另一个用于 alpha(不透明度),然后将它们添加到 CAAnimationGroup 并将该组分配给您的按钮/方法。 【参考方案1】:
[UIView animateWithDuration:1.0
                          delay:0.0
                        options: UIViewAnimationCurveLinear
                     animations:^
                         self.roundButton.transform = CGAffineTransformMakeScale(50.0f, 50.0f);
                         self.roundButton.alpha = 0.0;
                      
                     completion:^(BOOL finished)
                         NSLog(@"Done!");
                     ];

让我们稍微解释一下,在这个动画块中你说动画应该在一秒钟内发生,在这一秒内基于线性曲线(因此总是相等的增量/减量)按钮应该缩放 50 倍并且 alpha 应该是动画到 0。 我不明白你为什么在那个简单的动画块上使用更复杂的CAKeyframeAnimation。 当您希望对时间有更多的权力并为一组值设置动画时,关键帧动画非常有用。

【讨论】:

【参考方案2】:

UIView animateWithDuration:animations: 应该在这里为您服务。

[UIView animateWithDuration:1.0 animations:^
    button.alpha = 0.0;
];

将在一秒钟内逐渐将按钮的 alpha 更改为 0 (...WithDuration:1.0...)。

请参阅The UIView Class Reference 了解更多信息。

希望这会有所帮助。

【讨论】:

【参考方案3】:

试试这个

[button.layer removeAnimationForKey:@"opacity"];

【讨论】:

以上是关于如何逐渐降低 UIButton 的不透明度?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 iOS 7 下对 UIButton 产生涟漪效果? [复制]

如何降低左右图像的不透明度?

如何降低 svg 滤镜中 Alpha 层的不透明度?

如何在鼠标移动时在图片上方显示链接,同时降低图片的不透明度?

如何使 div 中的文本在 HTML 中降低不透明度 [关闭]

jQuery 效果方法