# ComposeAnimatedSplash

**Repository Path**: ggbhack/compose-animated-splash

## Basic Information

- **Project Name**: ComposeAnimatedSplash
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-21
- **Last Updated**: 2023-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 创建项目+添加依赖
```kts
// 用于实现启动图标动画的库
implementation("androidx.core:core-splashscreen:1.0.1")
```
## 使用logo图标
1. 在drawable 新增需要的图标
2. 设置锚点居中
## 创建animator 对象动画
```xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    >
    <propertyValuesHolder
        android:propertyName="rotation"
        android:valueType="floatType"
        android:valueFrom="0.0"
        android:valueTo="360.0"
        />
    <propertyValuesHolder
        android:propertyName="scaleX"
        android:valueType="floatType"
        android:valueFrom="0.0"
        android:valueTo="0.4"
        />
    <propertyValuesHolder
        android:propertyName="scaleY"
        android:valueType="floatType"
        android:valueFrom="0.0"
        android:valueTo="0.4"
        />
</objectAnimator>
```
## 创建animated_victor 定义一个带动画效果的矢量图

```xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/sun">
    <!--@drawable/sun 属性指定了要应用动画的矢量图资源-->
    <target
        android:animation="@animator/logo_animator"
        android:name="animationGroup"/>
        <!--@animator/logo_animator 要应用的动画资源-->
        <!--animationGroup 属性指定了目标的名称-->

</animated-vector>
```
## 创建主题
```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--配置 Android 应用程序的启动主题和启动屏幕的相关属性。
    定义了一个名为 "Theme.App.Starting" 的主题，
    其父主题为 "Theme.SplashScreen"，表示这个主题是基于 "Theme.SplashScreen" 主题的
    -->
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <!--指定了启动屏幕的背景颜色为黑色。-->
        <item name="windowSplashScreenBackground">@color/black</item>
        <!--指定了启动屏幕消失后所应用的主题为 "Theme.AnimatedSplashScreen"。
        这意味着在启动屏幕结束后，应用程序将切换到 "Theme.AnimatedSplashScreen" 主题。-->
        <item name="postSplashScreenTheme">@style/Theme.AnimatedSplashScreen</item>
        <!--指定了启动屏幕上显示的动画图标为名为 "sun" 的可绘制资源。
        @drawable/sun 是一个引用可绘制资源的方式-->
        <item name="android:windowSplashScreenAnimatedIcon">@drawable/animated_logo</item>
    </style>
</resources>
```
## 使用主题
```xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.App.Starting"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.App.Starting">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
```
## 初始化splash
```kotlin

installSplashScreen().apply {
    setKeepOnScreenCondition {
        !viewModel.isReady.value
    }
 
}


// viewModel
class MainViewModel:ViewModel() {
    private val _isReady = MutableStateFlow(false)

    val isReady = _isReady.asStateFlow()

    init {
        viewModelScope.launch {
            delay(3000L)
            _isReady.value = true
        }
    }
}
```
## 设置splash退出的动画
```kotlin
setOnExitAnimationListener { screen ->
    val zoomX = ObjectAnimator.ofFloat(
        screen.iconView,
        View.SCALE_X,
        0.4f,
        0.0f
    )
    zoomX.interpolator = OvershootInterpolator()
    zoomX.duration = 500L
    zoomX.doOnEnd {
        screen.remove()
    }
    val zoomY = ObjectAnimator.ofFloat(
        screen.iconView,
        View.SCALE_Y,
        0.4f,
        0.0f
    )
    zoomY.interpolator = OvershootInterpolator()
    zoomY.duration = 500L
    zoomY.doOnEnd {
        screen.remove()
    }

    zoomX.start()
    zoomY.start()
}
```