反应本机动画未按预期工作

Question

我有问题，需要一些帮助。我想创建带有移动的右箭头的按钮。但不幸的是，箭头从按钮本身的开头开始移动。我只想移动右侧的箭头。所以现在看起来像

我认为发生这种情况是因为动画受到按钮容器的影响！

所以到目前为止我的代码 -

      <TouchableOpacity
        style={{    
    position: "absolute",
    bottom: 40,
    paddingVertical: 10,
    paddingHorizontal: 15,
    justifyContent: "center",
    width: "40%",
    borderRadius: 20,
    flexDirection: "row",
    backgroundColor: "#a12f2f",
    alignItems: "center",
    textAlign: "center"
}}
        activeOpacity={0.9}
        onPress={() => onPressNext(count)}
      >
        <Text style={{   fontSize: 16,color: "white", marginRight: 10,}}>
          {count === 0 ? "Explain steps" : "Next step"}
        </Text>
        {count === 0 && (
          <Animatable.View
            animation={"slideInLeft"}
            iterationCount={"infinite"}
          >
            <VectorIconComponent
              size={20}
              name={"arrowright"}
              color={"white"}
              type={ICON_TYPES.AntDesign}
            />
          </Animatable.View>
        )}
      </TouchableOpacity>

我还使用 react-native-animatable 来创建该动画。所以我的问题是如何制作这个动画而不跨越文本？

Answer 1

试试这个！

import React, { useEffect } from 'react'
import { Animated, SafeAreaView, View, Text, TouchableOpacity, Image, Easing } from 'react-native'

export default function App() {

  const animatedValue = new Animated.Value(0)

  useEffect(() => {
    _start()
  }, [animatedValue])

  function _start() {
    const toValue = 35
    Animated.loop(
      Animated.timing(animatedValue, {
        toValue,
        duration: 1000,
        useNativeDriver: true
      })
    ).start()
  }

  function handlePress() {
    alert('ok')
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>

        <TouchableOpacity
          activeOpacity={0.75}
          style={{ position: 'absolute', bottom: 20, height: 60, width: 200, backgroundColor: 'tan', alignSelf: 'center', borderRadius: 20, flexDirection: 'row' }}
          onPress={handlePress}>

          <View style={{ height: 60, width: 140, alignItems: 'center', justifyContent: 'center', }}>
            <Text>
              Explain Steps
            </Text>
          </View>

          <View style={{ height: 60, width: 60, justifyContent: 'center', }}>
            <Animated.View
              style={{ height: 30, width: 30, transform: [{ translateX: animatedValue }] }}>
              <Image
                source={{ uri: 'https://cdn.iconscout.com/icon/free/png-256/right-arrow-1438234-1216195.png' }}
                style={{ height: '100%', width: '100%' }}
              />
            </Animated.View>
          </View>
        </TouchableOpacity>

      </View>
    </SafeAreaView>
  )
}

输出