问题
My app takes a still photo and animates the mouth region to emulate talking. However, about 1/4 of the time, some of the hidden calayers will flash continuously throughout the animation.
Here is what the app looks like when it works properly. Here is what the app looks like when it glitches. EDIT: a better video
I'm assuming the issue is path related. In the app, the user creates a path around the mouth region (shown briefly in the video), and this will be the animated region. Sometimes the path will result in a smooth animation, and other times it will result in the glitch above. Additionally, if I press "back" and try to reload the controller with the animation, the glitch persists, whereas if I change the path before reloading, it occasionally goes away.
If it's not path related, some of the culprits I have eliminated are:
image type/source -- sometimes it will work for image a but not image b, and other times it will work for image b but not a. I've tried images from photo library as well as ones saved from the internet.
iphone vs simulator -- problem occurs on both devices
number of pictures animated -- sometimes it will happen on the first try; other times it will happen on the 5th or 6th try.
Below is the code from the view to be animated. I first create a layer of all black, followed by a layer with the picture minus the mouth region, and finally a layer of just the mouth region. I then shift the position of the mouth layer, so that the displacement becomes black and looks like an open mouth.
EDIT: Also, if I remove the mouth hole by removing the mask from the face layer, the animation runs smoothly.
- (id)initWithFrame:(CGRect)frame leftPt:(CGPoint)point0 rightPt:(CGPoint)point2 vertex1:(CGPoint)vertex1 vertex2:(CGPoint)vertex2 andPicture:(UIImage *)pic{
self = [super initWithFrame:frame];
if (self) {
p0 = point0;
p2 = point2;
v1 = vertex1;
v2 = vertex2;
picture = pic;
[self addBlackLayer];
[self addFaceLayer];
[self addMouthLayer];
self.opaque = YES;
}
return self;
}
- (void)addBlackLayer {
CALayer *blackLayer = [CALayer layer];
blackLayer.frame = self.bounds;
blackLayer.backgroundColor = [UIColor blackColor].CGColor;
[self.layer addSublayer:blackLayer];
}
- (void)addFaceLayer {
CALayer *faceLayer = [CALayer layer];
faceLayer.frame = self.bounds;
faceLayer.contents = (id)[picture CGImageWithProperOrientation];
CAShapeLayer *faceMask = [CAShapeLayer layer];
CGMutablePathRef fPath = CGPathCreateMutable();
CGPathMoveToPoint(fPath, NULL, CGRectGetMinX(self.bounds), CGRectGetMinY(self.bounds));
CGPathAddLineToPoint(fPath, NULL, CGRectGetMaxX(self.bounds), CGRectGetMinY(self.bounds));
CGPathAddLineToPoint(fPath, NULL, CGRectGetMaxX(self.bounds), CGRectGetMaxY(self.bounds));
CGPathAddLineToPoint(fPath, NULL, CGRectGetMinX(self.bounds), CGRectGetMaxY(self.bounds));
CGPathAddLineToPoint(fPath, NULL, CGRectGetMinX(self.bounds), CGRectGetMinY(self.bounds));
CGPathMoveToPoint(fPath, NULL, p0.x, p0.y);
midpt = CGPointMake( (p2.x + p0.x)/2, (p2.y+ p0.y)/2);
CGPoint c1 = CGPointMake(2*v1.x - midpt.x, 2*v1.y - midpt.y); //control points
CGPoint c2 = CGPointMake(2*v2.x - midpt.x, 2*v2.y - midpt.y);
CGPathAddQuadCurveToPoint(fPath, NULL, c1.x, c1.y, p2.x, p2.y);
CGPathAddQuadCurveToPoint(fPath, NULL, c2.x, c2.y, p0.x, p0.y);
faceMask.path = fPath;
faceLayer.mask = faceMask;
[faceMask setFillRule:kCAFillRuleEvenOdd];
[self.layer addSublayer:faceLayer];
CGPathRelease(fPath);
}
- (void)addMouthLayer {
CGMutablePathRef mPath = CGPathCreateMutable();
CGPathMoveToPoint(mPath, NULL, p0.x, p0.y);
midpt = CGPointMake( (p2.x + p0.x)/2, (p2.y+ p0.y)/2);
CGPoint c1 = CGPointMake(2*v1.x - midpt.x, 2*v1.y - midpt.y); //control points
CGPoint c2 = CGPointMake(2*v2.x - midpt.x, 2*v2.y - midpt.y);
CGPathAddQuadCurveToPoint(mPath, NULL, c1.x, c1.y, p2.x, p2.y);
CGPathAddQuadCurveToPoint(mPath, NULL, c2.x, c2.y, p0.x, p0.y);
self.mouthLayer = [CALayer layer];
CAShapeLayer *mouthMask = [CAShapeLayer layer];
self.mouthLayer.frame = self.bounds;
self.mouthLayer.contents = (id)[picture CGImageWithProperOrientation];
mouthMask.path = mPath;
mouthMask.frame = mouthLayer.bounds;
self.mouthLayer.mask = mouthMask;
[self.layer addSublayer:mouthLayer];
self.mouthLayer.frame = CGRectMake(mouthLayer.frame.origin.x, mouthLayer.frame.origin.y, mouthLayer.frame.size.width, mouthLayer.frame.size.height);
CGPathRelease(mPath);
Here is the code that creates the animation, from the view controller
- (CAAnimation *)createAnimationWithRepeatCount:(int)count {
CGPoint convertedStartingCenter = [self.view convertPoint:animatedFace.center toView:animatedFace];
CGPoint endPt = CGPointMake(convertedStartingCenter.x, convertedStartingCenter.y + 15);
CABasicAnimation *mouthDown = [CABasicAnimation animationWithKeyPath:@"position"];
mouthDown.duration = ANIMATION_TIME;
mouthDown.beginTime = 0;
mouthDown.fromValue = [NSValue valueWithCGPoint:convertedStartingCenter];
mouthDown.toValue = [NSValue valueWithCGPoint:endPt];
CABasicAnimation *mouthUp = [CABasicAnimation animationWithKeyPath:@"position"];
mouthUp.duration = ANIMATION_TIME;
mouthUp.beginTime = ANIMATION_TIME;
mouthUp.fromValue = [NSValue valueWithCGPoint:endPt];
mouthUp.toValue = [NSValue valueWithCGPoint:convertedStartingCenter];
CAAnimationGroup *totalAnimation = [CAAnimationGroup animation];
[totalAnimation setAnimations:[NSArray arrayWithObjects:mouthDown,mouthUp, nil]];
[totalAnimation setDuration:2*ANIMATION_TIME];
[totalAnimation setRemovedOnCompletion:NO];
[totalAnimation setFillMode:kCAFillModeForwards];
totalAnimation.repeatCount = count;
return totalAnimation;
}
回答1:
Just another approach (don't know if you tried), you could use only CABasicAnimation and set your class as the animation delegate, and in the delegate method you could try to start the the next CABasicAnimation. If you didn't tried I can provide an example for you.
来源：https://stackoverflow.com/questions/16556824/caanimation-with-calayers-occasionally-creates-flickered-animation-video-includ