4
4
5
5
# AndroidAnimation
6
6
7
- Android 高级动画Demo
7
+ Android Vector以及贝塞尔曲线结合属性动画实现的Demo
8
8
9
9
### VectorDrawable基础知识
10
10
32
32
33
33
[ SVG Editor] ( http://editor.method.ac/ )
34
34
35
- ![ ] ( img\ svg_editor.png )
35
+ ![ ] ( img/ svg_editor.png )
36
36
37
37
##### SVG转换VectorDrawable
38
38
39
39
- 由于Android原生支持的是Vector,所以可以将SVG转换成vector——[ SVG2Android] ( http://inloop.github.io/svg2android/ )
40
40
41
- ![ ] ( img\ svg2Android.png )
41
+ ![ ] ( img/ svg2Android.png )
42
42
43
43
- 也可以通过Android studio自带的** Vector Asset** 工具将SVG转换成vector,在** res** 下的** drawable** 目录右击选择** new** ,然后选择** Vector Asset** 即可。
44
44
45
- ![ ] ( img\ vector_asset.jpg )
45
+ ![ ] ( img/ vector_asset.jpg )
46
46
47
47
###### 转换效果对比
48
48
49
- ![ ] ( img\ result.jpg )
49
+ ![ ] ( img/ result.jpg )
50
50
51
51
##### SVG图片资源
52
52
53
53
[ SVG图片资源] ( http://www.iconfont.cn/plus/collections/index )
54
54
55
- ![ ] ( img\ svg_download.png )
55
+ ![ ] ( img/ svg_download.png )
56
56
57
57
#### VectorDrawable兼容性
58
58
91
91
92
92
- Vector图像标签
93
93
94
- ``` xml
95
- <!-- 绘制一个矩形 -->
96
- <vector xmlns : android =" http://schemas.android.com/apk/res/android"
97
- android:width=" 48dp"
98
- android:height=" 48dp"
99
- android:viewportWidth=" 200"
100
- android:viewportHeight=" 200" >
101
-
102
- <path
103
- android:name=" square"
104
- android:fillColor=" #272636"
105
- android:pathData=" M50,50 L100,50 L100,100 L50,100z" />
106
- </vector >
107
- ```
94
+ ``` xml
95
+ <!-- 绘制一个矩形 -->
96
+ <vector xmlns : android =" http://schemas.android.com/apk/res/android"
97
+ android : width =" 48dp"
98
+ android : height =" 48dp"
99
+ android : viewportWidth =" 200"
100
+ android : viewportHeight =" 200" >
101
+
102
+ <path
103
+ android : name =" square"
104
+ android : fillColor =" #272636"
105
+ android : pathData =" M50,50 L100,50 L100,100 L50,100z" />
106
+ </vector >```
108
107
109
108
- **android:width\android:height** : 定义图片的宽高
110
109
- **android:viewportWidth\android:viewportHeight** : 定义图像被划分的比例大小
@@ -210,7 +209,7 @@ Android提供了二阶贝塞尔曲线和三阶贝塞尔曲线的 API,利用这
210
209
211
210
通用公式:
212
211
213
- ![ 一阶贝塞尔曲线通用公式] ( img\ one_bezier_formula.jpg )
212
+ ![ 一阶贝塞尔曲线通用公式] ( img/ one_bezier_formula.jpg )
214
213
215
214
> B(t)为t时间下 点的坐标;
216
215
>
@@ -220,29 +219,29 @@ Android提供了二阶贝塞尔曲线和三阶贝塞尔曲线的 API,利用这
220
219
221
220
效果图:
222
221
223
- ![ 一阶贝塞尔曲线] ( img\ one_bezier.webp )
222
+ ![ 一阶贝塞尔曲线] ( img/ one_bezier.webp )
224
223
225
224
##### 二阶贝塞尔曲线
226
225
227
226
描述:由 P0 至 P1 的连续点 Q0,描述一条线段。由 P1 至 P2 的连续点 Q1,描述一条线段。由 Q0 至 Q1 的连续点 B(t),描述一条二次贝塞尔曲线。
228
227
229
228
通用公式:
230
229
231
- ![ 一阶贝塞尔曲线通用公式] ( img\ two_bezier_formula.jpg )
230
+ ![ 一阶贝塞尔曲线通用公式] ( img/ two_bezier_formula.jpg )
232
231
233
232
效果图:
234
233
235
- ![ 二阶贝塞尔曲线] ( img\ two_bezier.webp )
234
+ ![ 二阶贝塞尔曲线] ( img/ two_bezier.webp )
236
235
237
236
##### 三阶贝塞尔曲线
238
237
239
238
通用公式:
240
239
241
- ![ 一阶贝塞尔曲线通用公式] ( img\ three_bezier_formula.jpg )
240
+ ![ 一阶贝塞尔曲线通用公式] ( img/ three_bezier_formula.jpg )
242
241
243
242
效果图:
244
243
245
- ![ 五阶贝塞尔曲线] ( img\ three_bezier.webp )
244
+ ![ 五阶贝塞尔曲线] ( img/ three_bezier.webp )
246
245
247
246
248
247
@@ -280,4 +279,4 @@ Android提供了二阶贝塞尔曲线和三阶贝塞尔曲线的 API,利用这
280
279
(Math . atan2(tan[1 ], tan[0 ] * 180.0 / Math . PI ))
281
280
```
282
281
283
-
282
+
0 commit comments