Instagram应用程序登录时背景如何变化？

Posted 2023-04-18

【中文标题】Instagram应用程序登录时背景如何变化？

【英文标题】：How background changes at login in Instagram app?

【发布时间】：2016-08-12 02:47:38

【问题描述】：

我已让我的应用每隔几毫秒更改一次背景颜色。但它对用户没有吸引力。如果您看过 Instagram 的登录屏幕，它会以非常柔和的速度改变颜色并产生模糊效果。

我只是想要我的应用使用这种类型的背景。 我该怎么做呢

【参考方案1】：

使用以下代码可能是您的良好开端：

public class BackgroundPainter 

  private static final int MIN = 800;
  private static final int MAX = 1500;

  private final Random random;

  public BackgroundPainter() 
    random = new Random();
  

  public void animate(@NonNull final View target, @ColorInt final int color1,
      @ColorInt final int color2) 

    final ValueAnimator valueAnimator = ValueAnimator.ofObject(new ArgbEvaluator(), color1, color2);

    valueAnimator.setDuration(randInt(MIN, MAX));

    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() 
      @Override public void onAnimationUpdate(ValueAnimator animation) 
        target.setBackgroundColor((int) animation.getAnimatedValue());
      
    );
    valueAnimator.addListener(new AnimatorListenerAdapter() 
      @Override public void onAnimationEnd(Animator animation) 
        //reverse animation
        animate(target, color2, color1);
      
    );

    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    valueAnimator.start();
  

  private int randInt(int min, int max) 
    return random.nextInt((max - min) + 1) + min;
  

有用法：

final View targetView = findViewById(R.id.root_view);

BackgroundPainter backgroundPainter = new BackgroundPainter();

int color1 = ContextCompat.getColor(this, R.color.colorAccent);
int color2 = ContextCompat.getColor(this, R.color.colorPrimary);

backgroundPainter.animate(targetView, color1, color2);

---

更新

对于由一种以上颜色组成的更改背景，一般来说是drawables而不是ValueAnimator，您可以尝试使用以下解决方案。

我已经在使用 API 19 和 23 的设备上测试了这段代码。

在您的 colors.xml 中定义颜色：

  <color name="color1">#9C27B0</color>
  <color name="color2">#FF4081</color>
  <color name="color3">#7B1FA2</color>
  <color name="color4">#F8BBD0</color>
  <color name="color5">#FF5252</color>
  <color name="color6">#607D8B</color>
  <color name="color7">#FF5722</color>
  <color name="color8">#FFA000</color>

在drawable中定义渐变：

gradient_1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
      android:angle="45"
      android:endColor="@color/color2"
      android:startColor="@color/color1"
      android:type="linear"/>
</shape>

gradient_2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
      android:angle="-45"
      android:endColor="@color/color5"
      android:startColor="@color/color3"
      android:type="linear"/>
</shape>

gradient_3.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
      android:angle="45"
      android:endColor="@color/color8"
      android:startColor="@color/color7"
      android:type="linear"/>
</shape>

在您的项目中创建类GradientBackgroundPainter：

public class GradientBackgroundPainter 

  private static final int MIN = 4000;
  private static final int MAX = 5000;

  private final Random random;
  private final Handler handler;
  private final View target;
  private final int[] drawables;
  private final Context context;

  public GradientBackgroundPainter(@NonNull View target, int[] drawables) 
    this.target = target;
    this.drawables = drawables;
    random = new Random();
    handler = new Handler();
    context = target.getContext().getApplicationContext();
  

  private void animate(final int firstDrawable, int secondDrawable, final int duration) 
    if (secondDrawable >= drawables.length) 
      secondDrawable = 0;
    
    final Drawable first = ContextCompat.getDrawable(context, drawables[firstDrawable]);
    final Drawable second = ContextCompat.getDrawable(context, drawables[secondDrawable]);

    final TransitionDrawable transitionDrawable =
        new TransitionDrawable(new Drawable[]  first, second );

    target.setBackgroundDrawable(transitionDrawable);

    transitionDrawable.setCrossFadeEnabled(false);

    transitionDrawable.startTransition(duration);

    final int localSecondDrawable = secondDrawable;
    handler.postDelayed(new Runnable() 
      @Override public void run() 
        animate(localSecondDrawable, localSecondDrawable + 1, randInt(MIN, MAX));
      
    , duration);
  

  public void start() 
    final int duration = randInt(MIN, MAX);
    animate(0, 1, duration);
  

  public void stop() 
    handler.removeCallbacksAndMessages(null);
  

  private int randInt(int min, int max) 
    return random.nextInt((max - min) + 1) + min;
  

及用法：

public class MainActivity extends AppCompatActivity 

  private GradientBackgroundPainter gradientBackgroundPainter;

  @Override protected void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    View backgroundImage = findViewById(R.id.root_view);

    final int[] drawables = new int[3];
    drawables[0] = R.drawable.gradient_1;
    drawables[1] = R.drawable.gradient_2;
    drawables[2] = R.drawable.gradient_3;

    gradientBackgroundPainter = new GradientBackgroundPainter(backgroundImage, drawables);
    gradientBackgroundPainter.start();
  

  @Override protected void onDestroy() 
    super.onDestroy();
    gradientBackgroundPainter.stop();
  

【讨论】：

是的，它的工作原理非常相似。但它适用于两种颜色之间的动画。我需要在 10-15 种颜色之间制作动画。虽然它很光滑，但一次只出现一种颜色。在我的 Instagram 示例中，如果您注意到屏幕上一次有 2-3 种色调。这个答案很有帮助，但如果它解决了这些问题，那就太棒了。

@Swarnveer 我已经更新了我的回复，解决了多个项目之间的渐变动画

谢谢哥们，正是我想要的。我可以创建更多渐变并在 onCreate() 中提及那些以获得更多颜色组合，不是吗？ .

是的，你可以添加更多的渐变

@Alin 不要害羞使用它！

【参考方案2】：

您可以查看Property Animation Api

    int colorFrom = getResources().getColor(R.color.red);
int colorTo = getResources().getColor(R.color.blue);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.setDuration(250); // milliseconds
colorAnimation.addUpdateListener(new AnimatorUpdateListener() 

    @Override
    public void onAnimationUpdate(ValueAnimator animator) 
        textView.setBackgroundColor((int) animator.getAnimatedValue());
    

);
colorAnimation.start();

【讨论】：

你可以在 getColor() 中使用 Color.parseColor("#ff0000")

我在 colors.xml 文件中添加了红色和蓝色的值。现在背景中只显示蓝色。它不是动态变化的。

增加持续时间！！

【参考方案3】：

使用Relative layout， 给你的Relative layout 一个id，向下转换它，并放入条件：

if(something)
    rlayout.setBackground(getResource().getDrawable().R.drawable.img);
 
or    
use switch

【参考方案4】：

创建一个 TransitionDrawable 以在用于背景的两个可绘制对象之间进行切换。

<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<!-- use whatever drawables you want, gradients, shapes etc-->
<item android:drawable="@drawable/start" />
<item android:drawable="@drawable/end" />

Android 中的过渡 Drawables

TransitionDrawable trans = (TransitionDrawable) myLayout.getBackground();
trans.startTransition(2000);

我认为这个小代码可能会对你有所帮助。