Создание полнофункциональной 3D-галереи изображений с помощью React VR

Чтобы добавить четыре компонента Button к нашей сцене, мы будем использовать родительский компонент пользовательского интерфейса, который мы добавим в качестве дочернего в index.vr.js позже. Перед написанием компонента пользовательского интерфейса, давайте создадим объект конфигурации, определяющий отношение между равноугольными изображениями, изображениями кнопок и самими кнопками. Для этого мы объявляем константу сразу после операторов импорта в файле index.vr.js :

 /* index.vr.js */ const Config = [ { key: 0, imageSrc: 'reactconf_00.jpg', buttonImageSrc: 'button-00.png', }, { key: 1, imageSrc: 'reactconf_01.jpg', buttonImageSrc: 'button-01.png', }, { key: 2, imageSrc: 'reactconf_02.jpg', buttonImageSrc: 'button-02.png', }, { key: 3, imageSrc: 'reactconf_03.jpg', buttonImageSrc: 'button-03.png', } ]; 

Компонент пользовательского интерфейса будет использовать значения, определенные в конфигурации, для обработки событий взгляда и щелчка:

 /* UI.js */ import React from 'react'; import { View, } from 'react-vr'; import Button from './Button'; class UI extends React.Component { constructor(props) { super(props); this.buttons = this.props.buttonConfig; } render () { const buttons = this.buttons.map((button) => <Button key={button.key} onClick={()=>{ this.props.onClick(button.key); }} src={button.buttonImageSrc} /> ); return ( <View style={{ flexDirection: 'row', flexWrap: 'wrap', transform: [ {rotateX: -12}, {translate: [-1.5, 0, -3]}, ], width: 3, }} > {buttons} </View> ); } }; export default UI; 

Чтобы установить источник изображения, мы используем значения конфигурации, которые мы уже добавили в файл index.vr.js . Мы также используем prop onClick для обработки события click, которое мы также добавим через несколько секунд в файл index.vr.js . Затем мы создаем столько кнопок, сколько определено в объекте конфигурации кнопок, чтобы добавить их позже в код JSX, который будет отображаться на сцене:

 /* UI.js */ const buttons = this.buttons.map((button) => <Button key={button.key} onClick={()=>{ this.props.onClick(button.key); }} src={button.buttonImageSrc} /> ); 

Теперь все, что нам нужно сделать, это добавить компонент пользовательского интерфейса в сцену, определенную в файле index.vr.js . Поэтому мы импортируем компонент пользовательского интерфейса сразу после импорта компонента Canvas:

 /* index.vr.js */ import UI from './components/UI'; 

Далее мы добавляем компонент <Canvas> на сцену:

 /* index.vr.js */ <View> <Canvas src={this.state.src} /> <UI buttonConfig={Config} onClick={(key)=>{ this.setState({src: Config[key].imageSrc}); }} /> </View> 

Проверяя этот код в браузере, вы заметите, что в данный момент щелчок не вызывает смену источника изображения. Чтобы прослушать обновленные реквизиты, нам нужно добавить еще одну функцию в компонент Canvas сразу после функции конструктора.

Если вас интересует жизненный цикл компонента React, вы можете прочитать о React.Component в документации по React .

 /* Canvas.js */ componentWillReceiveProps(nextProps) { this.setState({src: nextProps.src}); } 

Теперь проверка в браузере должна быть успешной, и нажатие на изображение кнопки должно изменить сферическое изображение.

через GIPHY

Добавить анимацию для переходов состояния кнопки

Чтобы сделать кнопки более восприимчивыми к пользовательским взаимодействиям, мы хотим добавить некоторые состояния при наведении и переходы между режимом по умолчанию и режимом наведения. Для этого мы будем использовать функции Animated library и Easing , а затем напишем в функции для каждого перехода: animateIn и animateOut :

 /* Button.js */ import React from 'react'; import { Animated, asset, Image, View, VrButton, } from 'react-vr'; const Easing = require('Easing'); class Button extends React.Component { constructor(props) { super(); this.state = { animatedTranslation: new Animated.Value(0), }; } animateIn = () => { Animated.timing( this.state.animatedTranslation, { toValue: 0.125, duration: 100, easing: Easing.in, } ).start(); } animateOut = () => { Animated.timing( this.state.animatedTranslation, { toValue: 0, duration: 100, easing: Easing.in, } ).start(); } onButtonClick = () => { this.props.onClick(); } render () { return ( <Animated.View style={{ alignItems: 'center', flexDirection: 'row', margin: 0.0125, transform: [ {translateZ: this.state.animatedTranslation}, ], width: 0.7, }} > <VrButton onClick={this.onButtonClick} onEnter={this.animateIn} onExit={this.animateOut} > <Image style={{ width: 0.7, height: 0.7, }} source={asset(this.props.src)} > </Image> </VrButton> </Animated.View> ); } }; export default Button; 

После добавления зависимостей мы определяем новое состояние для хранения значения перевода, которое мы хотим анимировать:

 /* Button js */ constructor(props) { super(); this.state = { animatedTranslation: new Animated.Value(0), }; } 

Далее мы определяем две анимации, каждая в отдельной функции, которые описывают анимацию, воспроизводимую, когда курсор входит в кнопку и когда курсор выходит из кнопки:

 /* Button.js */ animateIn = () => { Animated.timing( this.state.animatedTranslation, { toValue: 0.125, duration: 100, easing: Easing.in, } ).start(); } animateOut = () => { Animated.timing( this.state.animatedTranslation, { toValue: 0, duration: 100, easing: Easing.in, } ).start(); } 

 /* Button.js */ <Animated.View style={{ alignItems: 'center', flexDirection: 'row', margin: 0.0125, transform: [ {translateZ: this.state.animatedTranslation}, ], width: 0.7, }} > 

 /* Button.js */ <VrButton onClick={this.onButtonClick} onEnter={this.animateIn} onExit={this.animateOut} > 

 Web Server ├─ static_assets/ │ ├─ index.html ├─ index.bundle.js └─ client.bundle.js