React Native Lottie - 动画结束时反转

2024-01-03

Context

我是lottie-react-native的新手,并且已经成功实现了我的第一个动画:

constructor(props) {
    super(props);
    this.state = {
        progress: new Animated.Value(0),
        loop: true
    }
}
componentDidMount() {
    this.animation.play();
}
render() {
const { progress, loop } = this.state;
return (
    <View style={{display:'flex',height:'auto', alignItems: 'center',justifyContent:'center'}}>
    <LottieView
    ref={animation => {
        this.animation = animation;
      }}
    speed={1}
    autoPlay
    source={NOACTIVITY}
    progress={progress}
    loop={loop}
    height={300}
    width={300}
    style={{margin:0,}}
  />
  </View>
)

}

问题

我现在尝试使用此动画创建一个循环,向前播放,然后向后播放,然后再次开始该过程。

我做了一些研究并得出结论,这必须使用动画值和时间来完成?我发现了很多例子(在 React Native 文档中! https://facebook.github.io/react-native/docs/animated)向前和向后播放但不能一起播放。

这可以在已安装的组件上完成吗?或者它必须是一个单独的函数?

提前致谢!


我想出的解决方案是在循环内使用序列,如下所示:

AnimateFunction = () => {
    Animated.loop(
        Animated.sequence([
            Animated.timing(
                this.state.progress,
                {
                  toValue: 1,
                  duration: (5000),
                  //easing: Easing.linear()
                }
              ),
              Animated.timing(
                this.state.progress,
                {
                  toValue: 0,
                  duration: (5000),
                  //easing: Easing.linear()
                }
              )
        ])

    ).start();
  }

我发现添加缓动会使应用程序在 0 处重新启动时动画跳跃一点,因此现在将其注释掉。

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

React Native Lottie - 动画结束时反转 的相关文章

随机推荐

  • FXML 文档的 Netbeans 8.2 自动完成始终显示“无建议”

    我第一次在 Netbeans 8 2 中创建 JavaFX 项目 FXML 文档的自动完成功能始终显示 无建议 例如 我见过类似的问题 例如Netbeans7 1 和 JavaFX 2 0 FXML 代码完成不起作用 https stack
  • Gradle 6.0 打破了源集依赖

    我在这里为学生收集了一些课程 https github com emign engineEmi Lektionen tree master https github com emign engineEmi Lektionen tree ma
  • 在左下角/右下角创建两个按钮

    JButton button1 new JButton Button 1 JButton button2 new JButton Button 2 JFrame frame new JFrame frame getContentPane s
  • 引用 github 存储库中的 .css 文件作为 .html 文件中的样式表

    我在 github 上有一个存储库 其中有一个 css 文件 有什么方法可以让 github 以我可以在网页中使用它的方式提供该文件吗 换句话说 我希望能够从本地计算机或实时域上的 HTML 文件直接引用 github 上的此源文件 就像是
  • Java 中的贪吃蛇游戏,但我的重启按钮不起作用

    我的游戏重启按钮不起作用 点击它时它会倍增 我不太了解 Java 我认为自己很好 游戏主要内容 package snake game public class snake public static void main String arg
  • 选择各种嵌套容器中的最后一个元素

    如何选择 CSS 中最后一个也是最深的元素 有没有办法改进这个CSS代码 对于深树 您提出什么解决方案 15 25 我避免使用 JavaScript 但 SASS 解决方案是受欢迎的 也许使用 for level 1 div case gt
  • Dispatcher.BeginInvoke 问题

    我收到此代码的 非静态字段 方法或属性 System Windows Threading Dispatcher BeginInvoke System Action 需要对象引用 private void ResponseCompleted
  • 使用 AutoCloseable 关闭多个资源(try-with-resources)

    我知道 如果资源实现了 AutoCloseable 则您尝试传递的资源将自动关闭 到目前为止 一切都很好 但是 当我有多个想要自动关闭的资源时 我该怎么办 套接字示例 try Socket socket new Socket input n
  • 命名空间对性能有害吗? (PHP)

    我对 php 框架进行了一些更改以支持名称空间 但结果并不符合预期 对于简单的测试 主要加载框架类 执行时间减慢了约 10 根据您的经验 在大型应用程序上使用命名空间是否值得 考虑PHP的实际开发水平 已接受的答案php 命名空间基准测试
  • AWS将elb的8000端口转发到EC2的8000端口

    我有一个 ELB 其中在目标组中注册了多个 EC2 实例 我正在使用一个运行正常的 php 应用程序端口 它有 SSL 我想将端口 8000 用于我的节点应用程序 我想做的是将 my elb address 8000 转发到 any ec2
  • 根据元组的值对Python中的元组进行排序[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下代码打印最常见的 10 个单词 但是 它不起作用 关于如何修复它有什么想法吗 def reducer count words self word counts send all num occu
  • 关于搜索引擎抓取我应该了解什么?

    我指的不是 SEO 的事情 我应该知道什么 例如 引擎运行 JavaScript 吗 他们使用cookies吗 cookie 是否会跨爬行会话进行 例如今天的 cookie 和下周或下个月的爬行 选定的 JS 过滤器是否因某种原因未加载 例
  • 请解释一下该程序中的逗号运算符

    请解释一下该程序的输出 int main int a b c d a 10 b 20 c a b d a b printf nC d c printf nD d d 我得到的输出是 C 10 D 20 我的疑问是 运算符在这里做什么 我使用
  • B 树与二叉树

    如果我使用 b 树实现内存 RAM 搜索操作 那么与二叉树相比 它在缓存或其他一些效果方面会更好吗 我所知道的是 binary search tress O log n btrees O c log n 各种博客上对此进行了很多讨论 Alg
  • Fluent Nhibernate - 选择特定列并使用分组进行计数查询

    我在流畅的 nhibernate 中执行查询时遇到一些问题 我有一个表 书籍 包含以下列 ID NAME YEAR BOOK TYPE AUTHOR ID 我想在 Fluent NHibernate 中执行以下 sql 查询 SELECT
  • 如何在 Android 手机图库中实用地获取图像的所有详细信息

    我正在尝试获取手机图库中图像可用的所有详细信息 特别是位置 当用户单击详细信息时 这些信息将会出现 所以请告诉我该怎么做 请参阅屏幕截图以更好地理解 提前致谢 你应该去Exif接口 http developer android com re
  • 使用逻辑运算符索引 numpy 数组

    我有一个 2d numpy 数组 例如 import numpy as np a1 np zeros 500 2 a1 0 np arange 0 500 a1 1 np arange 0 5 1000 2 could be also re
  • 将我的网站与 Google 日历集成

    我正在用 PHP 开发一个网站 该网站的用户可以从我提供的日历中进行预约 当用户进行预订时 应将其添加到我的谷歌日历中 对于这种情况 我需要什么样的身份验证机制 以下哪一项 1 网络应用程序 2 服务账户 3 安装的应用程序 注意 我不想访
  • Swift 3:获取 UIImage 中像素的颜色(更好:UIImageView)

    我尝试了不同的解决方案 例如this one https stackoverflow com questions 25146557 how do i get the color of a pixel in a uiimage with sw
  • React Native Lottie - 动画结束时反转

    Context 我是lottie react native的新手 并且已经成功实现了我的第一个动画 constructor props super props this state progress new Animated Value 0