Animated Color Palette Generator in React Native

栏目: IT技术 · 发布时间: 4年前

内容简介:Inspired byWe’ll touch more on these later.This will be our base component for now. We will first add a button that’s a

Animated Color Palette Generator in React Native

Inspired by UIDesignDaily , I added some added polish to the idea of animating a color palette generator in React Native; including animations from the previous color to the next color, and animating the toast message when a color is selected.

Setup a Title and Button

We’ll touch more on these later.

npm install hex-to-hsl react-use-previous randomcolor 
// or 
yarn add hex-to-hsl react-use-previous randomcolor

This will be our base component for now. We will first add a button that’s a TouchableOpacity , as well as a title inside of our container.

We create some styles, the first is our container to tell it to take up our entire screen with a background color. Then we supply our title style, and our generate button style.

Animated Color Palette Generator in React Native

Create a Color Card Component

Next, we need to create our ColorCard . This will be a component that we use for rendering all of our colors. It needs to take two props, the first is the color prop and the second is the onPress allowing us to trigger the toast animation later when a user presses on the color card.

Because we need to handle a press we wrap in a TouchableOpacity . The outer wrap is set to 50% so that we can display two cards side by side. Then we take our color that we passed in and set it on an Animated.View so we can animate this color later.

Generate Random Colors

Now that we have a card to render we need to create some colors to actually render.

First, we set up a function to get a random color. This is just a helper function that will return a call to the randomcolor library. This can be adjusted based upon the styles of colors you want to generate.

Also, depending on how many you want to generate you can control by setting a differing amount on the state. Here I made a function called get5New that we can call at any time to get a new set of five colors.

In our app we’ll just bootstrap the initial state by calling our function and returning the first array of 5 colors.

Depending on the screen size, the height of our cards may not fit on the screen. So we will wrap it in a ScrollView . We set the outer to flex: 1 so that the ScrollView will take up the rest of the available space, and the button will take up the rest.

You can then have the button stay clickable, and all the colors scrollable.

Another key piece to this is setting our View wrapping our ColorCards to flexDirection: 'row' and also setting it to flexWrap: 'wrap' . This will then let each card render in a row two at a time then wrap others to the next line.

Now that we can update our colors, we can add an onPress to our button and update our colors state with a whole new set of 5 colors.

Animated Color Palette Generator in React Native

Animate the Color when Changed

In order to animate from one color to another, we need to keep track of what the previous color was. We can use the react-use-previous hook to pass in our color. Upon changing the prevColor will hold onto what our previous color was.

In order to render an initial color we will set our prevColor to the current color in the event we don't have one. Which we won't until the color changes once.

Then we can use the useLayoutEffect hook. This will allow us to update the animation state accordingly before the user can see it. This plays a key part in conjunction with our interpolate call below. We use the color prop as the hook dependency so that when the color changes our effect will re-run causing our animation to trigger.

The Animated.timing takes our animation value that we're interpolating off of and animates it to 1 over 1000ms

The interpolate will create a smooth transition from a 0 => 1 value but turned into colors. When the component re-renders with a new color we need to quickly shift the color rendered to 0 and transition it to 1 . The color will quickly swap when we call the setValue(0) in our useLayoutEffect . With our interpolate our inputRange goes from 0 to 1 and our outputRange are our 2 colors.

When a color changes the color the view is, quickly becomes the prevColor . The inputRange is set back to 0 . So we are still rendering the color the view was showing. Then our animation kicks off and animates to 1 which will be the actual current color supplied by props.

Converting from hex to hsl color format allows us to have smooth color animations from one color to the next without jumping around from color to color like rgb would.

This uses the hex-to-hsl library and then using destructuring we can grab each piece and return the necessary string.

Create a Toast

For a more reusable component, we first create an independent toast component. It receives the color and renders.

The toast component being its own independent component means we can wrap it and position it anywhere, as well as animate it however we want.

We’ll start by positioning the toast exactly where we want it to appear, and then can move it away with our animation. We’ll place it at the 50 points from the top and 20 from each side.

Animate a Toast Alert

To animate our toast we need to hold onto two pieces of state. The first being the color that was pressed, and then also the animated value to bring the toast into view.

We can set up a useEffect hook to watch for a color to be selected. Which we add as a dependency [selectedColor] to our hook.

If a color is selected we will trigger our animation.

For our toast, we will animate from 0 to 1 and use interpolate to move it in and out of view. At 0 which is the initial value, we will translate the toast off-screen -100 . So it will sit above the screen but out of view.

When animated to 1 the translateY will be 0 and the toast bar will sit at the spot we positioned it with no animation applied.

To trigger the animation we do need to use the onPress function prop and call the setSelectedColor function to update state.

For our animation we want the toast to appear, but not linger. So we want to hide eventually. To do this we can utilize the sequence functionality provided by Animated . We reset our animatedValue back to 0 so the toast is hidden. Then we trigger sequence to spring into place. We animate to 1 which our interpolate will go from -100 to 0 and our toast will appear.

Then we use delay to wait one second. Then we spring back to 0 .

Animated Color Palette Generator in React Native

Ending

Now we have a complete animated color palette generator. We went over Animated and how we can create sequences of animations to show, wait, and then hide an item. As well as how to use interpolate to leverage animated values to transition colors.

Animated Color Palette Generator in React Native


以上所述就是小编给大家介绍的《Animated Color Palette Generator in React Native》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深度学习

深度学习

[美]特伦斯·谢诺夫斯基(Terrence Sejnowski) / 姜悦兵 / 中信出版集团 / 2019-2 / 88

全球科技巨头纷纷拥抱深度学习,自动驾驶、AI医疗、语音识别、图像识别、智能翻译以及震惊世界的AlphaGo,背后都是深度学习在发挥神奇的作用。深度学习是人工智能从概念到繁荣得以实现的主流技术。经过深度学习训练的计算机,不再被动按照指令运转,而是像自然进化的生命那样,开始自主地从经验中学习。 本书作者特伦斯·谢诺夫斯基是全球人工智能十大科学家之一、深度学习先驱及奠基者,亲历了深度学习在20世纪......一起来看看 《深度学习》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具