Lottie를 사용하여 React Native에서 런타임시 애니메이션을 어떻게 토글합니까?

Question

사용자가 단추를 탭하여 항목을 "저장"하거나 "저장"을 제거할지 여부를 애니메이션으로 전환하는 저장 단추 (기본적으로 화면을 책갈피에 추가)를 만들려고합니다. 버튼을 가볍게 치는 것은 그것이 "on"애니메이션이든 "off"애니메이션이든 관계없이 애니메이션 중 하나를 호출해야합니다.

iOS 외에도 React Native의 버튼으로 애니메이션을 전환하는 데 대한 설명서는 없습니다. 어떤 아이디어라도 감사 할 것입니다.

는 다음 구성 요소의 :

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { 
    StyleSheet, 
    TouchableOpacity 
} from 'react-native'; 
import _ from 'lodash'; 

import { connect } from 'react-redux'; 
import { toggleSaved } from '../../actions'; 
import Animation from 'lottie-react-native'; 

import onAnimation from '../animations/heart_On.json'; 
import offAnimation from '../animations/heart_Off.json'; 

class SaveButton extends Component { 
    isSaved =() => { 
     let item = this.props.item; 
     if (_.find(this.props.saved, function(i) { return i.type == item.type && i.id == item.id; })) { 
      return true; 
     } else { 
      return false; 
     } 
    } 

    toggleSaved = (saved, item) => { 
     const { dispatch } = this.props; 
     dispatch(toggleSaved(saved, item)); 
     this.animation.play(); 
    } 

    render() { 
     return (
      <TouchableOpacity 
       onPress={() => this.toggleSaved(this.props.saved, this.props.item) } 
      > 
       <Animation 
        ref={ animation => { 
         this.animation = animation; 
        } } 
        style={ styles.icon } 
        loop={ false } 
        source={ this.isSaved() ? onAnimation: offAnimation } 
       /> 
      </TouchableOpacity> 
     ); 
    } 
} 

SaveButton.propTypes = { 
    dispatch: PropTypes.func.isRequired, 
    saved: PropTypes.array.isRequired, 
    item: PropTypes.object.isRequired 
}; 

const styles = StyleSheet.create({ 
    icon: { 
     width: 30, 
     height: 30, 
     marginTop: 5, 
     marginRight: 10 
    } 
}); 

function mapStateToProps(state) { 
    const { saved } = state.saved; 

    return { 
     saved 
    }; 
} 

export default connect(mapStateToProps)(SaveButton); 

Answer 1

난 당신이 두 개의 분리 된 애니메이션의 요소를 가지고 좋을 것 다음, 상태, 표시 또는 이에 따라 숨기기 (물론 .play())을에 따라 달라집니다. 그래서

(반 의사 코드는 아이디어를 얻을 수 있습니다) :

• 상태 소품 애니메이션이 무대에서 현재를 정의 isSaved,
이 저장 (또는 제거)와 같은 상태로 전환 올바른 애니메이션을 보여주고 this.refToCorrectAnimation.play()으로 전화하십시오.

---

constructor(props) { 
    super(props); 
    this.state = { 
    isSaved: false, 
    }; 
} 

isSavedVisible() { 
    return (this.state.isSaved) ? { display: 'flex' } : { display: 'none' }; 
} 

isRemovedVisible() { 
    return (!this.state.isSaved) ? { display: 'flex' } : { display: 'none' }; 
} 


toggleSaved(...) { 
    if (this.state.isSaved) { 
    this.isSavedAnimation.play(); 
    } else { 
    this.isRemovedAnimation.play(); 
} 

render() { 
    return (
    <TouchableOpacity onPress={() => this.toggleSaved()} ...> 
     <Animation style={this.isSavedVisible()} ref={(animation) = this.isSavedAnimation = animation} ... /> 
     <Animation style={this.isRemovedVisible()} ref={(animation) = this.isRemovedAnimation = animation} ... /> 
    </TouchableOpacity> 
) 
}