CoreAnimation is used to achieve the animation effect after the camera takes the photo,

CoreAnimation is used to achieve the animation effect after the camera takes the photo,

Not to mention nonsense. Because of the frame rate limit during animation recording, the animation can only be slowed down for recording, making it easier to see the effect.

This is the code after clicking start.

-(IBAction)btnStartClick:(id)sender{      CABasicAnimation *baseanimation1=[CABasicAnimation animationWithKeyPath:@"transform.scale.x"];    baseanimation1.fromValue=@(1.0f);    baseanimation1.toValue=@(20.0f/myview.frame.size.width);        CABasicAnimation *baseanimation2=[CABasicAnimation animationWithKeyPath:@"transform.scale.y"];    baseanimation2.fromValue=@(1.0f);    baseanimation2.toValue=@(20.0f/myview.frame.size.height);        CAAnimationGroup *cg=[CAAnimationGroup animation];    cg.duration=0.2;    cg.animations=@[baseanimation1,baseanimation2];    cg.repeatCount=0;    cg.delegate=self;    cg.removedOnCompletion=NO;    [myview.layer addAnimation:cg forKey:@"myviewscale"];}

Because an animation consists of multiple animations, an animation is automatically started again after the first animation is completed.

-(void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{    if(anim==[myview.layer animationForKey:@"myviewscale"])    {        myview.frame=CGRectMake((self.view.frame.size.width-20)/2,(self.view.frame.size.height-20)/2, 20, 20);        [myview.layer removeAnimationForKey:@"myviewscale"];        UIBezierPath *path=[UIBezierPath bezierPath];        [path moveToPoint:self.view.center];        [path addQuadCurveToPoint:CGPointMake(20, self.view.frame.size.height-20) controlPoint:CGPointMake(35, 50)];                CAKeyframeAnimation *keyframeanimation1=[CAKeyframeAnimation animationWithKeyPath:@"position"];        keyframeanimation1.path=path.CGPath;        keyframeanimation1.duration=1;        //keyframeanimation1.rotationMode = kCAAnimationRotateAuto;        keyframeanimation1.rotationMode = nil;        keyframeanimation1.delegate=self;        keyframeanimation1.removedOnCompletion=NO;        keyframeanimation1.fillMode = kCAFillModeForwards;        keyframeanimation1.timingFunction=[CAMediaTimingFunction functionWithControlPoints:0.3 :0.7 :0.7 :0.3];        [myview.layer addAnimation:keyframeanimation1 forKey:@"myviewposition"];    }    else    {        myview.frame=CGRectMake(10,self.view.frame.size.height-20, 20, 20);        [myview.layer removeAnimationForKey:@"myviewposition"];    }}

 

First, explain the animation execution process.

Step 1: Use CABasicAnimation to scale the photo

Step 2: Use CAKeyframeAnimation to shift the photo and finally generate a parabolic throwing effect.

 

Implementation of parabolic trajectory

To make an animation have a parabolic trajectory, We need to simulate the trajectory of a secondary besell curve. The secondary besell curve is as follows. Here we reference an animated picture of a network.

 

P0 is the start point, p1 is the control point, and p2 is the end point in the secondary besell curve.

 

The instance method of UIBezierPath addQuadCurveToPoint :( CGPoint) endPoint controlPoint :( CGPoint) controlPoint. You must enter an end point (p2) and a control point (p1 ), then this function will automatically construct a quadratic besell curve for us.

 

Parabolic Speed Control

The first half of the parabolic speed is slow, while the second half is slow. The latter half is controlled by the timingFunction of CAKeyframeAnimation. The timingFunction is of the CAMediaTimingFunction type. CAMediaTimingFunction can be initialized through functionWithName :( NSString *) name. The value range of the input value name includes linear (average value growth) and easeIn (Fast first and slow), easeOut (first slow, then fast), easeInEaseOut (first fast, then slow, then fast ). You can also use functionWithControlPoints :( float) c1x :( float) c1y :( float) c2x :( float) c2y to initialize the instance. The input value is the coordinates of the two control points of the cubic besell curve, the value ranges from 0 to 1. Therefore, the functionWithName function cannot meet our needs, so we can only use the functionWithControlPoints function.

 

FunctionWithControlPoints can use the following three-way besell curves to represent them. (The image is from the network. Ignore the vertical and horizontal coordinate text on the image ):

 

 

The horizontal coordinate is defined as the value to be changed, and the vertical coordinate is defined as the time. Then p1 and p2 are the control point parameters of the two inputs of this function.