程序员经验分享-hwhale

在 Jetpack Compose 中启动动画矢量 Drawable

2024-05-19

我有一个动画矢量可绘制R.drawable.my_anim，我想在 Jetpack Compose 中展示并开始。 可绘制对象显示/渲染正确，但动画未启动

这是撰写视图：

@Composable
fun SplashView() {

    Surface(modifier = Modifier.fillMaxSize()) {
        val image = animatedVectorResource(id = R.drawable.my_anim)
        val atEnd by remember { mutableStateOf(false) }
        Image(
            modifier = Modifier.wrapContentSize(align = Alignment.Center)
            painter = image.painterFor(atEnd = atEnd),
            contentDescription = null,
        )
        // start the animation?
       atEnd.not() // doesn't trigger a recomposition?
    }
}

我读到更新atEnd应该触发动画，但我什至不知道该怎么做。 我可能缺少一个基本概念，但一个简单的概念atEnd.not()没有做任何事情。

目前正在使用 Compose Version = "1.0.0-beta04" 和 Android Studio Arctic Fox 2020.3.1

这是可供参考的绘图：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="446dp"
            android:height="122dp"
            android:tint="@color/white"
            android:viewportWidth="2232"
            android:viewportHeight="612">
            <group android:name="wrapper">
                <clip-path
                    android:name="clippath2184"
                    android:pathData="M 0 0 L 337 0 L 337 610 L 0 610 Z"/>
                <group android:name="group_1">
                    <path
                        android:name="path"
                        android:pathData="M 669.96 585.36 L 625.7 585.36 L 469.75 217.95 L 469.75 570.58 C 469.75 578.74 463.13 585.36 454.97 585.36 L 401.33 585.36 L 401.33 24.36 L 452.11 24.36 C 458.04 24.36 463.4 27.9 465.71 33.36 L 616.32 388.18 L 616.32 24.36 L 669.96 24.36 C 678.12 24.36 684.74 30.98 684.74 39.14 L 684.74 570.59 C 684.74 578.74 678.12 585.36 669.96 585.36 Z M 2019.03 585.36 L 1897.02 585.36 L 1897.02 24.36 L 2019.03 24.36 C 2097.17 24.36 2160.74 87.93 2160.74 166.07 L 2160.74 443.64 C 2160.74 521.79 2097.17 585.36 2019.03 585.36 Z M 1965.43 516.94 L 2019.03 516.94 C 2059.44 516.94 2092.33 484.06 2092.33 443.64 L 2092.33 166.07 C 2092.33 125.66 2059.45 92.77 2019.03 92.77 L 1965.43 92.77 Z M 1235.99 576.35 L 1388.12 217.96 L 1388.12 585.36 L 1441.76 585.36 C 1449.92 585.36 1456.54 578.74 1456.54 570.58 L 1456.54 39.14 C 1456.54 30.98 1449.92 24.36 1441.76 24.36 L 1395.98 24.36 L 1157.85 585.36 L 1222.39 585.36 C 1228.32 585.36 1233.67 581.81 1235.99 576.35 Z M 1218.36 24.36 L 1063.93 388.18 L 1063.93 39.14 C 1063.93 30.98 1057.31 24.36 1049.15 24.36 L 1003.37 24.36 L 848.94 388.18 L 848.94 39.14 C 848.94 30.98 842.32 24.36 834.16 24.36 L 780.52 24.36 L 780.52 585.36 L 829.78 585.36 C 835.71 585.36 841.07 581.82 843.38 576.36 L 995.51 217.97 L 995.51 585.37 L 1044.77 585.37 C 1050.7 585.37 1056.06 581.83 1058.37 576.37 L 1286.86 38.07 C 1289.62 31.57 1284.85 24.37 1277.79 24.37 L 1218.36 24.37 Z M 1752.1 352.36 C 1791.12 333.22 1816.04 293.66 1816.04 249.81 L 1816.04 166.07 C 1816.04 87.8 1752.59 24.36 1674.33 24.36 L 1552.32 24.36 L 1552.32 585.36 L 1610.88 585.36 C 1616.32 585.36 1620.73 580.95 1620.73 575.51 L 1620.73 92.77 L 1674.33 92.77 C 1714.81 92.77 1747.63 125.59 1747.63 166.07 L 1747.63 249.81 C 1747.63 268.23 1736.62 284.87 1719.66 292.07 L 1704.16 298.65 C 1695.06 302.51 1689.15 311.44 1689.15 321.32 L 1689.15 379.15 L 1776.68 585.36 L 1836.12 585.36 C 1843.18 585.36 1847.95 578.16 1845.19 571.66 Z M 168.79 18 C 246.93 18 310.5 81.57 310.5 159.71 L 310.5 452.28 C 310.5 530.42 246.93 593.99 168.79 593.99 C 90.65 593.99 27.07 530.43 27.07 452.29 L 27.07 159.71 C 27.07 81.57 90.65 18 168.79 18 Z M 242.11 274.88 L 242.11 147.81 C 242.11 121.46 220.66 97.25 194.32 96.46 C 166.4 95.62 143.49 118.01 143.49 145.75 L 143.49 300.44 C 143.49 310.32 137.58 319.25 128.48 323.11 L 95.51 337.11 L 95.51 464.19 C 95.51 490.54 116.96 514.75 143.3 515.54 C 171.22 516.38 194.13 493.99 194.13 466.25 L 194.13 311.55 C 194.13 301.67 200.04 292.74 209.14 288.88 Z"
                        android:fillColor="#000"
                        android:strokeWidth="1"/>
                    <group android:name="group">
                        <path
                            android:name="path_1"
                            android:pathData="M 2201.13 23.99 L 2191.62 46.39 L 2191.62 24.89 C 2191.62 24.39 2191.22 23.99 2190.72 23.99 L 2188.02 23.99 L 2173.5 58.2 L 2177.24 58.2 C 2177.72 58.2 2178.16 57.91 2178.35 57.47 L 2187.46 36.02 L 2187.46 58.2 L 2190.36 58.2 C 2190.84 58.2 2191.28 57.91 2191.47 57.47 L 2200.58 36.02 L 2200.58 58.2 L 2203.85 58.2 C 2204.35 58.2 2204.75 57.8 2204.75 57.3 L 2204.75 24.89 C 2204.75 24.39 2204.35 23.99 2203.85 23.99 L 2201.13 23.99 Z M 2176.94 24.89 C 2176.94 24.39 2176.54 23.99 2176.04 23.99 L 2159.66 23.99 L 2159.66 28.16 L 2166.22 28.16 L 2166.22 58.2 L 2169.49 58.2 C 2169.99 58.2 2170.39 57.8 2170.39 57.3 L 2170.39 28.16 L 2176.94 28.16 Z"
                            android:fillColor="#000"
                            android:strokeWidth="1"/>
                    </group>
                </group>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="clippath2184">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="pathData"
                    android:duration="1508"
                    android:valueFrom="M 0 0 L 0 0 L 0 610 L 0 610 Z"
                    android:valueTo="M 0 0 L 337 0 L 337 610 L 0 610 Z"
                    android:valueType="pathType"
                    android:interpolator="@android:anim/overshoot_interpolator"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1768"
                    android:duration="1229"
                    android:valueFrom="M 0 0 L 337 0 L 337 610 L 0 610 Z"
                    android:valueTo="M 0 0 L 2240 0 L 2240 610 L 0 610 Z"
                    android:valueType="pathType"
                
android:interpolator="@android:anim/accelerate_interpolator"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1508"
                    android:duration="260"
                    android:valueFrom="M 0 0 L 337 0 L 337 610 L 0 610 Z"
                    android:valueTo="M 0 0 L 337 0 L 337 610 L 0 610 Z"
                    android:valueType="pathType"
                
android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

你应该使用效果API https://developer.android.com/jetpack/compose/lifecycle#state-effect-use-cases like DisposableEffect or LaunchedEffect.
你可以使用类似的东西：

Surface(modifier = Modifier.fillMaxSize()) {
    //.. your code

    DisposableEffect(Unit) {
        atEnd = !atEnd
        onDispose {  }
    }
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

在 Jetpack Compose 中启动动画矢量 Drawable 的相关文章

随机推荐

  • CookieManager.getInstance().removeAllCookie();不删除所有cookie

    我在应用程序的 onCreate 中调用 CookieManager getInstance removeAllCookie 我遇到了一个奇怪的问题 我看到 GET 请求中传递了意外的 cookie 值 事实上 cookie 值是一个非常非

  • 带有 mkdocs 的本地 mathjax

    我想在无法访问互联网的计算机上使用 MathJax 和 Mkdocs 因此我不能只调用 Mathjax CDN Config mkdocs yml site name My Docs extra javascript javascripts

  • iOS Storyboards 我应该使用它们吗？ [复制]

    这个问题在这里已经有答案了 我是 iOS 开发新手 尚未创建应用程序 但我向我的朋友寻求建议 他在市场上拥有非常高评价的应用程序 他说不要使用故事板 尽管我很想听取他的建议 但它们似乎确实很有帮助 这是否会在将来给我的应用程序带来问题 我有

  • Windows 8 Metro 应用程序（网格应用程序）过渡时出现黑色闪烁

    我正在基于网格应用程序模板构建 Windows 8 Metro 应用程序 一切都很顺利 直到我尝试更改应用程序的主题和背景 我将图像背景应用于所有 3 个 XAML 页面的网格 另外 我在应用程序包清单中将主题更改为 Light 但它没有执

  • 如何在多线程C++ 17程序中交换两个指针？

    我有两个指针 pA 和 pB 它们指向两个大的哈希映射对象 当pB指向的哈希图完全更新后 我想交换pB和pA 在C 17中 如何快速且线程安全地交换它们 原子 我是 c 17 的新手 2个指针的原子无等待交换可以通过以下方式实现 inclu

  • Firebase 身份验证在 iOS 登录时卡住，没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged

  • App Engine NDB：如何访问属性的 verbose_name

    假设我有这个代码 class A ndb Model prop ndb StringProperty verbose name Something m A m prop a string value 当然 现在如果我打印 m prop 它会

  • Ruby 动态变量名

    有没有办法在 Ruby 中创建具有动态名称的变量 我正在读取一个文件 当我找到一个字符串时 会生成一个哈希值 e g file File new games log r file lines do l l split do p if p 1

  • 使用pathlib获取主目录

    翻看新的pathlib在 Python 3 4 中 我注意到没有任何简单的方法来获取用户的主目录 我能想到的获取用户主目录的唯一方法是使用旧的os path像这样的库 import pathlib from os import path p

  • 如何找到 Maven 目标绑定的默认阶段？

    在 Maven 中 我如何找出目标的默认阶段 如果该特定目标存在任何默认阶段 Example 我正在使用一个名为的 Maven 插件Jetty Maven 插件 http wiki eclipse org Jetty Feature Jet

  • 在linux上安装python ssl模块，无需重新编译

    是否可以在已经安装了 OpenSSL 的 Linux 机器上安装 python 的 SSL 模块 而无需重新编译 python 我希望它就像复制几个文件并将它们包含在库路径中一样简单 Python版本是2 4 3 谢谢 是否可以在已经安装了

  • 用 Python 绘制直方图

    我有两个列表 x 和 y x 包含字母表 A Z Y 包含它们在文件中的频率 我尝试研究如何在直方图中绘制这些值 但在理解如何绘制它方面没有成功 n bins patches plt hist x 26 normed 1 facecolor

  • WPF DataGrid 验证/绑定模式错误

    我创建了一个非常简单的新项目 仅测试 Microsoft WPF DataGrid 行为 不涉及其他 我只使用标准的 DataGrid

  • MySQL“列计数与第 1 行的值计数不匹配”是什么意思

    这是我收到的消息 ER WRONG VALUE COUNT ON ROW 列计数与第 1 行的值计数不匹配 这是我的全部代码 我的错误在哪里 DROP TABLE student CREATE TABLE employee emp id I

  • 如何捕获未发送到 stdout 的命令行文本？

    我在项目中使用 LAME 命令行 mp3 编码器 我希望能够看到某人正在使用什么版本 如果我只执行 LAME exe 而不带参数 我会得到 例如 C LAME gt LAME exe LAME 32 bits version 3 98 2

  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array

  • 如何实现类似预编译指令的功能

    我正在开发一个 Angular 应用程序 建议对生产中运行的许多东西使用生成的代码 即模板缓存 表达式缓存和静态 DI 注入器 目前没有在不同构建配置之间切换的好方法 因此我使用推荐的模式here https github com angu

  • 英特尔的最后分支记录功能是英特尔处理器独有的吗？

    最后分支记录是指存储与最近执行的分支相关的源地址和目标地址的寄存器对 MSR 的集合 它们受英特尔酷睿 2 英特尔至强和英特尔凌动处理器系列的支持 http css csail mit edu 6 858 2012 readings ia3

  • 如何在 javascript 中基于类型字符串创建新对象？

    如何基于变量类型字符串 包含对象名称 在 javascript 中创建新对象 现在我有 随着更多工具的出现 列表会变得更长 function getTool name switch name case SelectTool return n

  • 在 Jetpack Compose 中启动动画矢量 Drawable

    我有一个动画矢量可绘制R drawable my anim 我想在 Jetpack Compose 中展示并开始 可绘制对象显示 渲染正确 但动画未启动 这是撰写视图 Composable fun SplashView Surface mo

热门标签