一、计算动画开始结束点位置
方法：
|
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"]; |
动画效果：
下载地址：shoppingcartanimation.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.jianshu.com/p/a99e58e5dc19
