加入购物车动画效果（小程序加入购物车动画效果）

一、计算动画开始结束点位置

方法：

1	`- (cgpoint)convertpoint:(cgpoint)point toview:(nullable uiview *)view;`

1）动画开始位置fromcenter

复制代码代码如下:
cgpoint fromcenter = [animationview convertpoint:cgpointmake(animationview.frame.size.width * 0.5f, animationview.frame.size.height * 0.5f) toview:keywindow];

2）动画结束位置endcenter

复制代码代码如下:
cgpoint endcenter = [endview convertpoint:cgpointmake(endview.frame.size.width * 0.5f, endview.frame.size.height * 0.5f) toview:keywindow];

二、计算贝塞尔曲线（抛物线）的两个控制点

加入购物车动画效果（小程序加入购物车动画效果）

controlpoint1是控制点1
controlpoint2是控制点2
a是controlpoint1和controlpoint2的中点
controlpointc是fromcenter和b的中点

1）先设置控制点距最高点（fromcenter或endcenter）的水平距离controlpointey，本篇默认controlpointey = 100，即图1中点controlpointc到点a的距离。

2）计算控制点相对于点a的距离controlpointex，即controlpoint1到a距离或controlpoint2到a距离，本篇设置为fromcenter.x到endcenter.x的1/4，即controlpointex = (endcenter.x - fromcenter.x) * 0.25f;

3）计算两个控制点

1 2	`cgpoint controlpoint1 = cgpointmake(controlpointcx - controlpointex, controlpointcy - controlpointey);` `cgpoint controlpoint2 = cgpointmake(controlpointcx + controlpointex, controlpointcy - controlpointey);`

三、复制动画的layer

1 2 3 4 5 6 7 8 9 10 nsstring *str = ((uibutton *)animationview).titlelabel.text; _animationlayer = [catextlayer layer]; _animationlayer.bounds = animationview.bounds; _animationlayer.position = fromcenter; _animationlayer.alignmentmode = kcaalignmentcenter;//文字对齐方式 _animationlayer.wrapped = yes; _animationlayer.contentsscale = [uiscreen mainscreen].scale; _animationlayer.string = str; _animationlayer.backgroundcolor = [uicolor redcolor].cgcolor; [keywindow.layer addsublayer:_animationlayer];

四、动画组合

1）运动轨迹（抛物线）

1 2 3 4 5 uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:fromcenter]; [path addcurvetopoint:endcenter controlpoint1:controlpoint1 controlpoint2:controlpoint2]; cakeyframeanimation *pathanimation = [cakeyframeanimation animationwithkeypath:@"position"]; pathanimation.path = path.cgpath;

2）旋转起来

1 2 3 4 5 cabasicanimation *rotateanimation = [cabasicanimation animationwithkeypath:@"transform.rotation"]; rotateanimation.removedoncompletion = yes; rotateanimation.fromvalue = [nsnumber numberwithfloat:0]; rotateanimation.tovalue = [nsnumber numberwithfloat:10 * m_pi]; rotateanimation.timingfunction=[camediatimingfunction functionwithname:kcamediatimingfunctioneasein]

3）缩放动画

1 2 3 4 cabasicanimation *scaleanimation = [cabasicanimation animationwithkeypath:@"transform.scale"]; scaleanimation.removedoncompletion = no; scaleanimation.fromvalue = [nsnumber numberwithfloat:1.0]; scaleanimation.tovalue = [nsnumber numberwithfloat:0.2];

4）透明度动画

1 2 3 4 cabasicanimation *alphaanimation = [cabasicanimation animationwithkeypath:@"opacity"]; alphaanimation.removedoncompletion = no; alphaanimation.fromvalue = [nsnumber numberwithfloat:1.0]; alphaanimation.tovalue = [nsnumber numberwithfloat:0.1];

5）动画组合

1 2 3 4 5 6 7 caanimationgroup *groups = [caanimationgroup animation]; groups.animations = @[pathanimation,rotateanimation, scaleanimation, alphaanimation]; groups.duration = kshoppingcartduration; groups.removedoncompletion=no; groups.fillmode=kcafillmodeforwards; groups.delegate = self; [_animationlayer addanimation:groups forkey:@"group"];

动画效果：

加入购物车动画效果（小程序加入购物车动画效果）