react-native 动画的简单使用

最新推荐文章于 2024-04-29 17:54:33 发布

DOM曼珠沙华

最新推荐文章于 2024-04-29 17:54:33 发布

阅读量656

点赞数 10

文章标签： react native javascript

本文链接：https://blog.csdn.net/a18792627168/article/details/135614178

版权

import { Animated, StyleSheet, Text, View } from "react-native";
import React, { useEffect, useState } from "react";


let translateX;
let width = null
let tranx = null
export default function TestCom() {

  // const [widthAni,setWidthAni] = useState(new Animated.Value(0))

  // let translateY

  const animation = new Animated.Value(0);
  

  Animated.timing(animation, {
    toValue: 1,
    duration: 1000,
    useNativeDriver: false,
  }).start();

  width = animation.interpolate({
    inputRange:[0,1],
    
    outputRange:[260,60]
  })

  tranx = animation.interpolate({
    inputRange:[0,1],
    
    outputRange:[20,260]
  })




  useEffect(() => {
    // initAni()

  }, []);

  return (
    <View>
      <Text>Test</Text>

      <Animated.View style={[styles.box,{ transform: [{translateX:tranx}], width }]}></Animated.View>


    </View>
  );
}

const styles = StyleSheet.create({

  box: {
    height: 60,
    borderRadius: 30,
    backgroundColor: "#deb",
    marginTop: 50,
  },
});