水平只動畫CAGradientLayer

Question

我想動畫一個CAGradientLayer（漸變和框架），當我動畫框爲0，它收縮到視圖的左上角，我希望它只是水平地動畫。現在它的動畫水平和垂直都是0。

這裏是動畫目前的樣子：

我要的是當它下降到沒什麼，只是收縮水平ONLY，並保持相同高度的整個時間。

這裏是我目前使用的代碼：

- (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

Answer 1

之間的問題是這一行：

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}; 

同樣，我測試了它和它在這個時候寫的我面前跑。順便看一下很有趣。

希望這個，再次，幫助。