Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize the Animation effect of Color gradient by Android

2025-03-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize the color gradient animation effect by Android". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Android how to achieve color gradient animation effect" bar!

Effect picture:

1. Interpolator TypeEvaluator in Android

TypeEvaluator is an interface, which can be customized in development, and the setEvaluator (TypeEvaluator) method of ValueAnimator is used to control the updated calculation expression of the animation. In daily development, you can't just manipulate the change of a single numerical value. If you need to manipulate multiple properties of an object at the same time, such as defining the coordinates of an animated XMagy movement, you need to know something about TypeEvaluator.

Second, the case effect is realized. 1. Use the color interpolator ArgbEvaluatorValueAnimator colorAnim = ObjectAnimator.ofInt (this, "backgroundColor", RED, BLUE); colorAnim.setDuration (4000); colorAnim.setEvaluator (new ArgbEvaluator ()); colorAnim.setRepeatCount (ValueAnimator.INFINITE); colorAnim.setRepeatMode (ValueAnimator.REVERSE); colorAnim.start (); 2. Take a look at the ArgbEvaluator core code @ Override public Object evaluate (float fraction, Object startValue, Object endValue) {int startInt = (Integer) startValue; float startA = (startInt > > 24) & 0xff) / 255.0f; float startR = (startInt > > 16) & 0xff) / 255.0f; float startG = ((startInt > > 8) & 0xff) / 255.0f Float startB = (startInt & 0xff) / 255.0f; int endInt = (Integer) endValue; float endA = (endInt > > 24) & 0xff) / 255.0f; float endR = (endInt > > 16) & 0xff) / 255.0f; float endG = ((endInt > > 8) & 0xff) / 255.0f; float endB = (endInt & 0xff) / 255.0f / / convert sRGB to linear startR = (float) Math.pow (startR, 2.2); startG = (float) Math.pow (startG, 2.2); startB = (float) Math.pow (startB, 2.2); endR = (float) Math.pow (endR, 2.2); endG = (float) Math.pow (endG, 2.2) EndB = (float) Math.pow (endB, 2.2); / / calculate the interpolated color float a = startA + fraction * (endA-startA) in linear space; float r = startR + fraction * (endR-startR); float g = startG + fraction * (endG-startG); float b = startB + fraction * (endB-startB) / / convert back to sRGB in the range of [0.255] a = a * 255.0f; r = (float) Math.pow (r, 1.0 / 2.2) * 255.0f; g = (float) Math.pow (g, 1.0 / 2.2) * 255.0f; b = (float) Math.pow (b, 1.0 / 2.2) * 255.0f Return Math.round (a) > 24-startValue > > 24) * fraction); / / calculate the color value if (endHsv [0]-startHsv [0] > 180) corresponding to the current animation completion (fraction) {endHsv [0]-= 360;} else if (endHsv [0]-startHsv [0])

< -180) { endHsv[0] += 360; } outHsv[0] = startHsv[0] + (endHsv[0] - startHsv[0]) * fraction; if (outHsv[0] >

{outHsv [0]-= 360;} else if (outHsv [0]

< 0) { outHsv[0] += 360; } outHsv[1]=startHsv[1]+(endHsv[1]-startHsv[1])*fraction; outHsv[2]=startHsv[2]+(endHsv[2]-startHsv[2])*fraction; return Color.HSVToColor(alpha,outHsv); }4.使用自己定义的颜色插值器MyColorEvaluatorValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE); colorAnim.setDuration(4000); colorAnim.setEvaluator(new MyColorEvaluator()); colorAnim.setRepeatCount(ValueAnimator.INFINITE); colorAnim.setRepeatMode(ValueAnimator.REVERSE); colorAnim.start();三、源码 ColorGradient.java: public class ColorGradient extends View { public ColorGradient(Context context) { super(context); } public ColorGradient(Context context, @Nullable AttributeSet attrs) { super(context, attrs); animation(); } public ColorGradient(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } private void animation(){ ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE); colorAnim.setDuration(4000); colorAnim.setEvaluator(new MyColorEvaluator()); colorAnim.setRepeatCount(ValueAnimator.INFINITE); colorAnim.setRepeatMode(ValueAnimator.REVERSE); colorAnim.start(); } } MyColorEvaluator.java: public class MyColorEvaluator implements TypeEvaluator { float[] startHsv=new float[3]; float[] endHsv=new float[3]; float[] outHsv=new float[3]; @Override public Integer evaluate(float fraction, Integer startValue, Integer endValue) { Color.colorToHSV(startValue,startHsv); Color.colorToHSV(endValue,endHsv); int alpha = startValue >

> 24 + (int) ((endValue > 24-startValue > 24) * fraction); / / calculate the color value if (endHsv [0]-startHsv [0] > 180) corresponding to the current animation completion (fraction) {endHsv [0]-= 360;} else if (endHsv [0]-startHsv [0])

< -180) { endHsv[0] += 360; } outHsv[0] = startHsv[0] + (endHsv[0] - startHsv[0]) * fraction; if (outHsv[0] >

OutHsv [0]-= 360;} else if (outHsv [0] < 0) {outHsv [0] + = 360;} outHsv [1] = startHsv [1] + (endHsv [1]-startHsv [1]) * fraction; outHsv [2] = startHsv [2] + (endHsv [2]-startHsv [2]) * fraction; return Color.HSVToColor (alpha,outHsv) }} at this point, I believe you have a deeper understanding of "how to achieve color gradient animation effects in Android". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report