애니메이션

animation 성능 향상 (requestAnimationFrame)

reflow, repaint로 인한 성능저하를 막기 위해서 GPU를 사용하여 애니메이션을 작업하는 것이 좋다. GPU를 사용하는 편이 더 부드러운 애니메이션을 보여줄 수 있기 때문이다. (CPU보다 더 많은 core를 가지기에 단순 작업에 적합하다 / GPU의 하드웨어 가속 기능) 그 방법중 하나인 requestAnimationFrame 메서드에 대해서 알아보았다. 원이 좌우로 이동하는 requestAnimationFrame 예제이다. https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame Window: requestAnimationFrame() method - Web API | MDN 화면에 애니메이션을 업데이트할 준비가 될..

React Native의 Animated 사용하기

React Native에서 애니메이션 효과를 구현하기 위해서는 Animated를 사용한다. 사각형의 View가 이동하는 애니메이션을 만들었다. import React from 'react'; import { Animated, SafeAreaView, View, Text, StyleSheet, Button, } from 'react-native'; function AnimatedTest() { const viewSize = new Animated.ValueXY(0, 0); const handleAnimated = () => { Animated.spring(viewSize, { toValue: {x: 150, y: 350}, useNativeDriver: false, }).start(); }; return ..