如何动画 UIBezierPath [英] How to Animate a UIBezierPath

问题描述

我想将矩形的 UIBezierPath 动画化为三角形，而不是为路径上的视图设置动画，而是为路径本身设置动画，使其从一种形状变形为另一种形状.路径被添加到 CALayer

i would like to animate a UIBezierPath of a rect to a triangle one, not to animate a view on a path but animate the path itself so it morphs from one shape to another. the path is added to a CALayer

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.fillColor = [[UIColor whiteColor] CGColor];    
maskLayer.path = [self getRectPath];

-(CGPathRef)getTrianglePath
{
    UIBezierPath* triangle = [UIBezierPath bezierPath];
    [triangle moveToPoint:CGPointZero];
    [triangle addLineToPoint:CGPointMake(width(self.view),0)];
    [triangle addLineToPoint:CGPointMake(0, height(self.view))];
    [triangle closePath];
    return [triangle CGPath];
}

-(CGPathRef)getRectPath
{
    UIBezierPath*rect = [UIBezierPath bezierPathWithRect:self.view.frame];
    return [rect CGPath];
}

推荐答案

我不是 CoreAnimation 的专家，但你可以定义一个 CABasicAnimation 如下

I am not an expert on CoreAnimation but you can define a CABasicAnimation as follows

CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"];
morph.duration = 5;
morph.toValue = (id) [self getTrianglePath];
[maskLayer addAnimation:morph forKey:nil];

第一行表明您要定义一个动画来更改图层的 path 属性.第二行表示动画需要五秒钟，第三行给出动画的最终状态.最后，我们将动画添加到图层.key 是动画的唯一标识符，也就是说，如果添加两个具有相同 key 的动画，则只考虑最后一个.此键还可用于覆盖所谓的隐式动画.CALayer 有几个属性是默认动画的.更准确地说，如果您更改这些属性之一，则更改将以 0.25 的持续时间进行动画处理.

The first line states that you want to define an animation that changes the path property of the layer. The second line states that the animation takes five seconds and the third line gives the final state of the animation. Finally, we add the animation to the layer. The key is a unique identifier for the animation, that is, if you add two animations with the same key only the last one is considered. This key can also be used to override so called implicit animations. There are a couple of properties of a CALayer that are animated by default. More precisely, if you change one of these properties the change will be animated with a duration of 0.25.

这篇关于如何动画 UIBezierPath的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！