Design by imrahelk

이쁜 대문 이미지를 만들어주신 **레이첼(imrahelk)**님 감사합니다. 아직 대문 이미지가 없으신 분은 "☆축환갑☆ 환갑기념 대문장이 리턴즈"에 이벤트 응모해보세요.

* * *

Lottie

Lottie는 Airbnb에서 출시한 애니메이션 라이브러리입니다. 아래 화면과 같은 아름다운 애니메이션 효과를 만들 수 있습니다.

하지만 애니메이션을 만들기 위해서는 Adobe After Effect로 애니메이션을 만들고, Bodymovin로 다시 JSON 파일을 만들어야 합니다.

맥OS 사용자라면, lottie Bodymovin 플러그인을 brew로 설치할 수 있습니다.

1 2	brew tap danielbayley/adobe brew cask install lottie

하지만 저는 설치하다가 오류가 발생하네요. ㅠㅠ
그리고 Adobe After Effect 로 애니메이션 만드는 방법도 잘 모르겠습니다.

Lottie Files

https://lottiefiles.com
그러나 Adobe After Effect를 할 줄 몰라도 괜찮습니다. LottieFiles 사이트에는 많은 디자이너들이 만든 애니메이션이 업로드되어 있습니다. 원하는 애니메이션을 검색하고 다운로드하세요. 그리고 모바일앱에 적용하면 됩니다.

저는 첫번째의 지갑에 동전 넣은 애니메이션이 마음에 드네요. ㅋ

Lottie로 애니메이션을 구현하고 싶었습니다. 하지만 Adobe After Effect 다루는게 익숙하지가 않네요.

* * *

React Native Animated API

React Native에서 제공하는 Animated API으로 애니메이션을 구현해보겠습니다. Animated API 사용 방법은 매우 간단합니다. React-Native API 문서를 참고하였습니다.

참고: https://facebook.github.io/react-native/docs/animations

아래와 같이 이미지가 뱅글뱅글 돌아가는 애니메이션을 만들어 봅니다. 이미지는 뉴비존님(newbijohn)께서 디자인해주셨습니다.

코드를 작성합니다.

import React, ｛ Component ｝ from 'react';
import ｛ Animated, Easing, StyleSheet, View ｝ from 'react-native';

export default class AuthLoadingScreen extends Component ｛
  constructor(props) ｛
    super(props);

    this.state = ｛
      spinValue: new Animated.Value(0),
    ｝
  ｝

  componentDidMount() ｛
    // 애니메이션을 설정한다.
    Animated.timing(
      this.state.spinValue,
      ｛
        toValue: 1,
        duration: 3000,
        easing: Easing.linear,
        useNativeDriver: true,
      ｝
    ).start()
  ｝

  render() ｛
    // 회전 애니매이션을 수행한다.
    const spin = this.state.spinValue.interpolate(｛
      inputRange: [0, 360],
      outputRange: ['0deg', '360deg'],
    ｝);

    return (
      <View style=｛styles.container｝>
        <Animated.Image
          style=｛｛transform: [｛rotate: spin｝] ｝｝
          source=｛require('../../assets/images/icon.png')｝ />
      </View>
    );
  ｝
｝

const styles = StyleSheet.create(｛
  container: ｛
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  ｝
｝);

회전값 Value 는 state의 spinValue에 맵핑됩니다. 그리고 Animated.timing 의 easing 함수를 사용하여 시간에 따른 애니메이션 효과를 보여줍니다.

위 코드를 적용하면 아래와 같이 보여집니다.

여기까지 읽어주셔서 감사합니다.

코딩, 독서, 여행, 영화, 맛집

[React Native] 인터렉티브한 애니메이션(Animations) 만들기

Lottie

Lottie Files

React Native Animated API