时间戳

首页 > 解决方案 > 如何在 react-native 中动态地将不同的动画附加到图像上？

react-native - 如何在 react-native 中动态地将不同的动画附加到图像上？

问题描述

假设屏幕上有一个图像，当用户按下另一个图像（例如右箭头）时，第一个图像向右，当用户按下第三个图像（例如左箭头）时，第一个图像向左。

简而言之，左箭头应将火柴人向左移动，而右箭头应向右移动：

火柴人的左右箭头

根据文档，一个图像可以有多个动画（变换、缩放、不透明度变化等），但似乎所有这些动画都需要并行运行（同时）。

我的问题是关于从不相关的对象中自由调用函数来做到这一点。

标签： react-nativeanimation

解决方案

你可以只为你想要移动火柴人多少设置一个动画值。只需给棒子一个， style={{transform:[{translateX: this.stickManTranslateX}]}}然后你就可以让箭头使用 moveStickManLeft 函数让它向不同的方向移动。

    stickManTranslateX = new Animated.value(0);

    moveStickManLeft = toValue => {
         this.stickManTranslateX.setValue(toValue);
    }

推荐阅读