原文出处：
Airfei
源码下载：源码
最近在技术群里，有人发了一张带有动画效果的图片。觉得很有意思，便动手实现了一下。在这篇文章中你将会学到Core Animation显式动画中的关键帧动画、组合动画、CABasicAnimation动画。先上一张原图的动画效果。
点击此查看原图动画效果。
本文要实现的效果图如下：
实现的效果图.gif
把原动画gif动画在mac上使用图片浏览模式打开，我们可以看到动画每一帧的显示。从每一帧上的展示过程，可以把整体的动画进行拆分成两大部分。
第一部分（Part1）从初始状态变成取消状态（图片上是由横实线变成上线横线交叉的圆）。
第二部分（Part2）从取消状态变回初始状态。
下面我们先详细分析Part1是怎么实现的。根据动画图，把Part1再细分成三步。
Step1 : 中间横实线的由右向左的运动效果。这其实是一个组合动画。是先向左偏移的同时横线变短。先看一下实现的动态效果。
step1 Animation.gif
■ 向左偏移—使用基本动画中animationWithKeyPath键值对的方式来改变动画的值。我们这里使用position.x,同样可以使用transform.translation.x来平移。
■ 改变横线的大小—使用经典的strokeStart和strokeEnd。其实上横线长度的变化的由strokeStart到strokeEnd之间的值来共同来决定。改变strokeEnd的值由1.0到0.4，不改变strokeStart的值。横线的长度会从右侧方向由1.0倍长度减少到0.4倍长度。参见示意图的红色区域。
stroke示意图.png
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
-
(
void
)
animationStep1
{
//最终changedLayer的状态
_changedLayer
.
strokeEnd
=
0.4
;
//基本动画，长度有1.0减少到0.4
CABasicAnimation *
strokeAnimation
=
[
CABasicAnimation
animationWithKeyPath
:
@
"strokeEnd"
]
;
strokeAnimation
.
fromValue
=
[
NSNumber
numberWithFloat
:
1.0f
]
;
strokeAnimation
.
toValue
=
[
NSNumber
numberWithFloat
:
0.4f
]
;
//基本动画，向左偏移10个像素
CABasicAnimation *
pathAnimation
=
[
CABasicAnimation
animationWithKeyPath
:
@
"position.x"
]
;
pathAnimation
.
fromValue
=
[
NSNumber
numberWithFloat
:
0.0
]
;
pathAnimation
.
toValue
=
[
NSNumber
numberWithFloat
:
-
10
]
;
//组合动画，平移和长度减少同时进行
CAAnimationGroup *
animationGroup
=
[
CAAnimationGroup
animation
]
;
animationGroup
.
animations
=
[
NSArray
arrayWithObjects
:
strokeAnimation
,
pathAnimation
,
nil
]
;
animationGroup
.
timingFunction
=
[
CAMediaTimingFunction
functionWithName
:
kCAMediaTimingFunctionEaseIn
]
;
animationGroup
.
duration
=
kStep1Duration
;
//设置代理
animationGroup
.
delegate
=
self
;
animationGroup
.
removedOnCompletion
=
YES
;
//监听动画
[
animationGroup
setValue
:
@
"animationStep1"
forKey
:
@
"animationName"
]
;
//动画加入到changedLayer上
[
_changedLayer
addAnimation
:
animationGroup
forKey
:
nil
]
;
}
|
Step2 : 由左向右的动画–向右偏移同时横线长度变长。看一下Step2要实现的动画效果。其思路和Step1是一样的。
step2 Animation.gif
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
-
(
void
)
animationStep2
{
CABasicAnimation *
translationAnimation
=
[
CABasicAnimation
animationWithKeyPath
:
@
"transform.translation.x"
]
;
translationAnimation
.
fromValue
=
[
NSNumber
numberWithFloat
:
-
10
]
;
//strokeEnd:0.8 剩余的距离toValue = lineWidth * (1 - 0.8);
translationAnimation
.
toValue
=
[
NSNumber
numberWithFloat
:
0.2
*
lineWidth
]
;
_changedLayer
.
strokeEnd
=
0.8
;
CABasicAnimation *
strokeAnimation
=
[
CABasicAnimation
animationWithKeyPath
:
@
"strokeEnd"
]
;
strokeAnimation
.
fromValue
=
[
NSNumber
numberWithFloat
:
0.4f
]
;
strokeAnimation
.
toValue
=
[
NSNumber
numberWithFloat
:
0.8f
]
;
CAAnimationGroup *
animationGroup
=
[
CAAnimationGroup
animation
]
;
animationGroup
.
animations
=
[
NSArray
arrayWithObjects
:
strokeAnimation
,
translationAnimation
,
nil
]
;
animationGroup
.
timingFunction
=
[
CAMediaTimingFunction
functionWithName
:
kCAMediaTimingFunctionEaseOut
]
;
animationGroup
.
duration
=
kStep2Duration
;
//设置代理
animationGroup
.
delegate
=
self
;
animationGroup
.
removedOnCompletion
=
YES
;
[
animationGroup
setValue
:
@
"animationStep2"
forKey
:
@
"animationName"
]
;
[
_changedLayer
addAnimation
:
animationGroup
forKey
:
nil
]
;
}
|
Step3: 圆弧的动画效果和上下两个横实线的动画效果。
- 画圆弧，首先想到是使用
UIBezierPath。画个示意图来分析动画路径。示意图如下：
step3 示意图.jpg
整个path路径是由三部分组成，ABC曲线、CD圆弧、DD′圆。
使用UIBezierPath的方法
|
1
|
-
(
void
)
appendPath
:
(
UIBezierPath *
)
bezierPath
;
|
把三部分路径关联起来。详细讲解思路。
• ABC曲线就是贝塞尔曲线，可以根据A、B、C三点的位置使用方法
|
1
2
3
4
5
|
//endPoint 终点坐标 controlPoint1 起点坐标
//controlPoint2 起点和终点在曲线上的切点延伸相交的交点坐标
-
(
void
)
addCurveToPoint
:
(
CGPoint
)
endPoint
controlPoint1
:
(
CGPoint
)
controlPoint1
controlPoint2
:
(
CGPoint
)
controlPoint2
;
|
二次贝塞尔曲线示意图如下：
二次贝塞尔曲线.png
其中control point 点是从曲线上取 start point和end point 切点相交汇的所得到的交点。如下图：
control point .png
首先C点取圆上的一点，-30°。那么，
|
1
|
CGFloat
angle
=
Radians
(
30
)
;
|
C点坐标为：
|
1
2
3
|
//C点
CGFloat
endPointX
=
self
.
center
.
x
+
Raduis *
cos
(
angle
)
;
CGFloat
endPointY
=
kCenterY
-
Raduis *
sin
(
angle
)
;
|
A点坐标为：
|
1
2
3
|
//A点 取横线最右边的点
CGFloat
startPointX
=
self
.
center
.
x
+
lineWidth
/
2.0
;
CGFloat
startPointY
=
controlPointY
;
|
control point 为E点：
|
1
2
3
|
//E点 半径*反余弦(30°)
CGFloat
startPointX
=
self
.
center
.
x
+
Raduis *
acos
(
angle
)
;
CGFloat
startPointY
=
controlPointY
;
|
• CD圆弧的路径使用此方法确定
|
1
|
+
(
instancetype
)
bezierPathWithArcCenter
:
(
CGPoint
)
center
radius
:
(
CGFloat
)
radius
startAngle
:
(
CGFloat
)
startAngle
endAngle
:
(
CGFloat
)
endAngle
clockwise
:
(
BOOL
)
clockwise
;
|
关于弧度问题，UIBezierPath的官方文档中的这张图：
弧度.jpg
StartAngle 弧度即C点弧度，EndAngel弧度即D点弧度。
|
1
2
|
CGFloat
StartAngle
=
2
*
M_PI
-
angle
;
CGFloat
EndAngle
=
M_PI
+
angle
;
|
• DD′圆的路径和上面2一样的方法确定。
StartAngle 弧度即D点弧度，EndAngel弧度即D′点弧度。
|
1
2
|
CGFloat
StartAngle
=
M_PI *
3
/
2
-
(
M_PI_2
-
angle
)
;
CGFloat
EndAngle
=
-
M_PI_2
-
(
M_PI_2
-
angle
)
;
|
下面部分代码是所有path路径。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
UIBezierPath *
path
=
[
UIBezierPath
bezierPath
]
;
// 画贝塞尔曲线 圆弧
[
path
moveToPoint
:
CGPointMake
(
self
.
center
.
x
+
lineWidth
/
2.0
,
kCenterY
)
]
;
CGFloat
angle
=
Radians
(
30
)
;
//C点
CGFloat
endPointX
=
self
.
center
.
x
+
Raduis *
cos
(
angle
)
;
CGFloat
endPointY
=
kCenterY
-
Raduis *
sin
(
angle
)
;
//A点
CGFloat
startPointX
=
self
.
center
.
x
+
lineWidth
/
2.0
;
CGFloat
startPointY
=
kCenterY
;
//E点 半径*反余弦(30°)
CGFloat
controlPointX
=
self
.
center
.
x
+
Raduis *
acos
(
angle
)
;
CGFloat
controlPointY
=
kCenterY
;
//贝塞尔曲线 ABC曲线
[
path
addCurveToPoint
:
CGPointMake
(
endPointX
,
endPointY
)
controlPoint1
:
CGPointMake
(
startPointX
,
startPointY
)
controlPoint2
:
CGPointMake
(
controlPointX
,
controlPointY
)
]
;
// （360°- 30°） ->（180°+30°） 逆时针的圆弧 CD圆弧
UIBezierPath *
path1
=
[
UIBezierPath
bezierPathWithArcCenter
:
CGPointMake
(
self
.
center
.
x
,
kCenterY
)
radius
:
Raduis
startAngle
:
2
*
M_PI
-
angle
endAngle
:
M_PI
+
angle
clockwise
:
NO
]
;
[
path
appendPath
:
path1
]
;
// （3/2π- 60°） ->（-1/2π -60°） 逆时针的圆 DD′圆
UIBezierPath *
path2
=
[
UIBezierPath
bezierPathWithArcCenter
:
CGPointMake
(
self
.
center
.
x
,
kCenterY
)
radius
:
Raduis
startAngle
:
M_PI *
3
/
2
-
(
M_PI_2
-
angle
)
endAngle
:
-
M_PI_2
-
(
M_PI_2
-
angle
)
clockwise
:
NO
]
;
[
path
appendPath
:
path2
]
;
_changedLayer
.
path
=
path
.
CGPath
;
|
Path路径有了，接着实现动画效果。
圆弧的长度逐渐变长。我们还是使用经典的strokeStart和strokeEnd。但是圆弧是如何变长的呢？
(1) 初始圆弧有一段长度。
(2) 在原始长度的基础上逐渐变长，逐渐远离A点，同时要在D点停止。
(3) 长度逐渐变长，最终要在D与D′点交汇。
我们分别解决这个三个问题。
第一个问题，strokeEnd - strokeStart > 0这样能保证有一段圆弧。
第二个问题，逐渐变长,意味着strokeEnd值不断变大。远离A点意味着strokeStart的值不断变大。在D点停止，说明了strokeStart有上限值。
第三个问题，意味着strokeEnd值不断变大，最终值为1.0。
这三个问题说明了一个问题，strokeEnd和strokeStart是一组变化的数据。
那么core animation 中可以控制一组值的动画是关键帧动画（CAKeyframeAnimation）。
为了更准确的给出strokeEnd和strokeStart值，我们使用长度比来确定。
假设我们初始的长度就是曲线ABC的长度。但是贝塞尔曲线长度怎么计算？使用下面方法:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
//求贝塞尔曲线长度
-
(
CGFloat
)
bezierCurveLengthFromStartPoint
:
(
CGPoint
)
start
toEndPoint
:
(
CGPoint
)
end
withControlPoint
:
(
CGPoint
)
control
{
const
int
kSubdivisions
=
50
;
const
float
step
=
1.0f
/
(
float
)
kSubdivisions
;
float
totalLength
=
0.0f
;
CGPoint
prevPoint
=
start
;
// starting from i = 1, since for i = 0 calulated point is equal to start point
for
(
int
i
=
1
;
i
<=
kSubdivisions
;
i
++
)
{
float
t
=
i*
step
;
float
x
=
(
1.0
-
t
)
*
(
1.0
-
t
)
*
start
.
x
+
2.0
*
(
1.0
-
t
)
*
t*
control
.
x
+
t*
t*
end
.
x
;
float
y
=
(
1.0
-
t
)
*
(
1.0
-
t
)
*
start
.
y
+
2.0
*
(
1.0
-
t
)
*
t*
control
.
y
+
t*
t*
end
.
y
;
CGPoint
diff
=
CGPointMake
(
x
-
prevPoint
.
x
,
y
-
prevPoint
.
y
)
;
totalLength
+=
sqrtf
(
diff
.
x*
diff
.
x
+
diff
.
y*
diff
.
y
)
;
// Pythagorean
prevPoint
=
CGPointMake
(
x
,
y
)
;
}
return
totalLength
;
}
|
计算贝塞尔曲线所在的比例为：
|
1
|
CGFloat
orignPercent
=
[
self
calculateCurveLength
]
/
[
self
calculateTotalLength
]
;
|
初始的strokeStart = 0、strokeEnd = orignPercent。
最终的stokeStart = ？
|
1
2
|
//结果就是贝塞尔曲线长度加上120°圆弧的长度与总长度相比得到的结果。
CGFloat
endPercent
=
(
[
self
calculateCurveLength
]
+
Radians
(
120
)
*
Raduis
)
/
[
self
calculateTotalLength
]
;
|
实现动画的代码为
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
CGFloat
orignPercent
=
[
self
calculateCurveLength
]
/
[
self
calculateTotalLength
]
;
CGFloat
endPercent
=
(
[
self
calculateCurveLength
]
+
Radians
(
120
)
*
Raduis
)
/
[
self
calculateTotalLength
]
;
_changedLayer
.
strokeStart
=
endPercent
;
//方案1
CAKeyframeAnimation *
startAnimation
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"strokeStart"
]
;
startAnimation
.
values
=
@
[
@
0.0
,
@
(
endPercent
)
]
;
CAKeyframeAnimation *
EndAnimation
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"strokeEnd"
]
;
EndAnimation
.
values
=
@
[
@
(
orignPercent
)
,
@
1.0
]
;
CAAnimationGroup *
animationGroup
=
[
CAAnimationGroup
animation
]
;
animationGroup
.
animations
=
[
NSArray
arrayWithObjects
:
startAnimation
,
EndAnimation
,
nil
]
;
animationGroup
.
timingFunction
=
[
CAMediaTimingFunction
functionWithName
:
kCAMediaTimingFunctionEaseOut
]
;
animationGroup
.
duration
=
kStep3Duration
;
animationGroup
.
delegate
=
self
;
animationGroup
.
removedOnCompletion
=
YES
;
[
animationGroup
setValue
:
@
"animationStep3"
forKey
:
@
"animationName"
]
;
[
_changedLayer
addAnimation
:
animationGroup
forKey
:
nil
]
;
|
效果图为：
step3-1 Animation.gif
2.上下横线的动画效果。
此动画效果，需要使用transform.rotation.z转动角度。
上横线转动的角度顺序为 0 -> 10° -> (-55°) -> (-45°)
这是一组数据，使用关键帧处理动画。
|
1
2
3
4
5
6
|
CAKeyframeAnimation *
rotationAnimation1
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"transform.rotation.z"
]
;
rotationAnimation1
.
values
=
@
[
[
NSNumber
numberWithFloat
:
0
]
,
[
NSNumber
numberWithFloat
:
Radians
(
10
)
]
,
[
NSNumber
numberWithFloat
:
Radians
(
-
10
)
-
M_PI
_4
]
,
[
NSNumber
numberWithFloat
:
-
M_PI
_4
]
]
;
|
下横线转动的角度顺序为0 -> (-10°) -> (55°) -> (45°)
|
1
2
3
4
5
6
|
CAKeyframeAnimation *
rotationAnimation2
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"transform.rotation.z"
]
;
rotationAnimation2
.
values
=
@
[
[
NSNumber
numberWithFloat
:
0
]
,
[
NSNumber
numberWithFloat
:
Radians
(
-
10
)
]
,
[
NSNumber
numberWithFloat
:
Radians
(
10
)
+
M_PI
_4
]
,
[
NSNumber
numberWithFloat
:
M_PI
_4
]
]
;
|
你认为这么就结束了? 最终结束的动画如下：
step3-2 finished Animation.jpg
发现相交的直线没有居中，而是靠左显示。
向左平移，使用transform.translation.x
|
1
2
|
//平移量
CGFloat
toValue
=
lineWidth *
(
1
-
cos
(
M_PI_4
)
)
/
2.0
;
|
即旋转角度又发生偏移量，使用组合动画。
上横线组合动画
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//平移x
CABasicAnimation *
translationAnimation
=
[
CABasicAnimation
animationWithKeyPath
:
@
"transform.translation.x"
]
;
translationAnimation
.
fromValue
=
[
NSNumber
numberWithFloat
:
0
]
;
translationAnimation
.
toValue
=
[
NSNumber
numberWithFloat
:
-
toValue
]
;
//角度关键帧 上横线的关键帧 0 - 10° - (-55°) - (-45°)
CAKeyframeAnimation *
rotationAnimation1
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"transform.rotation.z"
]
;
rotationAnimation1
.
values
=
@
[
[
NSNumber
numberWithFloat
:
0
]
,
[
NSNumber
numberWithFloat
:
Radians
(
10
)
]
,
[
NSNumber
numberWithFloat
:
Radians
(
-
10
)
-
M_PI
_4
]
,
[
NSNumber
numberWithFloat
:
-
M_PI
_4
]
]
;
CAAnimationGroup *
transformGroup1
=
[
CAAnimationGroup
animation
]
;
transformGroup1
.
animations
=
[
NSArray
arrayWithObjects
:
rotationAnimation1
,
translationAnimation
,
nil
]
;
transformGroup1
.
timingFunction
=
[
CAMediaTimingFunction
functionWithName
:
kCAMediaTimingFunctionEaseOut
]
;
transformGroup1
.
duration
=
kStep3Duration
;
transformGroup1
.
removedOnCompletion
=
YES
;
[
_topLineLayer
addAnimation
:
transformGroup1
forKey
:
nil
]
;
|
下横线组合动画
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//角度关键帧 下横线的关键帧 0 - （-10°） - (55°) - (45°)
CAKeyframeAnimation *
rotationAnimation2
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"transform.rotation.z"
]
;
rotationAnimation2
.
values
=
@
[
[
NSNumber
numberWithFloat
:
0
]
,
[
NSNumber
numberWithFloat
:
Radians
(
-
10
)
]
,
[
NSNumber
numberWithFloat
:
Radians
(
10
)
+
M_PI
_4
]
,
[
NSNumber
numberWithFloat
:
M_PI
_4
]
]
;
CAAnimationGroup *
transformGroup2
=
[
CAAnimationGroup
animation
]
;
transformGroup2
.
animations
=
[
NSArray
arrayWithObjects
:
rotationAnimation2
,
translationAnimation
,
nil
]
;
transformGroup2
.
timingFunction
=
[
CAMediaTimingFunction
functionWithName
:
kCAMediaTimingFunctionEaseOut
]
;
transformGroup2
.
duration
=
kStep3Duration
;
transformGroup2
.
delegate
=
self
;
transformGroup2
.
removedOnCompletion
=
YES
;
[
_bottomLineLayer
addAnimation
:
transformGroup2
forKey
:
nil
]
;
|
Part1到此结束。最终效果图
Part1 animation.gif
Part2的思路和Part1思路是一样的。你可以参考代码自己思考一下。核心代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
-
(
void
)
cancelAnimation
{
//最关键是path路径
UIBezierPath *
path
=
[
UIBezierPath
bezierPath
]
;
//30度,经过反复测试，效果最好
CGFloat
angle
=
Radians
(
30
)
;
CGFloat
startPointX
=
self
.
center
.
x
+
Raduis *
cos
(
angle
)
;
CGFloat
startPointY
=
kCenterY
-
Raduis *
sin
(
angle
)
;
CGFloat
controlPointX
=
self
.
center
.
x
+
Raduis *
acos
(
angle
)
;
CGFloat
controlPointY
=
kCenterY
;
CGFloat
endPointX
=
self
.
center
.
x
+
lineWidth
/
2
;
CGFloat
endPointY
=
kCenterY
;
//组合path 路径 起点 -150° 顺时针的圆
path
=
[
UIBezierPath
bezierPathWithArcCenter
:
CGPointMake
(
self
.
center
.
x
,
kCenterY
)
radius
:
Raduis
startAngle
:
-
M_PI
+
angle
endAngle
:
M_PI
+
angle
clockwise
:
YES
]
;
//起点为 180°-> (360°-30°)
UIBezierPath *
path1
=
[
UIBezierPath
bezierPathWithArcCenter
:
CGPointMake
(
self
.
center
.
x
,
kCenterY
)
radius
:
Raduis
startAngle
:
M_PI
+
angle
endAngle
:
2
*
M_PI
-
angle
clockwise
:
YES
]
;
[
path
appendPath
:
path1
]
;
//三点曲线
UIBezierPath *
path2
=
[
UIBezierPath
bezierPath
]
;
[
path2
moveToPoint
:
CGPointMake
(
startPointX
,
startPointY
)
]
;
[
path2
addCurveToPoint
:
CGPointMake
(
endPointX
,
endPointY
)
controlPoint1
:
CGPointMake
(
startPointX
,
startPointY
)
controlPoint2
:
CGPointMake
(
controlPointX
,
controlPointY
)
]
;
[
path
appendPath
:
path2
]
;
//比原始状态向左偏移5个像素
UIBezierPath *
path3
=
[
UIBezierPath
bezierPath
]
;
[
path3
moveToPoint
:
CGPointMake
(
endPointX
,
endPointY
)
]
;
[
path3
addLineToPoint
:
CGPointMake
(
self
.
center
.
x
-
lineWidth
/
2
-
5
,
endPointY
)
]
;
[
path
appendPath
:
path3
]
;
_changedLayer
.
path
=
path
.
CGPath
;
//平移量
CGFloat
toValue
=
lineWidth *
(
1
-
cos
(
M_PI_4
)
)
/
2.0
;
//finished 最终状态
CGAffineTransform
transform1
=
CGAffineTransformMakeRotation
(
0
)
;
CGAffineTransform
transform2
=
CGAffineTransformMakeTranslation
(
0
,
0
)
;
CGAffineTransform
transform3
=
CGAffineTransformMakeRotation
(
0
)
;
CGAffineTransform
transform
=
CGAffineTransformConcat
(
transform1
,
transform2
)
;
_topLineLayer
.
affineTransform
=
transform
;
transform
=
CGAffineTransformConcat
(
transform3
,
transform2
)
;
_bottomLineLayer
.
affineTransform
=
transform
;
//一个圆的长度比
CGFloat
endPercent
=
2
*
M_PI *
Raduis
/
(
[
self
calculateTotalLength
]
+
lineWidth
)
;
//横线占总path的百分比
CGFloat
percent
=
lineWidth
/
(
[
self
calculateTotalLength
]
+
lineWidth
)
;
_changedLayer
.
strokeStart
=
1.0
-
percent
;
CAKeyframeAnimation *
startAnimation
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"strokeStart"
]
;
startAnimation
.
values
=
@
[
@
0.0
,
@
0.3
,
@
(
1.0
-
percent
)
]
;
//在π+ angle
CAKeyframeAnimation *
EndAnimation
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"strokeEnd"
]
;
EndAnimation
.
values
=
@
[
@
(
endPercent
)
,
@
(
endPercent
)
,
@
1.0
]
;
CAAnimationGroup *
animationGroup
=
[
CAAnimationGroup
animation
]
;
animationGroup
.
animations
=
[
NSArray
arrayWithObjects
:
startAnimation
,
EndAnimation
,
nil
]
;
animationGroup
.
timingFunction
=
[
CAMediaTimingFunction
functionWithName
:
kCAMediaTimingFunctionEaseInEaseOut
]
;
animationGroup
.
duration
=
kStep4Duration
;
animationGroup
.
delegate
=
self
;
animationGroup
.
removedOnCompletion
=
YES
;
[
animationGroup
setValue
:
@
"animationStep4"
forKey
:
@
"animationName"
]
;
[
_changedLayer
addAnimation
:
animationGroup
forKey
:
nil
]
;
//平移x
CABasicAnimation *
translationAnimation
=
[
CABasicAnimation
animationWithKeyPath
:
@
"transform.translation.x"
]
;
translationAnimation
.
fromValue
=
[
NSNumber
numberWithFloat
:
-
toValue
]
;
translationAnimation
.
toValue
=
[
NSNumber
numberWithFloat
:
0
]
;
//角度关键帧 上横线的关键帧 (-45°) -> (-55°)-> 10° -> 0
CAKeyframeAnimation *
rotationAnimation1
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"transform.rotation.z"
]
;
rotationAnimation1
.
values
=
@
[
[
NSNumber
numberWithFloat
:
-
M_PI
_4
]
,
[
NSNumber
numberWithFloat
:
-
Radians
(
10
)
-
M_PI
_4
]
,
[
NSNumber
numberWithFloat
:
Radians
(
10
)
]
,
[
NSNumber
numberWithFloat
:
0
]
]
;
CAAnimationGroup *
transformGroup1
=
[
CAAnimationGroup
animation
]
;
transformGroup1
.
animations
=
[
NSArray
arrayWithObjects
:
rotationAnimation1
,
translationAnimation
,
nil
]
;
transformGroup1
.
timingFunction
=
[
CAMediaTimingFunction
functionWithName
:
kCAMediaTimingFunctionEaseOut
]
;
transformGroup1
.
duration
=
kStep4Duration
;
transformGroup1
.
removedOnCompletion
=
YES
;
[
_topLineLayer
addAnimation
:
transformGroup1
forKey
:
nil
]
;
//角度关键帧 下横线的关键帧 (45°)-> (55°)- >（-10°）-> 0
CAKeyframeAnimation *
rotationAnimation2
=
[
CAKeyframeAnimation
animationWithKeyPath
:
@
"transform.rotation.z"
]
;
rotationAnimation2
.
values
=
@
[
[
NSNumber
numberWithFloat
:
M_PI
_4
]
,
[
NSNumber
numberWithFloat
:
Radians
(
10
)
+
M_PI
_4
]
,
[
NSNumber
numberWithFloat
:
-
Radians
(
10
)
]
,
[
NSNumber
numberWithFloat
:
0
]
]
;
CAAnimationGroup *
transformGroup2
=
[
CAAnimationGroup
animation
]
;
transformGroup2
.
animations
=
[
NSArray
arrayWithObjects
:
rotationAnimation2
,
translationAnimation
,
nil
]
;
transformGroup2
.
timingFunction
=
[
CAMediaTimingFunction
functionWithName
:
kCAMediaTimingFunctionEaseOut
]
;
transformGroup2
.
duration
=
kStep4Duration
;
transformGroup2
.
delegate
=
self
;
transformGroup2
.
removedOnCompletion
=
YES
;
[
_bottomLineLayer
addAnimation
:
transformGroup2
forKey
:
nil
]
;
}
|
最终效果图：
finished animation.gif
本篇文章讲解结束！
代码点此链接下载：https://github.com/WZF-Fei/ZFChangeAnimation
http://cxy.liuzhihengseo.com/465.html
问啊-定制化IT教育平台，牛人一对一服务，有问必答，开发编程社交头条 官方网站：www.wenaaa.com 下载问啊APP，参与官方悬赏，赚百元现金。
QQ群290551701 聚集很多互联网精英，技术总监，架构师，项目经理！开源技术研究，欢迎业内人士，大牛及新手有志于从事IT行业人员进入！
3434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
