使用CoreAnimation 實現相機拍攝照片以後動畫效果

廢話很少說，先看上效果，因爲動畫錄製的時候幀率限制，只能將動畫放慢了進行錄製，更容易看到效果

這是點擊開始以後代碼

-(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"];
}

 因爲動畫使由多個動畫組成，因此第一個動畫完畢以後自動再次開始一個動畫

-(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"];
    }
}

 

先解釋一下動畫執行過程

第一步是經過CABasicAnimation 對照片進行縮放

第二步是經過CAKeyframeAnimation 對照片進行位移並最終產生拋物線的投擲效果

 

拋物線軌跡的實現

要想讓動畫有一個拋物線的軌跡就須要一個二次貝塞爾曲線的軌跡進行模擬，二次貝塞爾曲線以下，這裏引用了一個網絡的動畫圖片。

 

二次貝塞爾曲線中 p0 爲起始點、p1 爲控制點、 p2爲結束點

 

UIBezierPath 的實例方法 addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;要求輸入一個結束點（p2） 和 控制點(p1)，而後這個函數將爲咱們自動構建一個二次貝塞爾曲線。

 

拋物線速度控制

拋物線速度前半段由快變慢，後半段由慢變快是由CAKeyframeAnimation 的 timingFunction 進行控制的，timingFunction是CAMediaTimingFunction類型的。CAMediaTimingFunction能夠經過functionWithName:(NSString *)name 進行初始化，輸入值 name的取值範圍包括 linear（數值平均增加）、easeIn（先快後慢）、easeOut（先慢後快）、easeInEaseOut（先快後慢先慢後快）。也能夠經過 functionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y 進行初始化，輸入值爲三次貝塞爾曲線的兩個控制點座標，控制點座標取值範圍都是在[0,1]之間。所以經過functionWithName函數是沒法知足咱們的需求的，那麼只能使用函數functionWithControlPoints了。

 

functionWithControlPoints所使用的三次貝塞爾曲線大概能夠使用下圖進行表示（圖片來源於網絡，請忽略圖片上面的橫縱座標文字）：

 

 

橫向座標定義爲須要變化的數值 ，縱座標定義爲時間 那麼 p1  和 p2 就是這個函數的兩個輸入的控制點參數