如何为自定义视图选择设置膨胀和颜色变化的动画？

Posted 2023-03-13

【中文标题】如何为自定义视图选择设置膨胀和颜色变化的动画？

【英文标题】：How to animate a swell and color change for a custom view selection?

【发布时间】：2014-12-12 22:51:18

【问题描述】：

我有自定义 UIView 对象的层次结构。叶视图是可选的。他们有一个isSelected 属性。当设置为YES 时，我想要的效果是视图立即更改为我的“选定”颜色，然后暂时膨胀大小，然后恢复到原来的大小。我认为下面的代码可以解决问题：

self.backgroundColor = [UIColor colorWithRed: 0 green: 0.5 blue: 1 alpha: 1];
CGRect currentFrame = self.frame;
CGRect bigFrame = CGRectInset(currentFrame, -50, -50);
[UIView animateWithDuration: 0.4 animations:^
    self.frame = bigFrame;
 completion:^(BOOL finished) 
    if (finished ) 
        [UIView animateWithDuration: 0.4 animations:^
            self.frame = currentFrame;
        ];
    
];

我在这里夸大了时间和位移，因为我想看看到底发生了什么。发生了什么，颜色变化似乎是动画的，所以它慢慢地从默认的白度 0.93 变为我的蓝色。此外，它的大小不会增长。它似乎只是向下和向右平移了插入量，然后返回到正常位置（而不是向各个方向生长）。

我错过了什么？

【参考方案1】：

使用关键帧动画：

CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
// 200 is example side of the big view, but you can apply any formula to it. For example relative to superview, or screen bounds
CGFloat multiplier = 200 / MAX(self.frame.size.height, self.frame.size.width)
bounceAnimation.values =
@[@(1 - 0.1 * multiplier, 
  @(1 + 0.3 * multiplier), 
  @(1 + 0.1 * multiplier,
  @1.0];
bounceAnimation.duration = 0.25;
bounceAnimation.removedOnCompletion = YES;
bounceAnimation.fillMode = kCAFillModeForwards;
[self.layer addAnimation:bounceAnimation forKey:@"bounceAnimation"];

【讨论】：

我以前从未使用过它们的关键帧变体。谢谢！这主要是有效的。至少它的行为并没有出乎意料。我现在有两个问题。 1）使用变换使临时大小相对于原始大小增加。这让小家伙只是流行一点，而大家伙真的很大。我宁愿有一个统一的像素“开始”帧。有替代方法吗？我可以反向计算比例以实现我猜想要的像素偏移。 2)我找不到CATransform3D 的文档。我找到了更改它们的功能。但不知道去哪里找到 .scale

要做帧，我切换到bounds keyPath（显然，你不应该为层的帧设置动画，而是应该为边界和位置等设置动画）。然后在CGRects 周围构建了一个NSValue 数组。

您可以通过之前根据您的帧计算反弹值轻松实现它，查看更新答案

【参考方案2】：

简单的CGAffineTransformMakeScale 怎么样？就这样……

[UIView animateWithDuration: 0.4 animations:^
    // Update 1.3 to what ever works for you
    self.transform = CGAffineTransformMakeScale(1.3, 1.3);
 completion:^(BOOL finished) 
    if (finished ) 
        [UIView animateWithDuration: 0.4 animations:^
            self.transform = CGAffineTransformMakeScale(1.0, 1.0);
        ];
    
];

https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CGAffineTransform/#//apple_ref/c/func/CGAffineTransformMakeScale

【讨论】：

嗯...产生不同的结果。如果我放慢动画（1s）并使用2的比例，它会突然变成一半大小并慢慢放大到正常，然后在1s之后，它突然变成2x大然后慢慢地（对于其他1s）恢复到原来的大小。

此视图的父视图将此视图放置在其layoutSubviews 中。这是否与动画有关？