服务器之家

服务器之家 > 正文

iOS添加购物车动画效果示例

时间:2021-03-07 17:03     来源/作者:Mr_Wendao

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

方法:

?
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];

 

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

iOS添加购物车动画效果示例

  • 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"];

动画效果:

iOS添加购物车动画效果示例

下载地址:shoppingcartanimation.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:http://www.jianshu.com/p/a99e58e5dc19

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部