React Native animacje - translateX i translateY podczas skalowania

Question

My Animated.View posiada następujące style:

{ 
     transform: [ 
      { 
       scale: this.animatedValue.interpolate({ 
        inputRange: [0, 1], 
        outputRange: [initialScale, 1] 
      })}, 
      { 
       translateX: this.animatedValue.interpolate({ 
        inputRange: [0, 1], 
        outputRange: [startX, endX] 
      })}, 
      { 
       translateY: this.animatedValue.interpolate({ 
        inputRange: [0, 1], 
        outputRange: [startY, endY] 
      })}, 
     ] 
    } 

Kiedy initialScale jest 1 i rozpoczyna się animacja, widzę oczekiwane zachowanie: Animated.View rozpoczyna się (startx, startY) i liniowo przesuwa się do (endX, endY).
Jednak, gdy początkowa wartość skali to 0,5, punktem początkowym widoku nie jest (startX, startY), ruch nie jest liniowy (nieco sferyczny), a punkt końcowy jest nadal zgodny z oczekiwaniami - (endX, endY).

Jak skalować widok, zachowując ruch liniowy i oczekiwaną pozycję początkową?

Answer 1

Podobnie jak użytkownik @ArneHugo wskazany w komentarzach, ruch nieliniowy można rozwiązać, umieszczając pełnowymiarowy element kontenera i skalując inny element w nim.

Pozycja elementu nie jest zgodna z oczekiwaniami, ponieważ punkt początkowy przekształcenia skali jest punktem środkowym elementu. React Native nie (jeszcze) wsparcie określający pochodzenie przekształcenia, ale jeśli szerokość i wysokość skalowany elementem są znane z góry, to łatwo obliczyć przesunięcie następująco:

const width = 100; 
const height = 20; 
const scale = { 
    transform: [ 
    { 
     scale: this.animatedValue.interpolate({ 
     inputRange: [0, 1], 
     outputRange: [initialScale, 1] 
     }) 
    } 
    ] 
}; 

const position= { 
    transform: [ 
    { 
     translateX: this.animatedValue.interpolate({ 
     inputRange: [0, 1], 
     outputRange: [startX - (width/2) - (width * initialScale/2), endX] 
     }) 
    }, 
    { 
     translateY: this.animatedValue.interpolate({ 
     inputRange: [0, 1], 
     outputRange: [startY - (height/2) - (height * initialScale/2), endY] 
     }) 
    } 
    ] 
}; 

return (
    <Animated.View style={position}> 
    <Animated.View style={[styles.thing, scale]} /> 
    </Animated.View> 
);