动画视图仅缩放屏幕宽度的一半

Posted 2023-02-19

【中文标题】动画视图仅缩放屏幕宽度的一半

【英文标题】：Animated View scaling only half of the screen width

【发布时间】：2020-12-19 09:28:42

【问题描述】：

Animated.View 仅缩放到提供的屏幕宽度的一半。 其次，为什么我必须在样式表中给出宽度才能使它起作用，以及给它长度 1 的具体原因是什么。 如果我将样式表中的宽度增加到 2，进度条会覆盖整个屏幕宽度

    import React from 'react'
    import  View, Animated, StyleSheet, Dimensions, Easing  from 'react-native'

export default class ProgressBar extends React.Component 
    state = 
        percent: new Animated.Value(0)
    

    componentDidMount() 
        this.startAnimation()
    

    startAnimation = () => 
        this.animation = Animated.timing(this.state.percent, 
            toValue: 100,
            duration: this.props.timeRemaining*1000,
            easing: Easing.linear,
            useNativeDriver: true,
        )

        this.animation.start()
    

    render() 
        return(
            <Animated.View 
                style=[
                    styles.bar,
                    transform: [
                        scaleX: this.state.percent.interpolate(
                            inputRange: [0, 100],
                            outputRange: [0, Dimensions.get('window').width]
                        )
                    ] 
                ]
            />

            // <View style=[styles.bar, width: Dimensions.get('window').width]/>
        )
    


const styles = StyleSheet.create(
    bar: 
        height: 30,
        width: 1,
        backgroundColor: 'tomato',
    
)

【参考方案1】：

正如我在Animated View scaling only half of the screen width 中所说，你的一半<Animated.View> 不在你的屏幕上，你看不到它。 使用 TranslateX 来解决它。 这对我有用：

import * as React from 'react';
import 
  Animated,
  Dimensions
 from 'react-native';

export default function () 
  const timer = new Animated.Value(0);
  const  width  = Dimensions.get("window");

  const startAnimation = () => 
    Animated.timing(timer, 
      duration: 2000,
      toValue: 1,
      useNativeDriver: true,
      isInteraction: false,
    ).start();
  ;

  React.useEffect(() => 
    startAnimation()
  , []);

  return (
    <Animated.View
      style=[
        
          width,
          height: 5,
          backgroundColor: 'blue',
          transform: [
            
              translateX: timer.interpolate(
                
                  inputRange: [0, 1],
                  outputRange: [-width / 2, 0],
                
              ),
            ,
            
         // you can use scaleX : timer if you don't need interpolation
              scaleX: timer.interpolate(
                
                  inputRange: [0, 1],
                  outputRange: [0, 1],
                
              ),
            ,
          ],
        ,
      ]
    />
  );

【讨论】：

从 [0,1] 插值到 [0,1] 的目的是什么？

正如我在***.com/questions/63667787/… 中所说：ScaleX 将数字乘以项目宽度。在这个例子中，我的项目宽度是 Dimensions.get("window").width，然后首先我的项目宽度将为 0，因为 scaleX 为 0 且 width * 0 = 0 ，并且随着动画的进行，我的比例编号增加（并且项目宽度增加 ) 直到达到 1 然后我的项目宽度将是：width * 1 = Dimensions.get("window").width

您的回答没有解决我的问题。无论如何，答案是从 [0,1] 插值到 [0,1] 没有意义

我认为我的两个答案都很清楚，并且我在最好的反应本机库之一中找到了我的 ***.com/questions/63667787/… 代码。但是如果您认为“从 [0, 1] 到 [0,1]" 你应该和他们最好的程序员谈谈 :) 无论如何，选择是你的

你的主要问题是：1.为什么 Animated.View 只缩放到屏幕宽度的一半 2.为什么我必须在样式表中给出宽度......我已经回答了这两个正确的。如果你想要一个解决你问题的代码，我已经搜索并测试了一些解决方案，这个是最好的之一。如果你感谢付出了这么多时间帮助你的人，这表明了礼貌。祝你好运