3D Animations on View with React Native

Asked
Active3 hr before
Viewed126 times

7 Answers

nativereact
90%

We can use transform and Interpolate to make 3D rotate Animation. ,Use Animated api for these transformations.,If you want to use transform around a certain point. Can try this.

We can use transform and Interpolate to make 3D rotate Animation.

class RotateAnimation extends React.Component {
  _rotateValue = new Animated.Value(0);
  startAnimated = () => {
    Animated.timing(this._rotateValue, {
      toValue: 360,
      duration: 800, 
      useNativeDriver: true 
    }).start()
  }

  getTransform = () => {
    const rotate = this._rotateValue.interpolate({
      inputRange: [0, 180, 360], 
      outputRange: ['0deg', '180deg', '360deg'], 
      extrapolate: 'clamp',
    }) 
    if (this.props.horizontal) {
      return {
        transform: {
          perspective: WINDOW_WIDTH, 
          rotateX: rotate
        }
      }
    }

    return {
      transform: {
        perspective: WINDOW_WIDTH, 
        rotateY: rotate
      }
    }
  }

  render() {
    return  (<Animated.View style={[style, ]} />
      {this.props.children}
    </Animated.View>)
  }
}

load more v
88%

Creating realistic inertial scrolling — after the user stops scrolling, the cards should continue scrolling with a certain velocity that is proportional to the gesture velocity (like a ScrollView).,The cards must continue to scroll after the gesture is released, at a speed that is proportional to the original speed. This is ‘inertial scrolling’.,It must snap, or spring, to a certain card after the inertial scroll is complete.

To find the value closest to the bottom, we simply iterate over this.bottoms, and find the one with a value closest to 0 (regardless of whether it’s negative or positive). We do this with:

const yOffset = this.bottoms.reduce((prevVal, x) => Math.abs(x.__getValue()) < Math.abs(prevVal) ? x.__getValue() : prevVal, Infinity);

Finally, we animate this.translateY to spring to this yOffset, keeping the bottom padding in mind:

Animated.spring(this.translateY, {
   toValue: yOffset - this.bottomPadding,
   duration: 100,
   friction: 5
})
load more v
72%

I love your 'can it be done in react native' videos, thanks!,Nice job! I wish I had seen this video a few months back when I was teaching myself reanimated + RNGH and building similar animations like this,Can someone please link me to what do I have to learn with math to understand this stuff like I understand the code part?

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Animated exports six animatable component types: View, Text, Image, ScrollView, FlatList and SectionList, but you can also create your own using Animated.createAnimatedComponent().,The BasicsIntroductionCore Components and Native ComponentsReact FundamentalsHandling Text InputUsing a ScrollViewUsing List ViewsTroubleshootingPlatform Specific CodeMore Resources,interpolate() also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:

Animated.timing(this.state.xPosition, {
   toValue: 100,
   easing: Easing.back(),
   duration: 2000
}).start();
load more v
75%

If you know another's animation libraries, comment here! All the best!, Declarative transitions and animations , work Senior React Native Developer at GO.K One Step Ahead

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Display, rotate, scale and translate textured 3D models!,A <ModelView> component for react-native, allowing you to display and animate any Wavefront .OBJ 3D object. Realized with a native bridge to GLView for iOS and a native bridge to jPCT-AE for Android.,Using an online model and texture

Since React Native 0.60 and higher, autolinking makes the installation process much simpler.

$ yarn add react - native - gl - model - view

# Update your pods(iOS)
$ cd ios
$ pod install
load more v
22%

View for displaying .obj, .dae or .scn in augmented reality (iOS devices with A9 or later processors only).,A React Native view for displaying .obj, .dae and .scn models either on screen or in AR (iOS devices with A9 or later processors only).,The entire Android implementation is made by andresoviedo. I have only ported his Android 3D Model Viewer repo to React Native.

import ModelView from 'react-native-3d-model-view'

<ModelView
  source={{ zip: 'https://github.com/BonnierNews/react-native-3d-model-view/blob/master/example/obj/Hamburger.zip?raw=true' }}
  onLoadModelStart={this.onLoadModelStart}
  onLoadModelSuccess={this.onLoadModelSuccess}
  onLoadModelError={this.onLoadModelError} />
load more v

Other "native-react" queries related to "3D Animations on View with React Native"