search

vydimitrov / react-countdown-circle-timer

Lightweight React/React Native countdown timer component with color and progress animation based on SVG
MIT License
692 stars 87 forks source link

Change to Next Color without making a transition #133

Closed BrnPer closed 3 years ago

BrnPer commented 3 years ago

Hello everyone!

I think it would be awesome to have an option that would allow to change the color without making a transition between colors. Sometimes the in between colors in a transition are not very readable. So I would like just to change the color without making a transition.

I hope that I could explain myself in a easy way. Sorry for my bad english 😅 Thanks in advance!

vydimitrov commented 3 years ago

Hey @BrnPer, this is quite possible with the current API. Please refer to this demo

BrnPer commented 3 years ago

Hi @vydimitrov yeah that was exactly what I was looking for 👍 But to me honest I don't understand why this is working 😕 Thanks in advance!

vydimitrov commented 3 years ago

May be reading the props for the colors prop may help you. But in essence:

 ["#004777", 0.329] // it will take 0.329 of the total time to transition to the next color
 ["#004777", 0.001] // the next color is the same as the previous one so no transition. Also it will take 0.001 of the total duration to transition to the next color. Since the time is very short you do not get to see the transition so the next color starts right the way
 ["#F7B801", 0.329] // the same goes as the first one
BrnPer commented 3 years ago

Ohhhh I get it know! Thank you for your precious help! And awesome work in this package!