我正在尝试对 CAGradientLayer(渐变和框架)进行动画处理,当我将框架动画化到 0 时,它会缩小到 View 的左上角,我希望它能够动画化水平地。现在它的水平和垂直动画都为 0。
这是动画当前的样子:
我想要的是当它降到零时,仅水平收缩,并始终保持相同的高度。
这是我当前使用的代码:
- (void)drawRect:(CGRect)rect
{
// Drawing code
if (!gradientLayer) {
gradientLayer = [CAGradientLayer layer];
[gradientLayer setFrame:[self createRectForFrame:rect]];
[gradientLayer setColors:@[(id)fromColor.CGColor, (id)toColor.CGColor]];
[gradientLayer setStartPoint:CGPointMake(fillPct/100, 0.5)];
[gradientLayer setEndPoint:CGPointMake(1.0, 0.5)];
[self.layer addSublayer:gradientLayer];
}
else {
[gradientLayer removeAllAnimations];
[CATransaction begin];
[CATransaction setAnimationDuration:ANIMATION_DURATION];
CGRect newFrame = [self createRectForFrame:rect];
CABasicAnimation *frameAnimation = [CABasicAnimation animationWithKeyPath:@"frame"];
[frameAnimation setDuration:ANIMATION_DURATION];
[frameAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[frameAnimation setFromValue:[NSValue valueWithCGRect:gradientLayer.bounds]];
[frameAnimation setToValue:[NSValue valueWithCGRect:newFrame]];
[frameAnimation setFillMode:kCAFillModeForwards];
[frameAnimation setRemovedOnCompletion:NO];
[gradientLayer setFrame:newFrame];
[gradientLayer addAnimation:frameAnimation forKey:@"frame"];
CGPoint startPoint = CGPointMake(MIN(fillPct/100, 0.99), 0.5);
CABasicAnimation *startPointAnimation = [CABasicAnimation animationWithKeyPath:@"startPoint"];
[startPointAnimation setDuration:ANIMATION_DURATION];
[startPointAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[startPointAnimation setFromValue:[NSValue valueWithCGPoint:gradientLayer.startPoint]];
[startPointAnimation setToValue:[NSValue valueWithCGPoint:startPoint]];
[startPointAnimation setFillMode:kCAFillModeForwards];
[startPointAnimation setRemovedOnCompletion:NO];
[gradientLayer setStartPoint:startPoint];
[gradientLayer addAnimation:startPointAnimation forKey:@"startPoint"];
[CATransaction setCompletionBlock:^{
[self updateInnerLabelTextColor];
}];
[CATransaction commit];
}
[self bringInnerLabelToFront];
}
- (CGRect)createRectForFrame:(CGRect)frame {
if (fillPct == 0)
return CGRectZero;
else if (fillPct >= 100)
return frame;
else
return CGRectMake(frame.origin.x, frame.origin.y, frame.size.width * (fillPct / 100), frame.size.height);
}
fillPct 是应填充条形的值,介于 0 到 100 之间。
最佳答案
问题出在这一行:
CGPoint startPoint = CGPointMake(MIN(fillPct/100, 0.99), 0.5);
如果将其更改为:
CGPoint startPoint = CGPointMake(0.0, 0.5);
它会按照您想要的方式工作 - 不会在角落收缩。
或者,如果您希望保留当前的代码,更改此值也可以:
CGPoint startPoint = CGPointMake(MIN(fillPct/100, 0.0), 0.5);
刚刚测试过;它水平动画。希望这会有所帮助。
更新 1:
我确实没有遇到你评论中提到的问题;但是,我决定再看一遍。由于您没有为 rect
提供任何任意值以及您一遍又一遍地调用此值的方式,因此我想出了自己的值并再次进行了测试。
我使用以下值设置gradientLayer
:
[gradientLayer setFrame:(CGRect){{150.0f, 240.0f}, 150.0f, 20.0f}];
在第一个CABasicAnimation
中,出于测试目的,我更改了此:
[frameAnimation setToValue:[NSValue valueWithCGRect:(CGRect){{150.0f, 240.0f}, 0.0f, 20.0f}]];
如您所见,它与图层的矩形完全相同,只是宽度为 0.0f。想象一下,这会导致宽度为 0。
上面的方法有效吗?是的。
以上内容是否按照您想要的方式工作?没有。
原因是这会导致框架均匀收缩 - 这不是您想要的。
因此,在创建 gradientLayer
时添加此内容:
gradientLayer.anchorPoint = (CGPoint){0.0f, 0.5f};
我再次测试了它,在撰写本文时它正在我面前运行。顺便看看也很有趣。
希望这再次能有所帮助。
关于ios - 仅水平设置 CAGradientLayer 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23281961/