[英]CALayer does not animate the same as the UIView animation
我有一个有16个子图层的类来形成徽标。 当我为UIView
制作动画时, CALayers
不是动画的,而是像下面的动画gif一样进入最终状态:
我的代码是:
@implementation LogoView
#define CGRECTMAKE(a, b, w, h) {.origin={.x=(a),.y=(b)},.size={.width=(w),.height=(h)}}
#pragma mark - Create Subviews
const static CGRect path[] = {
CGRECTMAKE(62.734375,-21.675000,18.900000,18.900000),
CGRECTMAKE(29.784375,-31.725000,27.400000,27.300000),
CGRECTMAKE(2.534375,-81.775000,18.900000,18.900000),
CGRECTMAKE(4.384375,-57.225000,27.400000,27.300000),
CGRECTMAKE(2.784375,62.875000,18.900000,18.900000),
CGRECTMAKE(4.334375,29.925000,27.400000,27.300000),
CGRECTMAKE(62.734375,2.525000,18.900000,18.900000),
CGRECTMAKE(29.784375,4.475000,27.400000,27.300000),
CGRECTMAKE(-21.665625,-81.775000,18.900000,18.900000),
CGRECTMAKE(-31.765625,-57.225000,27.400000,27.300000),
CGRECTMAKE(-81.615625,-21.425000,18.900000,18.900000),
CGRECTMAKE(-57.215625,-31.775000,27.400000,27.300000),
CGRECTMAKE(-81.615625,2.775000,18.900000,18.900000),
CGRECTMAKE(-57.215625,4.425000,27.400000,27.300000),
CGRECTMAKE(-21.415625,62.875000,18.900000,18.900000),
CGRECTMAKE(-31.765625,29.925000,27.400000,27.300000)
};
- (void) createSubviews
{
self.contentMode = UIViewContentModeRedraw;
for (int i = 0; i < 16; i++) {
CGRect rect = CGRectApplyAffineTransform(path[i],
CGAffineTransformMakeScale(self.frame.size.width / 213.0,
self.frame.size.height / 213.0));
UIBezierPath * b = [UIBezierPath bezierPathWithOvalInRect:
CGRectOffset(rect,
self.frame.size.width/2.0,
self.frame.size.height/2)];
CAShapeLayer * layer = [[CAShapeLayer alloc] init];
layer.path = [b CGPath];
layer.fillColor = [self.tintColor CGColor];
[self.layer addSublayer:layer];
}
self.layer.needsDisplayOnBoundsChange = YES;
self.initialLenght = self.frame.size.width;
}
- (void) layoutSublayersOfLayer:(CALayer *)layer
{
for (int i = 0; i < 16; i++) {
CGRect rect = CGRectApplyAffineTransform(path[i],
CGAffineTransformMakeScale(layer.frame.size.width / 213.0,
layer.frame.size.height / 213.0));
UIBezierPath * b = [UIBezierPath
bezierPathWithOvalInRect:CGRectOffset(rect,
layer.frame.size.width/2.0,
layer.frame.size.height/2)];
((CAShapeLayer*)(layer.sublayers[i])).path = b.CGPath;
}
}
- (void)layoutSubviews {
[super layoutSubviews];
// get current animation for bounds
CAAnimation *anim = [self.layer animationForKey:@"bounds"];
[CATransaction begin];
if(anim) {
// animating, apply same duration and timing function.
[CATransaction setAnimationDuration:anim.duration];
[CATransaction setAnimationTimingFunction:anim.timingFunction];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
[self.layer addAnimation:pathAnimation forKey:@"path"];
}
else {
// not animating, we should disable implicit animations.
[CATransaction disableActions];
}
self.layer.frame = self.frame;
[CATransaction commit];
}
我正在制作动画:
[UIView animateWithDuration:3.0 animations:^{
[v setFrame:CGRectMake(0.0, 0.0, 300.0, 300.0)];
}];
如何将图层动画与视图动画同步?
与UIView动画同步动画图层属性可能很棘手。 相反,让我们使用不同的视图结构来利用内置的支持来动画视图的transform
,而不是试图为图层的path
设置动画。
我们将使用两个视图:superview和subview。 LogoView
是一个LogoView
,是我们在故事板中展示的(或者你创建你的UI)。 LogoView
为类LogoLayerView
添加了一个子视图。 此LogoLayerView
使用CAShapeLayer
作为其图层而不是普通的CALayer
。
请注意,我们只需要一个CAShapeLayer
,因为路径可以包含多个断开连接的区域。
我们将LogoLayerView
的帧/边界设置为CGRectMake(0, 0, 213, 213)
,并且永远不会更改它。 相反,当外部LogoView
改变大小时,我们设置LogoLayerView
的transform
,使其仍然填充外部LogoView
。
这是结果:
这是代码:
#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface LogoView : UIView
@end
#import "LogoView.h"
#define CGRECTMAKE(a, b, w, h) {.origin={.x=(a),.y=(b)},.size={.width=(w),.height=(h)}}
const static CGRect ovalRects[] = {
CGRECTMAKE(62.734375,-21.675000,18.900000,18.900000),
CGRECTMAKE(29.784375,-31.725000,27.400000,27.300000),
CGRECTMAKE(2.534375,-81.775000,18.900000,18.900000),
CGRECTMAKE(4.384375,-57.225000,27.400000,27.300000),
CGRECTMAKE(2.784375,62.875000,18.900000,18.900000),
CGRECTMAKE(4.334375,29.925000,27.400000,27.300000),
CGRECTMAKE(62.734375,2.525000,18.900000,18.900000),
CGRECTMAKE(29.784375,4.475000,27.400000,27.300000),
CGRECTMAKE(-21.665625,-81.775000,18.900000,18.900000),
CGRECTMAKE(-31.765625,-57.225000,27.400000,27.300000),
CGRECTMAKE(-81.615625,-21.425000,18.900000,18.900000),
CGRECTMAKE(-57.215625,-31.775000,27.400000,27.300000),
CGRECTMAKE(-81.615625,2.775000,18.900000,18.900000),
CGRECTMAKE(-57.215625,4.425000,27.400000,27.300000),
CGRECTMAKE(-21.415625,62.875000,18.900000,18.900000),
CGRECTMAKE(-31.765625,29.925000,27.400000,27.300000)
};
#define LogoDimension 213.0
@interface LogoLayerView : UIView
@property (nonatomic, strong, readonly) CAShapeLayer *layer;
@end
@implementation LogoLayerView
@dynamic layer;
+ (Class)layerClass {
return [CAShapeLayer class];
}
- (void)layoutSubviews {
[super layoutSubviews];
if (self.layer.path == nil) {
[self initShapeLayer];
}
}
- (void)initShapeLayer {
self.layer.backgroundColor = [UIColor yellowColor].CGColor;
self.layer.strokeColor = nil;
self.layer.fillColor = [UIColor greenColor].CGColor;
UIBezierPath *path = [UIBezierPath bezierPath];
for (size_t i = 0; i < sizeof ovalRects / sizeof *ovalRects; ++i) {
[path appendPath:[UIBezierPath bezierPathWithOvalInRect:ovalRects[i]]];
}
[path applyTransform:CGAffineTransformMakeTranslation(LogoDimension / 2, LogoDimension / 2)];
self.layer.path = path.CGPath;
}
@end
@implementation LogoView {
LogoLayerView *layerView;
}
- (void)layoutSubviews {
[super layoutSubviews];
if (layerView == nil) {
layerView = [[LogoLayerView alloc] init];
layerView.layer.anchorPoint = CGPointZero;
layerView.frame = CGRectMake(0, 0, LogoDimension, LogoDimension);
[self addSubview:layerView];
}
[self layoutShapeLayer];
}
- (void)layoutShapeLayer {
CGSize mySize = self.bounds.size;
layerView.transform = CGAffineTransformMakeScale(mySize.width / LogoDimension, mySize.height / LogoDimension);
}
@end
您可以使CAShapeLayer.path
可设置为动画,并在-layoutSublayersOfLayer
更新自定义图层。 只需确保匹配UIView
和CAShapeLayer
子类的持续时间。
简单明了:
//: Playground - noun: a place where people can play
import UIKit
import XCPlayground
let kAnimationDuration: NSTimeInterval = 4.0
class AnimatablePathShape: CAShapeLayer {
override func actionForKey(event: String) -> CAAction? {
if event == "path" {
let value = self.presentationLayer()?.valueForKey(event) ?? self.valueForKey(event)
let anim = CABasicAnimation(keyPath: event)
anim.duration = kAnimationDuration
anim.fromValue = value
anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
return anim
}
return super.actionForKey(event)
}
override class func needsDisplayForKey(key: String) -> Bool {
if key == "path" {
return true
}
return super.needsDisplayForKey(key)
}
}
class View: UIView {
let shape = AnimatablePathShape()
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.whiteColor().colorWithAlphaComponent(0.1)
self.shape.fillColor = UIColor.magentaColor().CGColor
self.layer.addSublayer(self.shape)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func yoyo(grow: Bool = true) {
let options: UIViewAnimationOptions = [.CurveEaseInOut]
let animations = { () -> Void in
let scale: CGFloat = CGFloat(grow ? 4 : 1.0 / 4)
self.frame = CGRectMake(0, 0, CGRectGetWidth(self.frame) * scale, CGRectGetHeight(self.frame) * scale)
}
let completion = { (finished: Bool) -> Void in
self.yoyo(!grow)
}
UIView.animateWithDuration(kAnimationDuration, delay: 0, options: options, animations: animations, completion: completion)
}
override func layoutSublayersOfLayer(layer: CALayer) {
super.layoutSublayersOfLayer(layer)
let radius = min(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame)) * 0.25
let center = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))
let bezierPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: CGFloat(M_PI * 2), clockwise: true)
self.shape.path = bezierPath.CGPath
}
}
let view = View(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
let container = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
container.addSubview(view)
view.yoyo()
XCPlaygroundPage.currentPage.liveView = container
要使图层正确动画,您可能需要为您的点子类化CALayer
(或CAShapeLayer
)并实现以下方法:
+ (BOOL)needsDisplayForKey:(NSString *)key;
- (instancetype)initWithLayer:(id)layer;
- (void)drawInContext:(CGContextRef)context;
- (id<CAAction>)actionForKey:(NSString *)event;
您还可能需要将任何图层属性标记为@dynamic
。
编辑:另一种(也可能更容易)这样做的方法是使用CABasicAnimation
而不是使用animateWithDuration:animations:
UIView
方法。
import UIKit
import PlaygroundSupport
let animDuration = 4.0
class AnimatablePathShape: CAShapeLayer {
override func action(forKey event: String) -> CAAction? {
if event == "path" {
let anim = CABasicAnimation(keyPath: event)
anim.duration = animDuration
anim.fromValue = presentation()?.value(forKey: event) ?? value(forKey: event)
anim.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
return anim
}
return super.action(forKey: event)
}
override class func needsDisplay(forKey key: String) -> Bool {
if key == "path" {
return true
}
return super.needsDisplay(forKey: key)
}
}
class View: UIView {
let shape = AnimatablePathShape()
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.white.withAlphaComponent(0.1)
shape.fillColor = UIColor.magenta.cgColor
layer.addSublayer(shape)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func yoyo(grow: Bool = true) {
UIView.animate(withDuration: animDuration, delay: 0, options: .curveEaseInOut, animations: {
let scale = CGFloat(grow ? 4 : 1 / 4)
self.frame = CGRect(x: 0, y: 0, width: self.frame.width * scale, height: self.frame.height * scale)
}) { finished in
if finished {
self.yoyo(grow: !grow)
}
}
}
override func layoutSublayers(of layer: CALayer) {
super.layoutSublayers(of: layer)
let radius = min(frame.width, frame.height) * 0.25
let center = CGPoint(x: frame.midX, y: frame.midY)
let bezierPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true)
shape.path = bezierPath.cgPath
}
}
let view = View(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
let container = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
container.addSubview(view)
view.yoyo()
PlaygroundPage.current.liveView = container
实际上原始代码很好,除非它永远不会使用键@"bounds"
获得正在进行的动画,而是应该使用键@"bounds.size"
。
因此,我通过完成所有工作来重构代码: - (void) layoutSublayersOfLayer:(CALayer *)layer
这将是 - 假设徽标只是一个名为_logoLayer
CAShapeLayer
内部属性,您还可以创建一个内部方法,返回适当的CGPath
以在给定矩形内绘制徽标:
- (void) layoutSublayersOfLayer:(CALayer *)layer {
if layer == self.layer {
CGPath *newPath = [self _logoPathInRect: self.bounds]
CAAnimation *anim = [self.layer animationForKey:@"bounds.size"];
[CATransaction begin];
if(anim) {
// animating, apply same duration and timing function.
[CATransaction setAnimationDuration:anim.duration];
[CATransaction setAnimationTimingFunction:anim.timingFunction];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
[self.layer addAnimation:pathAnimation forKey:@"path"];
}
else {
// not animating, we should disable implicit animations.
[CATransaction disableActions];
}
self._logoLayer.path = newPath
self._logoLayer.frame = self.layer.bounds;
[CATransaction commit];
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.