Ane*_*ail 10 android kotlin android-jetpack-compose
我想要对图标路径进行动画处理,例如在“检查”和“关闭”图标之间来回动画化,例如在 XML 中我将使用动画可绘制对象:
<objectAnimator
android:propertyName="pathData"
android:duration="1000"
android:valueFrom="M 4.8 13.4 L 9 17.6 M 10.4 16.2 L 19.6 7"
android:valueTo="M 6.4 6.4 L 17.6 17.6 M 6.4 17.6 L 17.6 6.4"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
Run Code Online (Sandbox Code Playgroud)
然后在fragment的Activity中加载动画。
在 Compose 中执行相同的操作相当于什么,以下是 Compose 中的图标:
这是检查图标的 ImageVector:
val Check: ImageVector
get() {
if (_check != null) {
return _check!!
}
_check = Builder(
name = "Check",
defaultWidth = 120.0.dp,
defaultHeight = 120.0.dp,
viewportWidth = 24.0f,
viewportHeight = 24.0f
).apply {
path(
fill = null,
stroke = SolidColor(Color(0xFF999999)),
strokeLineWidth = 2.0f,
strokeLineCap = Square,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = NonZero
) {
moveTo(4.8f, 13.4f)
lineTo(9.0f, 17.6f)
moveTo(10.4f, 16.2f)
lineTo(19.6f, 7.0f)
}
}
.build()
return _check!!
}
private var _check: ImageVector? = null
Run Code Online (Sandbox Code Playgroud)
这是关闭图标的 ImageVector:
val Close: ImageVector
get() {
if (_close != null) {
return _close!!
}
_close = Builder(
name = "Close",
defaultWidth = 120.0.dp,
defaultHeight = 120.0.dp,
viewportWidth = 24.0f,
viewportHeight = 24.0f,
).apply {
path(
fill = null,
stroke = SolidColor(Color(0xFF999999)),
strokeLineWidth = 2.0f,
strokeLineCap = Square,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = NonZero
) {
moveTo(6.4f, 6.4f)
lineTo(17.6f, 17.6f)
moveTo(6.4f, 17.6f)
lineTo(17.6f, 6.4f)
}
}
.build()
return _close!!
}
private var _close: ImageVector? = null
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
807 次 |
| 最近记录: |