我正在尝试在 UIView 子类中对 UIBezierPath (在我的示例中是三角形)的绘制进行动画处理。然而,整个子视图是动画的,而不是形状。
我在动画中缺少什么吗?
- (void)drawRect:(CGRect)rect {
CAShapeLayer *drawLayer = [CAShapeLayer layer];
drawLayer.frame = CGRectMake(0, 0, 100, 100);
drawLayer.strokeColor = [UIColor greenColor].CGColor;
drawLayer.lineWidth = 4.0;
[self.layer addSublayer:drawLayer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0,0)];
[path addLineToPoint:CGPointMake(50,100)];
[path addLineToPoint:CGPointMake(100,0)];
[path closePath];
CGPoint center = [self convertPoint:self.center fromView:nil];
[path applyTransform:CGAffineTransformMakeTranslation(center.x, center.y)];
[[UIColor redColor] set];
[path fill];
[[UIColor blueColor] setStroke];
path.lineWidth = 3.0f;
[path stroke];
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.duration = 4.0f;
pathAnimation.path = path.CGPath;
pathAnimation.calculationMode = kCAAnimationLinear;
[drawLayer addAnimation:pathAnimation forKey:@"position"];
}
您正在创建一个CAShapeLayer
,但没有用它做任何有用的事情。让我们解决这个问题。
不要设置图层和动画-drawRect:
,因为这严格意味着使用 CoreGraphics 或 UIKit API 进行绘图的时间。相反,您希望 CAShapeLayer 绘制三角形——这样您就可以为它设置动画。
CAKeyframeAnimation.path 意味着完全不同的东西(例如沿着路径移动图层)。
你的动画正在动画化position
层的值。毫不奇怪,它会移动图层!你想要动画化path
值代替。
CAKeyframeAnimation 背后的想法是为它提供一个数组values
将图层的属性设置为。在关键帧之间的时间里,它将在两个相邻关键帧之间进行插值。所以你需要给它多条路径——每一侧一条。
插值任意路径很困难。当路径具有相同数量和类型的元素时,CA 的路径插值效果最佳。因此,我们确保所有路径都具有相同的结构,只是有些点彼此重叠。
动画的秘密,也许还有一般计算机的秘密:你must准确地解释你想要发生的事情。 “我想对每个点的绘图进行动画处理,因此它看起来是动画的”这还远远不够。
这是我的 UIView 子类think做你所要求的,或者至少接近。要制作动画,请将按钮连接到-animate:
action.
SPAnimatedShapeView.h:
#import <UIKit/UIKit.h>
@interface SPAnimatedShapeView : UIView
- (IBAction)animate:(id)sender;
@end
SPAnimatedShapeView.m:
#import "SPAnimatedShapeView.h"
#import <QuartzCore/QuartzCore.h>
@interface SPAnimatedShapeView ()
@property (nonatomic, retain) CAShapeLayer* shapeLayer;
@end
@implementation SPAnimatedShapeView
@synthesize shapeLayer = _shapeLayer;
- (void)dealloc
{
[_shapeLayer release];
[super dealloc];
}
- (void)layoutSubviews
{
if (!self.shapeLayer)
{
self.shapeLayer = [[[CAShapeLayer alloc] init] autorelease];
self.shapeLayer.bounds = CGRectMake(0, 0, 100, 100); // layer is 100x100 in size
self.shapeLayer.position = self.center; // and is centered in the view
self.shapeLayer.strokeColor = [UIColor blueColor].CGColor;
self.shapeLayer.fillColor = [UIColor redColor].CGColor;
self.shapeLayer.lineWidth = 3.f;
[self.layer addSublayer:self.shapeLayer];
}
}
- (IBAction)animate:(id)sender
{
UIBezierPath* path0 = [UIBezierPath bezierPath];
[path0 moveToPoint:CGPointZero];
[path0 addLineToPoint:CGPointZero];
[path0 addLineToPoint:CGPointZero];
[path0 addLineToPoint:CGPointZero];
UIBezierPath* path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointZero];
[path1 addLineToPoint:CGPointMake(50,100)];
[path1 addLineToPoint:CGPointMake(50,100)];
[path1 addLineToPoint:CGPointMake(50,100)];
UIBezierPath* path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointZero];
[path2 addLineToPoint:CGPointMake(50,100)];
[path2 addLineToPoint:CGPointMake(100,0)];
[path2 addLineToPoint:CGPointMake(100,0)];
UIBezierPath* path3 = [UIBezierPath bezierPath];
[path3 moveToPoint:CGPointZero];
[path3 addLineToPoint:CGPointMake(50,100)];
[path3 addLineToPoint:CGPointMake(100,0)];
[path3 addLineToPoint:CGPointZero];
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"path"];
animation.duration = 4.0f;
animation.values = [NSArray arrayWithObjects:(id)path0.CGPath, (id)path1.CGPath, (id)path2.CGPath, (id)path3.CGPath, nil];
[self.shapeLayer addAnimation:animation forKey:nil];
}
@end
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)