📜  如何在 Android 中使用 Spark 库创建类似 Instagram 的渐变动画?

📅  最后修改于: 2022-05-13 01:54:50.294000             🧑  作者: Mango

如何在 Android 中使用 Spark 库创建类似 Instagram 的渐变动画?

在本文中,我们将实现 Spark 库。在这里,我们将展示一个动画,它将线性改变活动的颜色。此功能可以简单地用于在用户加载活动时显示动画,或者也可以用于在启动屏幕上显示动画。让我们看看这个功能的实现。下面给出了一个示例 GIF,以了解我们将在本文中做什么。请注意,我们将使用Java语言来实现这个项目。

分步实施

第 1 步:创建一个新项目

要在 Android Studio 中创建新项目,请参阅如何在 Android Studio 中创建/启动新项目。请注意,选择Java作为编程语言。

第二步:添加依赖



导航到Gradle Scripts > build.gradle(Module:app)并在依赖项部分添加以下依赖项。

步骤 3:使用 activity_main.xml 文件

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件中。下面是activity_main.xml文件的代码。

XML




Java
package com.example.drawable;
  
import android.os.Bundle;
import android.widget.RelativeLayout;
  
import androidx.appcompat.app.AppCompatActivity;
  
import io.github.tonnyl.spark.Spark;
  
public class MainActivity extends AppCompatActivity {
  
    Spark spark;
    RelativeLayout layout;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        layout = findViewById(R.id.relativel);
  
        spark = new Spark.Builder()
                .setView(layout)   // set the layout of main screen
                .setDuration(5000) // set duration
                .setAnimList(Spark.ANIM_BLUE_PURPLE)  // set the color to change
                .build();  // build the layout
    }
  
    @Override
    protected void onResume() {
        super.onResume();
        spark.startAnimation(); // start animation on resume
    }
  
    @Override
    protected void onPause() {
        super.onPause();
        spark.stopAnimation(); // stop animation on pause
    }
}


第 4 步:使用MainActivity。 Java文件

转到主活动。 Java文件,参考如下代码。下面是MainActivity的代码。 Java文件。代码中添加了注释以更详细地理解代码。

Java

package com.example.drawable;
  
import android.os.Bundle;
import android.widget.RelativeLayout;
  
import androidx.appcompat.app.AppCompatActivity;
  
import io.github.tonnyl.spark.Spark;
  
public class MainActivity extends AppCompatActivity {
  
    Spark spark;
    RelativeLayout layout;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        layout = findViewById(R.id.relativel);
  
        spark = new Spark.Builder()
                .setView(layout)   // set the layout of main screen
                .setDuration(5000) // set duration
                .setAnimList(Spark.ANIM_BLUE_PURPLE)  // set the color to change
                .build();  // build the layout
    }
  
    @Override
    protected void onResume() {
        super.onResume();
        spark.startAnimation(); // start animation on resume
    }
  
    @Override
    protected void onPause() {
        super.onPause();
        spark.stopAnimation(); // stop animation on pause
    }
}

输出: