公司网站的设计风格大多是/百度sem

公司网站的设计风格大多是,百度sem,北京代办执照注册公司,移动网站与pc网站深入剖析 Android Compose 框架的自动动画：AnimatedVisibility 与 AnimatedContent 引言 在 Android 应用开发中，动画是提升用户体验的重要手段。它能够让界面元素的显示与隐藏、状态的切换变得更加自然和流畅，避免生硬的变化给用户带来不佳…

深入剖析 Android Compose 框架的自动动画：AnimatedVisibility 与 AnimatedContent

引言

在 Android 应用开发中，动画是提升用户体验的重要手段。它能够让界面元素的显示与隐藏、状态的切换变得更加自然和流畅，避免生硬的变化给用户带来不佳的感受。Android Compose 作为新一代的 Android UI 工具包，为开发者提供了强大而便捷的动画支持，其中 AnimatedVisibility 和 AnimatedContent 这两个组件是实现自动动画的关键部分。

AnimatedVisibility 主要用于实现元素的显示与隐藏动画，开发者只需控制元素的可见性状态，Compose 会自动为其添加过渡动画。而 AnimatedContent 则专注于内容的动态变化动画，当内容发生改变时，能够平滑地过渡到新的内容。

本文将从源码级别深入分析 AnimatedVisibility 和 AnimatedContent 这两个组件，详细解读它们的实现原理、使用方法以及如何进行性能优化，帮助开发者更好地掌握 Android Compose 中的自动动画技术。

一、Android Compose 自动动画概述

1.1 自动动画在 Android 开发中的重要性

在现代 Android 应用中，用户对于界面的交互体验要求越来越高。自动动画能够为应用带来以下优势：

  • 提升用户体验：通过自然流畅的动画效果，让用户在操作界面时感受到更加舒适和愉悦，增强用户对应用的好感度。例如，在显示或隐藏一个菜单时，使用动画过渡可以避免界面的突然变化，让用户更容易理解操作的结果。
  • 增强界面的可读性：动画可以引导用户的注意力，使重要的信息更加突出。比如，在更新界面内容时，使用动画过渡可以让用户更清晰地看到哪些内容发生了变化。
  • 提高应用的专业性：精美的动画效果能够让应用看起来更加专业和高端，与竞争对手形成差异化。

1.2 Android Compose 中的自动动画特性

Android Compose 为自动动画提供了一系列简洁而强大的 API，具有以下特性：

  • 声明式编程：与传统的 Android 动画开发方式相比，Compose 采用声明式编程模型，开发者只需描述动画的起始和结束状态，Compose 会自动处理中间的过渡过程，大大简化了动画的实现。
  • 高性能：Compose 对动画进行了优化，能够高效地利用系统资源，确保动画的流畅性。它采用智能的重组机制，只有当动画相关的状态发生变化时，才会重新计算和绘制界面。
  • 可组合性：Compose 的动画组件可以轻松地与其他组件组合使用，开发者可以根据需要创建复杂的动画效果。

1.3 AnimatedVisibility 和 AnimatedContent 的基本概念

  • AnimatedVisibility：该组件用于控制元素的可见性，并在元素显示或隐藏时添加动画效果。开发者可以通过设置 visible 参数来控制元素的可见性，Compose 会自动应用预设的动画或自定义动画。

  • AnimatedContent：这个组件用于在内容发生变化时添加动画过渡。当传递给 AnimatedContent 的内容发生改变时，它会平滑地过渡到新的内容，而不是直接替换。

下面是一个简单的 AnimatedVisibility 示例：

kotlin

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*@OptIn(ExperimentalAnimationApi::class)
@Composable
fun SimpleAnimatedVisibilityExample() {// 定义一个可变状态，用于控制元素的可见性var isVisible by remember { mutableStateOf(false) }// 创建一个按钮，点击时切换元素的可见性Button(onClick = { isVisible = !isVisible }) {Text(text = if (isVisible) "Hide" else "Show")}// 使用 AnimatedVisibility 组件，根据 isVisible 的值控制元素的显示与隐藏，并添加淡入淡出动画AnimatedVisibility(visible = isVisible,enter = fadeIn(),  // 元素显示时的动画exit = fadeOut()   // 元素隐藏时的动画) {Text(text = "This is a visible text.")}
}

在这个示例中，我们通过一个按钮来控制 Text 组件的可见性。当点击按钮时，isVisible 的值会发生变化，AnimatedVisibility 会根据这个值决定是否显示 Text 组件，并应用相应的淡入淡出动画。

二、AnimatedVisibility 源码分析

2.1 AnimatedVisibility 的基本定义与结构

AnimatedVisibility 是一个 Composable 函数，其定义如下：

kotlin

@ExperimentalAnimationApi
@Composable
fun AnimatedVisibility(visible: Boolean,  // 控制元素的可见性modifier: Modifier = Modifier,  // 修饰符，用于设置组件的布局和样式enter: EnterTransition = fadeIn() + expandVertically(),  // 元素显示时的动画exit: ExitTransition = fadeOut() + shrinkVertically(),  // 元素隐藏时的动画initiallyVisible: Boolean = visible,  // 初始可见性content: @Composable () -> Unit  // 要显示的内容
) {// 内部实现逻辑val transition = updateTransition(targetState = visible, label = "AnimatedVisibility")transition.AnimatedVisibilityScope(modifier = modifier,enter = enter,exit = exit,initiallyVisible = initiallyVisible,content = content)
}

从代码中可以看出，AnimatedVisibility 接受多个参数：

  • visible：一个布尔值，用于控制元素的可见性。

  • modifier：用于设置组件的布局和样式。

  • enter：元素显示时的动画，默认为淡入和垂直展开动画。

  • exit：元素隐藏时的动画，默认为淡出和垂直收缩动画。

  • initiallyVisible：初始可见性，默认为 visible 的值。

  • content：要显示的内容，是一个 Composable 函数。

在函数内部，首先调用 updateTransition 函数创建一个 Transition 对象，用于管理动画的过渡状态。然后调用 AnimatedVisibilityScope 函数，将过渡状态、动画和内容传递给它。

2.2 updateTransition 函数源码解读

updateTransition 函数用于创建一个 Transition 对象，其源码如下：

kotlin

@Composable
fun <T> updateTransition(targetState: T,  // 目标状态label: String = "Transition"  // 过渡的标签，用于调试
): Transition<T> {// 创建一个可变状态，用于存储当前状态val transitionState = remember { MutableTransitionState(targetState) }// 更新当前状态为目标状态transitionState.targetState = targetState// 返回一个 Transition 对象return remember(transitionState) {Transition(transitionState = transitionState,label = label)}
}

updateTransition 函数接受两个参数：

  • targetState：目标状态，即动画要过渡到的状态。

  • label：过渡的标签，用于调试目的。

在函数内部，首先使用 remember 函数创建一个 MutableTransitionState 对象，用于存储当前状态。然后将目标状态赋值给 targetState 属性。最后，使用 remember 函数创建一个 Transition 对象，并返回它。

2.3 AnimatedVisibilityScope 函数源码分析

AnimatedVisibilityScope 函数用于处理元素的显示与隐藏动画，其源码如下：

kotlin

@ExperimentalAnimationApi
@Composable
fun Transition<Boolean>.AnimatedVisibilityScope(modifier: Modifier = Modifier,enter: EnterTransition = fadeIn() + expandVertically(),exit: ExitTransition = fadeOut() + shrinkVertically(),initiallyVisible: Boolean = currentState,content: @Composable () -> Unit
) {// 根据当前状态和初始可见性计算是否需要执行动画val shouldAnimate = initiallyVisible != currentState || initiallyVisible != targetState// 创建一个动画状态，用于控制元素的显示与隐藏val visibleState = remember { MutableTransitionState(initiallyVisible) }visibleState.targetState = currentState// 根据是否需要执行动画，决定是否应用动画if (shouldAnimate) {val enterTransition = enter.createInitialValues(visibleState)val exitTransition = exit.createInitialValues(visibleState)val transition = updateTransition(visibleState, label = "AnimatedVisibilityScope")transition.AnimatedContent(modifier = modifier,transitionSpec = {if (targetState) {enterTransition} else {exitTransition}},content = content)} else {// 如果不需要执行动画，直接显示或隐藏内容if (currentState) {content()}}
}

AnimatedVisibilityScope 函数是 Transition<Boolean> 的扩展函数，接受多个参数：

  • modifier：用于设置组件的布局和样式。

  • enter：元素显示时的动画。

  • exit：元素隐藏时的动画。

  • initiallyVisible：初始可见性。

  • content：要显示的内容。

在函数内部，首先计算是否需要执行动画。如果需要执行动画，则创建进入和退出动画的初始值，并使用 updateTransition 函数创建一个新的 Transition 对象。然后调用 AnimatedContent 函数，根据目标状态选择合适的动画进行过渡。如果不需要执行动画，则直接根据当前状态显示或隐藏内容。

2.4 AnimatedVisibility 的使用示例与代码解析

下面是一个更复杂的 AnimatedVisibility 使用示例：

kotlin

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ComplexAnimatedVisibilityExample() {// 定义一个可变状态，用于控制元素的可见性var isVisible by remember { mutableStateOf(false) }// 创建一个 Column 组件，用于布局按钮和要显示的内容Column(modifier = Modifier.fillMaxWidth().padding(16.dp),horizontalAlignment = Alignment.CenterHorizontally) {// 创建一个按钮，点击时切换元素的可见性Button(onClick = { isVisible = !isVisible }) {Text(text = if (isVisible) "Hide" else "Show")}// 使用 AnimatedVisibility 组件，根据 isVisible 的值控制元素的显示与隐藏，并添加水平展开和收缩动画AnimatedVisibility(visible = isVisible,enter = fadeIn() + expandHorizontally(),  // 元素显示时的动画exit = fadeOut() + shrinkHorizontally()   // 元素隐藏时的动画) {// 创建一个 Box 组件，设置背景颜色和高度Box(modifier = Modifier.fillMaxWidth().height(100.dp).background(Color.Blue).padding(16.dp)) {// 在 Box 中显示文本Text(text = "This is a visible box.", color = Color.White)}}}
}

代码解析：

  • 首先，使用 remember 函数创建一个可变状态 isVisible，用于控制元素的可见性。
  • 然后，创建一个 Column 组件，用于布局按钮和要显示的内容。
  • 接着，创建一个按钮，点击时切换 isVisible 的值。
  • 最后，使用 AnimatedVisibility 组件，根据 isVisible 的值控制 Box 组件的显示与隐藏。在显示时，应用淡入和水平展开动画；在隐藏时，应用淡出和水平收缩动画。

三、AnimatedContent 源码分析

3.1 AnimatedContent 的基本定义与结构

AnimatedContent 是一个 Composable 函数，用于在内容发生变化时添加动画过渡，其定义如下：

kotlin

@ExperimentalAnimationApi
@Composable
fun <T> AnimatedContent(targetState: T,  // 目标状态modifier: Modifier = Modifier,  // 修饰符，用于设置组件的布局和样式transitionSpec: AnimatedContentScope<T>.() -> ContentTransform = {fadeIn() with fadeOut()},  // 过渡动画的规范contentAlignment: Alignment = Alignment.TopStart,  // 内容的对齐方式content: @Composable AnimatedContentScope<T>.(T) -> Unit  // 要显示的内容
) {// 内部实现逻辑val transition = updateTransition(targetState, label = "AnimatedContent")transition.AnimatedContent(modifier = modifier,transitionSpec = transitionSpec,contentAlignment = contentAlignment,content = content)
}

AnimatedContent 接受多个参数：

  • targetState：目标状态，即内容要过渡到的状态。

  • modifier：用于设置组件的布局和样式。

  • transitionSpec：过渡动画的规范，定义了内容变化时的动画效果。

  • contentAlignment：内容的对齐方式，默认为左上角对齐。

  • content：要显示的内容，是一个 Composable 函数，接受当前状态作为参数。

在函数内部，首先调用 updateTransition 函数创建一个 Transition 对象，用于管理动画的过渡状态。然后调用 AnimatedContent 函数的扩展方法，将过渡状态、过渡动画规范、内容对齐方式和内容传递给它。

3.2 transitionSpec 参数的作用与实现

transitionSpec 参数是一个 AnimatedContentScope<T>.() -> ContentTransform 类型的函数，用于定义内容变化时的动画效果。ContentTransform 是一个包含进入动画和退出动画的对象。

下面是一个自定义 transitionSpec 的示例：

kotlin

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment@OptIn(ExperimentalAnimationApi::class)
@Composable
fun CustomTransitionSpecExample() {// 定义一个可变状态，用于控制内容的变化var state by remember { mutableStateOf(1) }// 自定义过渡动画规范val customTransitionSpec = {// 定义进入动画为淡入和缩放进入val enterTransition = fadeIn() + scaleIn()// 定义退出动画为淡出和缩放退出val exitTransition = fadeOut() + scaleOut()// 定义大小变换动画val sizeTransform = SizeTransform(clip = false)// 返回一个 ContentTransform 对象，包含进入动画、退出动画和大小变换动画ContentTransform(targetContentEnter = enterTransition,initialContentExit = exitTransition,sizeTransform = sizeTransform)}// 使用 AnimatedContent 组件，根据 state 的值显示不同的内容，并应用自定义过渡动画AnimatedContent(targetState = state,transitionSpec = customTransitionSpec,contentAlignment = Alignment.Center) { currentState ->// 根据当前状态显示不同的文本Text(text = "State: $currentState")}// 创建一个按钮，点击时切换状态Button(onClick = { state = if (state == 1) 2 else 1 }) {Text(text = "Change State")}
}

在这个示例中，我们自定义了一个 transitionSpec，定义了进入动画为淡入和缩放进入，退出动画为淡出和缩放退出，并添加了大小变换动画。当点击按钮时，state 的值会发生变化，AnimatedContent 会根据新的状态显示不同的内容，并应用自定义的过渡动画。

3.3 AnimatedContent 的内容更新与动画触发机制

AnimatedContent 的内容更新和动画触发机制主要依赖于 targetState 参数。当 targetState 的值发生变化时，AnimatedContent 会检测到这个变化，并根据 transitionSpec 中定义的动画效果进行过渡。

在 AnimatedContent 内部，updateTransition 函数会监听 targetState 的变化，并创建一个 Transition 对象。当 targetState 发生变化时，Transition 对象会自动触发动画过渡。

3.4 AnimatedContent 的使用示例与代码解析

下面是一个更详细的 AnimatedContent 使用示例：

kotlin

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@OptIn(ExperimentalAnimationApi::class)
@Composable
fun DetailedAnimatedContentExample() {// 定义一个可变状态，用于控制内容的变化var state by remember { mutableStateOf("A") }// 自定义过渡动画规范val customTransitionSpec = {// 定义进入动画为淡入和缩放进入val enterTransition = fadeIn() + scaleIn()// 定义退出动画为淡出和缩放退出val exitTransition = fadeOut() + scaleOut()// 定义大小变换动画val sizeTransform = SizeTransform(clip = false)// 返回一个 ContentTransform 对象，包含进入动画、退出动画和大小变换动画ContentTransform(targetContentEnter = enterTransition,initialContentExit = exitTransition,sizeTransform = sizeTransform)}// 创建一个 Column 组件，用于布局按钮和 AnimatedContent 组件Column(modifier = Modifier.fillMaxWidth().padding(16.dp),horizontalAlignment = Alignment.CenterHorizontally) {// 使用 AnimatedContent 组件，根据 state 的值显示不同的内容，并应用自定义过渡动画AnimatedContent(targetState = state,transitionSpec = customTransitionSpec,contentAlignment = Alignment.Center) { currentState ->// 根据当前状态显示不同的文本Box(modifier = Modifier.fillMaxWidth().padding(16.dp).background(if (currentState == "A") androidx.compose.ui.graphics.Color.Red else androidx.compose.ui.graphics.Color.Blue)) {Text(text = "State: $currentState", color = androidx.compose.ui.graphics.Color.White)}}// 创建两个按钮，分别用于切换到状态 A 和状态 BButton(onClick = { state = "A" }) {Text(text = "Change to State A")}Button(onClick = { state = "B" }) {Text(text = "Change to State B")}}
}

代码解析：

  • 首先，使用 remember 函数创建一个可变状态 state，用于控制内容的变化。
  • 然后，自定义一个 transitionSpec，定义了进入动画、退出动画和大小变换动画。
  • 接着，创建一个 Column 组件，用于布局按钮和 AnimatedContent 组件。
  • 在 AnimatedContent 组件中，根据 state 的值显示不同的内容，并应用自定义的过渡动画。
  • 最后，创建两个按钮，分别用于切换到状态 A 和状态 B。

四、AnimatedVisibility 与 AnimatedContent 的对比与结合

4.1 AnimatedVisibility 与 AnimatedContent 的功能对比

  • 功能侧重点

    • AnimatedVisibility：主要侧重于控制元素的可见性，并在显示和隐藏元素时添加动画效果。它关注的是元素的整体显示与隐藏状态的变化。
    • AnimatedContent：主要侧重于在内容发生变化时添加动画过渡。它关注的是内容的动态更新，而不仅仅是元素的可见性。

  • 使用场景

    • AnimatedVisibility：适用于需要显示或隐藏某个元素的场景，如菜单的展开与收缩、提示信息的显示与隐藏等。
    • AnimatedContent：适用于内容频繁变化的场景，如列表项的更新、文本内容的切换等。

4.2 如何在项目中结合使用 AnimatedVisibility 与 AnimatedContent

在实际项目中，可以将 AnimatedVisibility 和 AnimatedContent 结合使用，以实现更复杂的动画效果。下面是一个结合使用的示例：

kotlin

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@OptIn(ExperimentalAnimationApi::class)
@Composable
fun CombinedExample() {// 定义一个可变状态，用于控制元素的可见性var isVisible by remember { mutableStateOf(false) }// 定义一个可变状态，用于控制内容的变化var state by remember { mutableStateOf("A") }// 自定义过渡动画规范val customTransitionSpec = {// 定义进入动画为淡入和缩放进入val enterTransition = fadeIn() + scaleIn()// 定义退出动画为淡出和缩放退出val exitTransition = fadeOut() + scaleOut()// 定义大小变换动画val sizeTransform = SizeTransform(clip = false)// 返回一个 ContentTransform 对象，包含进入动画、退出动画和大小变换动画ContentTransform(targetContentEnter = enterTransition,initialContentExit = exitTransition,sizeTransform = sizeTransform)}// 创建一个 Column 组件，用于布局按钮、AnimatedVisibility 组件和 AnimatedContent 组件Column(modifier = Modifier.fillMaxWidth().padding(16.dp),horizontalAlignment = Alignment.CenterHorizontally) {// 创建一个按钮，点击时切换元素的可见性Button(onClick = { isVisible = !isVisible }) {Text(text = if (isVisible) "Hide" else "Show")}// 使用 AnimatedVisibility 组件，根据 isVisible 的值控制元素的显示与隐藏，并添加淡入淡出动画AnimatedVisibility(visible = isVisible,enter = fadeIn(),exit = fadeOut()) {// 使用 AnimatedContent 组件，根据 state 的值显示不同的内容，并应用自定义过渡动画AnimatedContent(targetState = state,transitionSpec = customTransitionSpec,contentAlignment = Alignment.Center) { currentState ->// 根据当前状态显示不同的文本Box(modifier = Modifier.fillMaxWidth().padding(16.dp).background(if (currentState == "A") androidx.compose.ui.graphics.Color.Red else androidx.compose.ui.graphics.Color.Blue)) {Text(text = "State: $currentState", color = androidx.compose.ui.graphics.Color.White)}}}// 创建两个按钮，分别用于切换到状态 A 和状态 BButton(onClick = { state = "A" }) {Text(text = "Change to State A")}Button(onClick = { state = "B" }) {Text(text = "Change to State B")}}
}

在这个示例中，我们使用 AnimatedVisibility 控制整个内容区域的显示与隐藏，同时使用 AnimatedContent 控制内容区域内的内容变化。当点击 “Show/Hide” 按钮时，内容区域会淡入淡出显示或隐藏；当点击 “Change to State A” 或 “Change to State B” 按钮时，内容区域内的内容会根据状态的变化进行平滑过渡。

五、自动动画的应用场景与案例分析

5.1 常见的应用场景举例

菜单的展开与收缩

在很多应用中，会有菜单的展开与收缩功能。使用 AnimatedVisibility 可以轻松实现菜单的平滑展开和收缩动画，提升用户体验。

kotlin

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@OptIn(ExperimentalAnimationApi::class)
@Composable
fun MenuExpandCollapseExample() {// 定义一个可变状态，用于控制菜单的可见性var isMenuVisible by remember { mutableStateOf(false) }// 创建一个 Column 组件，用于布局按钮和菜单Column(modifier = Modifier.fillMaxWidth().padding(16.dp),horizontalAlignment = Alignment.CenterHorizontally) {// 创建一个按钮，点击时切换菜单的可见性Button(onClick = { isMenuVisible = !isMenuVisible }) {Text(text = if (isMenuVisible) "Collapse Menu" else "Expand Menu")}// 使用 AnimatedVisibility 组件，根据 isMenuVisible 的值控制菜单的显示与隐藏，并添加淡入淡出和垂直滑动动画AnimatedVisibility(visible = isMenuVisible,enter = fadeIn() + slideInVertically(),exit = fadeOut() + slideOutVertically()) {// 创建一个 Column 组件，用于布局菜单项Column(modifier = Modifier.fillMaxWidth().padding(16.dp),verticalArrangement = Arrangement.spacedBy(8.dp)) {// 菜单项 1Text(text = "Menu Item 1")// 菜单项 2Text(text = "Menu Item 2")// 菜单项 3Text(text = "Menu Item 3")}}}
}
数据加载提示

当应用需要加载数据时，可以使用 AnimatedVisibility 显示加载提示，数据加载完成后隐藏提示。

kotlin

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay@OptIn(ExperimentalAnimationApi::class)
@Composable
fun DataLoadingExample() {// 定义一个可变状态，用于控制加载提示的可见性var isLoading by remember { mutableStateOf(false) }// 创建一个 Box 组件，用于布局按钮和加载提示Box(modifier = Modifier.fillMaxSize(),contentAlignment = Alignment.Center) {// 创建一个按钮，点击时模拟数据加载Button(onClick = {isLoading = true// 模拟 2 秒的数据加载时间LaunchedEffect(Unit) {delay(2000)isLoading = false}}) {Text(text = "Load Data")}// 使用 AnimatedVisibility 组件，根据 isLoading 的值控制加载提示的显示与隐藏，并添加淡入淡出动画AnimatedVisibility(visible = isLoading,enter = fadeIn(),exit = fadeOut()) {// 创建一个 Box 组件，用于布局加载进度指示器Box(modifier = Modifier.fillMaxWidth().padding(16.dp),contentAlignment = Alignment.Center) {// 加载进度指示器CircularProgressIndicator()}}}
}
列表项的更新

在列表中，当列表项的数据发生变化时，可以使用 AnimatedContent 实现平滑的过渡动画。

kotlin

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ListItemUpdateExample() {// 定义一个可变状态，用于存储列表项的数据var itemData by remember { mutableStateOf("Initial Data") }// 自定义过渡动画规范val customTransitionSpec = {// 定义进入动画为淡入和缩放进入val enterTransition = fadeIn() + scaleIn()// 定义退出动画为淡出和缩放退出val exitTransition = fadeOut() + scaleOut()// 定义大小变换动画val sizeTransform = SizeTransform(clip = false)// 返回一个 ContentTransform 对象，包含进入动画、退出动画和大小变换动画ContentTransform(targetContentEnter = enterTransition,initialContentExit = exitTransition,sizeTransform = sizeTransform)}// 创建一个 Column 组件，用于布局按钮和列表项Column(modifier = Modifier.fillMaxWidth().padding(16.dp),horizontalAlignment = Alignment.CenterHorizontally) {// 创建一个按钮，点击时更新列表项的数据Button(onClick = {itemData = "Updated Data"}) {Text(text = "Update Item")}// 使用 AnimatedContent 组件，根据 itemData 的值显示不同的内容，并应用自定义过渡动画AnimatedContent(targetState = itemData,transitionSpec = customTransitionSpec,contentAlignment = Alignment.Center) { currentData ->// 根据当前数据显示不同的文本Text(text = "Item Data: $currentData")}}
}

5.2 实际项目案例分析

社交应用的消息列表更新

在社交应用的消息列表中，当有新消息到来时，需要更新列表并显示新消息。可以使用 AnimatedContent 实现列表项的平滑更新动画，让用户更清晰地看到新消息的到来。

kotlin

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay@OptIn(ExperimentalAnimationApi::class)
@Composable
fun SocialMessageListExample() {// 定义一个可变状态，用于存储消息列表var messages by remember { mutableStateOf(listOf("Message 1", "Message 2")) }// 自定义过渡动画规范val customTransitionSpec = {// 定义进入动画为淡入和缩放进入val enterTransition = fadeIn() + scaleIn()// 定义退出动画为淡出和缩放退出val exitTransition = fadeOut() + scaleOut()// 定义大小变换动画val sizeTransform = SizeTransform(clip = false)// 返回一个 ContentTransform 对象，包含进入动画、退出动画和大小变换动画ContentTransform(targetContentEnter = enterTransition,initialContentExit = exitTransition,sizeTransform = sizeTransform)}// 模拟新消息到来LaunchedEffect(Unit) {delay(3000)messages = messages + "New Message"}// 创建一个 Column 组件，用于布局消息列表Column(modifier = Modifier.fillMaxWidth().padding(16.dp),verticalArrangement = Arrangement.spacedBy(8.dp)) {// 使用 AnimatedContent 组件，根据 messages 的值显示不同的消息列表，并应用自定义过渡动画AnimatedContent(targetState = messages,transitionSpec = customTransitionSpec,contentAlignment = Alignment.TopStart) { currentMessages ->// 遍历消息列表，显示每个消息current

五、自动动画的应用场景与案例分析

5.2 实际项目案例分析

社交应用的消息列表更新

kotlin

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay@OptIn(ExperimentalAnimationApi::class)
@Composable
fun SocialMessageListExample() {// 定义一个可变状态，用于存储消息列表var messages by remember { mutableStateOf(listOf("Message 1", "Message 2")) }// 自定义过渡动画规范val customTransitionSpec = {// 定义进入动画为淡入和缩放进入val enterTransition = fadeIn() + scaleIn()// 定义退出动画为淡出和缩放退出val exitTransition = fadeOut() + scaleOut()// 定义大小变换动画val sizeTransform = SizeTransform(clip = false)// 返回一个 ContentTransform 对象，包含进入动画、退出动画和大小变换动画ContentTransform(targetContentEnter = enterTransition,initialContentExit = exitTransition,sizeTransform = sizeTransform)}// 模拟新消息到来LaunchedEffect(Unit) {delay(3000)messages = messages + "New Message"}// 创建一个 Column 组件，用于布局消息列表Column(modifier = Modifier.fillMaxWidth().padding(16.dp),verticalArrangement = Arrangement.spacedBy(8.dp)) {// 使用 AnimatedContent 组件，根据 messages 的值显示不同的消息列表，并应用自定义过渡动画AnimatedContent(targetState = messages,transitionSpec = customTransitionSpec,contentAlignment = Alignment.TopStart) { currentMessages ->// 遍历消息列表，显示每个消息currentMessages.forEach { message ->Text(text = message,modifier = Modifier.fillMaxWidth().padding(8.dp))}}}
}

代码分析：

  • 状态管理：通过 remember 创建可变状态 messages 来存储消息列表。初始时，消息列表包含两条消息。
  • 过渡动画规范：customTransitionSpec 自定义了进入和退出动画，使用 fadeIn 和 scaleIn 组合作为进入动画，fadeOut 和 scaleOut 组合作为退出动画，同时使用 SizeTransform 处理大小变换。
  • 模拟新消息：使用 LaunchedEffect 模拟 3 秒后有新消息到来，更新 messages 列表。
  • 消息列表显示：使用 AnimatedContent 组件，根据 messages 的变化更新显示的消息列表。当新消息到来时，新消息会以淡入和缩放的动画效果显示出来，旧消息则以淡出和缩放的动画效果消失。
电商应用的商品筛选动画

在电商应用中，用户可能会使用筛选功能来查找特定的商品。可以使用 AnimatedVisibility 和 AnimatedContent 结合实现筛选条件的显示与隐藏，以及筛选结果的平滑过渡。

kotlin

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@OptIn(ExperimentalAnimationApi::class)
@Composable
fun EcommerceProductFilterExample() {// 定义一个可变状态，用于控制筛选条件的可见性var isFilterVisible by remember { mutableStateOf(false) }// 定义一个可变状态，用于存储筛选条件var filter by remember { mutableStateOf("All") }// 模拟商品列表val allProducts = listOf("Product 1", "Product 2", "Product 3", "Product 4")// 根据筛选条件过滤商品列表val filteredProducts = when (filter) {"All" -> allProducts"Even" -> allProducts.filterIndexed { index, _ -> index % 2 == 0 }"Odd" -> allProducts.filterIndexed { index, _ -> index % 2 != 0 }else -> allProducts}// 自定义过渡动画规范val customTransitionSpec = {// 定义进入动画为淡入和缩放进入val enterTransition = fadeIn() + scaleIn()// 定义退出动画为淡出和缩放退出val exitTransition = fadeOut() + scaleOut()// 定义大小变换动画val sizeTransform = SizeTransform(clip = false)// 返回一个 ContentTransform 对象，包含进入动画、退出动画和大小变换动画ContentTransform(targetContentEnter = enterTransition,initialContentExit = exitTransition,sizeTransform = sizeTransform)}// 创建一个 Column 组件，用于布局筛选按钮、筛选条件和商品列表Column(modifier = Modifier.fillMaxWidth().padding(16.dp),verticalArrangement = Arrangement.spacedBy(8.dp)) {// 创建一个按钮，点击时切换筛选条件的可见性Button(onClick = { isFilterVisible = !isFilterVisible }) {Text(text = if (isFilterVisible) "Hide Filters" else "Show Filters")}// 使用 AnimatedVisibility 组件，根据 isFilterVisible 的值控制筛选条件的显示与隐藏，并添加淡入淡出动画AnimatedVisibility(visible = isFilterVisible,enter = fadeIn(),exit = fadeOut()) {// 创建一个 Column 组件，用于布局筛选条件按钮Column(modifier = Modifier.fillMaxWidth().padding(8.dp),verticalArrangement = Arrangement.spacedBy(8.dp)) {// 全部筛选条件按钮Button(onClick = { filter = "All" }) {Text(text = "All Products")}// 偶数索引商品筛选条件按钮Button(onClick = { filter = "Even" }) {Text(text = "Even Index Products")}// 奇数索引商品筛选条件按钮Button(onClick = { filter = "Odd" }) {Text(text = "Odd Index Products")}}}// 使用 AnimatedContent 组件，根据 filteredProducts 的值显示不同的商品列表，并应用自定义过渡动画AnimatedContent(targetState = filteredProducts,transitionSpec = customTransitionSpec,contentAlignment = Alignment.TopStart) { currentProducts ->// 遍历商品列表，显示每个商品currentProducts.forEach { product ->Text(text = product,modifier = Modifier.fillMaxWidth().padding(8.dp))}}}
}

代码分析：

  • 状态管理：

    • isFilterVisible 用于控制筛选条件的可见性。
    • filter 用于存储当前的筛选条件。
    • allProducts 模拟了所有商品的列表，filteredProducts 根据 filter 的值进行筛选。

  • 筛选条件显示：使用 AnimatedVisibility 组件，根据 isFilterVisible 的值控制筛选条件的显示与隐藏，添加淡入淡出动画。

  • 筛选结果显示：使用 AnimatedContent 组件，根据 filteredProducts 的变化更新显示的商品列表，应用自定义的过渡动画。当筛选条件改变时，新的商品列表会以平滑的动画效果显示出来。

5.3 自动动画在提升用户体验方面的作用

  • 增强交互反馈：自动动画可以为用户的操作提供直观的反馈。例如，在点击按钮展开菜单时，菜单以动画的形式平滑展开，让用户清楚地知道操作已经生效。这种反馈能够增强用户与界面的交互感，使用户更加自信地操作应用。
  • 引导用户注意力：通过动画效果，可以引导用户的注意力到重要的信息或操作上。例如，在有新消息到来时，消息提示以闪烁或缩放的动画效果显示，吸引用户的注意力，让用户及时发现新消息。
  • 提升界面的流畅感：自动动画可以使界面元素的显示和隐藏、状态的切换更加自然流畅，避免界面的突然变化给用户带来的不适感。例如，在切换列表项内容时，使用动画过渡可以让用户感觉界面的变化是连续的，提升了界面的整体流畅感。
  • 增加应用的趣味性：精美的动画效果可以为应用增添趣味性，使应用更具吸引力。例如，在游戏应用中，角色的移动、技能的释放等都可以通过动画来表现，让用户在游戏过程中获得更好的体验。

六、自动动画的性能优化与注意事项

6.1 性能优化策略

合理选择动画类型

不同的动画类型对性能的影响不同。例如，简单的淡入淡出动画相对来说性能开销较小，而复杂的缩放、旋转动画可能会消耗更多的资源。在选择动画类型时，应根据实际需求进行权衡，优先选择性能开销较小的动画。

kotlin

// 简单的淡入淡出动画
AnimatedVisibility(visible = isVisible,enter = fadeIn(),exit = fadeOut()
) {// 内容
}// 复杂的缩放和旋转动画
// 这种动画可能会消耗更多资源，需要谨慎使用
AnimatedVisibility(visible = isVisible,enter = scaleIn() + rotateIn(),exit = scaleOut() + rotateOut()
) {// 内容
}
控制动画时长和帧率

动画的时长和帧率也会影响性能。过长的动画时长会增加用户的等待时间，而过短的动画时长可能会导致动画效果不明显。帧率方面，过高的帧率会增加 CPU 和 GPU 的负担，一般将帧率控制在 60fps 左右即可。

kotlin

// 设置动画时长为 300 毫秒
val enterTransition = fadeIn(animationSpec = tween(durationMillis = 300))
val exitTransition = fadeOut(animationSpec = tween(durationMillis = 300))AnimatedVisibility(visible = isVisible,enter = enterTransition,exit = exitTransition
) {// 内容
}
避免不必要的动画

在开发过程中，应避免添加不必要的动画。只有在确实需要增强用户体验的地方才使用动画，避免过度使用动画导致性能下降。例如，在一些静态页面中，不需要添加动画效果。

优化动画状态管理

合理管理动画的状态可以减少不必要的动画计算和重绘。例如，使用 remember 函数来缓存可变状态，避免在每次重组时重新创建状态。

kotlin

// 使用 remember 缓存可变状态
var isVisible by remember { mutableStateOf(false) }AnimatedVisibility(visible = isVisible,enter = fadeIn(),exit = fadeOut()
) {// 内容
}

6.2 注意事项

兼容性问题

不同的 Android 设备和版本可能对动画的支持有所不同。在开发过程中，应进行充分的测试，确保动画在各种设备和版本上都能正常显示。特别是在使用一些新的动画特性时，要注意其兼容性。

内存管理

动画可能会占用一定的内存资源，特别是在处理复杂动画或大量动画时。要注意及时释放不再使用的动画资源，避免内存泄漏。例如，在组件销毁时，停止正在运行的动画。

动画冲突

在一个界面中，如果同时存在多个动画，可能会出现动画冲突的问题。例如，一个元素正在进行淡入动画，同时又要进行缩放动画，可能会导致动画效果不理想。在设计动画时，要避免这种冲突的发生，或者使用合适的动画组合方式来解决冲突。

七、总结与展望

7.1 总结

Android Compose 中的 AnimatedVisibility 和 AnimatedContent 为开发者提供了强大而便捷的自动动画功能。通过这两个组件，开发者可以轻松实现元素的显示与隐藏动画，以及内容的动态变化动画，从而提升应用的用户体验。

AnimatedVisibility 主要用于控制元素的可见性，通过设置 visible 参数和动画效果，可以让元素在显示和隐藏时具有平滑的过渡。其内部通过 updateTransition 函数管理动画的过渡状态，利用 AnimatedVisibilityScope 函数处理动画的执行。

AnimatedContent 则专注于内容的动态更新，当传递给它的内容发生变化时，会根据 transitionSpec 中定义的动画效果进行平滑过渡。开发者可以自定义过渡动画，实现淡入淡出、缩放、旋转等多种效果。

在实际项目中，AnimatedVisibility 和 AnimatedContent 可以结合使用，以实现更复杂的动画效果。同时，合理运用自动动画可以增强交互反馈、引导用户注意力、提升界面的流畅感和增加应用的趣味性。

7.2 展望

更多动画效果和特性

未来，Android Compose 可能会提供更多丰富的动画效果和特性。例如，支持更多基于物理模拟的动画，如弹性动画、重力动画等，让动画更加逼真和自然。同时，可能会增加更多的动画插值器和过渡类型，为开发者提供更多的选择。

性能进一步优化

随着 Android 系统和硬件的不断发展，Android Compose 的动画性能也有望得到进一步优化。例如，采用更高效的动画计算和渲染算法，减少动画对 CPU 和 GPU 的负担，提高动画的流畅度和响应速度。

跨平台动画支持

随着跨平台开发的趋势不断增强，Android Compose 可能会提供更好的跨平台动画支持。开发者可以使用相同的代码在不同的平台上实现一致的动画效果，降低开发成本和维护难度。

更便捷的动画调试工具

目前，Android Compose 的动画调试相对来说还比较困难。未来，可能会提供更便捷的动画调试工具，帮助开发者快速定位和解决动画问题，提高开发效率。

总之，Android Compose 的自动动画功能为开发者带来了很多便利，未来也有着广阔的发展前景。开发者可以充分利用这些功能，为用户打造更加出色的 Android 应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/898869.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

文件上传的小点总结(1)

文件上传的小点总结(1)

2.文件类型绕过 问题插入&#xff1a;BP无法拦截本地流量 ①插件限制 不代理的地址列表通常写有localhost和127.0.0.1&#xff0c;把本地的全都删掉&#xff0c;然后应用保存。 ②浏览器限制 Firefox浏览器设置&#xff1a;检查浏览器代理配置和proxy listeners都没问题后&…
阅读更多...
AI基础01-文本数据采集

AI基础01-文本数据采集

本篇文章是学习文本数据的采集&#xff0c;作为人工智能训练师或者数据分析师有时需要先获取数据&#xff0c;然后进行数据清洗、数据标注。很明显数据采集是后续步骤的基础。 1&#xff09;数据采集定义 数据采集&#xff1a;data acquisition&#xff0c;DAQ 又称为数据获取…
阅读更多...
深度学习Python编程：从入门到工程实践

深度学习Python编程：从入门到工程实践

第一章 Python语言概述与生态体系 1.3 Python在工业界的应用场景 # 示例：使用FastAPI构建RESTful接口 from fastapi import FastAPI from pydantic import BaseModelapp = FastAPI()class Item(BaseModel):name: strprice: float@app.post("/items/") async def cr…
阅读更多...
使用CSS3实现炫酷的3D翻转卡片效果

使用CSS3实现炫酷的3D翻转卡片效果

使用CSS3实现炫酷的3D翻转卡片效果 这里写目录标题 使用CSS3实现炫酷的3D翻转卡片效果项目介绍技术要点分析1. 3D空间设置2. 核心CSS属性3. 布局和定位 实现难点和解决方案1. 3D效果的流畅性2. 卡片内容布局3. 响应式设计 性能优化建议浏览器兼容性总结 项目介绍 在这个项目中…
阅读更多...
【读书笔记】华为《从偶然到必然》

【读书笔记】华为《从偶然到必然》

note 华为的成功并非偶然&#xff0c;而是通过IPD体系、投资组合管理、平台战略等系统性工具&#xff0c;将研发投资转化为可持续的商业竞争力。书中强调的“管理即内部因素”理念&#xff0c;揭示了企业规模扩张与管理能力匹配的深层规律&#xff0c;为高科技企业提供了可借鉴…
阅读更多...
HashMap添加元素的流程图

HashMap添加元素的流程图

文章目录 JDK7 vs JDK8 的 HashMap 结构变化Java8 中哈希表的红黑树优化机制HashMap 添加元素的完整流程解析1. 计算 key 的哈希值并确定索引2. 检查该索引位置是否已有元素3. 处理哈希冲突4. 判断当前存储结构&#xff08;链表还是红黑树&#xff09;5. 判断链表长度是否超过 …
阅读更多...
Excel（进阶篇）：powerquery详解、PowerQuery的各种用法，逆透视表格、双行表头如何制作透视表、不规则数据如何制作数据透视表

Excel（进阶篇）：powerquery详解、PowerQuery的各种用法，逆透视表格、双行表头如何制作透视表、不规则数据如何制作数据透视表

目录 PowerQuery工具基础修改现有数据理规则PowerQuery抓取数据的两种方式多文件合并透视不同表结构多表追加数据透视追加与合并整理横向表格：逆透视 数据用拆分工具整理数据算账龄 不等步长值组合合并文件夹中所有文件PowerQuery处理CSV文件双行表头、带合并单元格如何做数据…
阅读更多...
FFmpeg + ‌Qt‌ 简单视频播放器代码

FFmpeg + ‌Qt‌ 简单视频播放器代码

一个基于 ‌FFmpeg 4.x‌ 和 ‌Qt‌ 的简单视频播放器代码示例&#xff0c;实现视频解码和渲染到 Qt 窗口的功能。 1&#xff09;ffmpeg库界面&#xff0c;视频解码支持软解和硬解方式。 2&#xff09;QImage/QPixmap显示视频图片。 ‌1. Qt 项目配置&#xff08;.pro 文件&…
阅读更多...
如何在百度搜索上删除与自己名字相关的资料

如何在百度搜索上删除与自己名字相关的资料

个人信息的网络足迹如同一张无形的网&#xff0c;将我们与世界的每一个角落紧密相连。然而&#xff0c;当某些与自己名字相关的资料不再希望被公众轻易检索到时&#xff0c;如何在百度搜索中有效“隐身”&#xff0c;成为了一个亟待解决的问题。面对复杂多变的网络环境&#xf…
阅读更多...
[贪心算法]最长回文串 增减字符串匹配 分发饼干

[贪心算法]最长回文串 增减字符串匹配 分发饼干

1.最长回文串 我们可以存下每个字母的个数&#xff0c;然后分类讨论 如果是奇数就减一加到结果中如果是偶数就直接加入即可 最后判断长度跟原字符串的差距&#xff0c;如果小于原数组说明有奇数结果1 class Solution { public:int longestPalindrome(string s) {int ret0;//1.计…
阅读更多...
目标检测中的非极大值抑制（NMS）原理与实现解析

目标检测中的非极大值抑制（NMS）原理与实现解析

一、技术背景 在目标检测任务中&#xff0c;模型通常会对同一目标生成多个重叠的候选框&#xff08;如锚框或预测框&#xff09;。非极大值抑制&#xff08;Non-Maximum Suppression, NMS&#xff09; 是一种关键的后处理技术&#xff0c;用于去除冗余的检测结果&#xff0c;保…
阅读更多...
Linux 启动Jar脚本设置开机自启【超级详细】

Linux 启动Jar脚本设置开机自启【超级详细】

Linux 启动Jar脚本&&设置开机自启【超级详细】 概要服务器开机自启服务重启脚本 概要 最近在Linux服务器中部署了一个项目&#xff08;单机版&#xff09;&#xff0c;每次更新服务的时候需要用到好几个命令&#xff0c;停止服务&#xff0c;再重启&#xff0c;并且服…
阅读更多...
【第21节】windows sdk编程：网络编程基础

【第21节】windows sdk编程：网络编程基础

目录 引言&#xff1a;网络编程基础 一、socket介绍(套接字) 1.1 Berkeley Socket套接字 1.2 WinSocket套接字 1.3 WSAtartup函数 1.4 socket函数 1.5 字节序转换 1.6 绑定套接字 1.7 监听 1.8 连接 1.9 接收数据 1.10 发送数据 1.11 关闭套接字 二、UDP连接流程…
阅读更多...
QT 图表（拆线图，栏状图，饼状图 ,动态图表）

QT 图表（拆线图，栏状图，饼状图 ,动态图表）

效果 折线图 // 创建折线数据系列// 创建折线系列QLineSeries *series new QLineSeries;// series->append(0, 6);// series->append(2, 4);// series->append(3, 8);// 创建图表并添加系列QChart *chart new QChart;chart->addSeries(series);chart->setTit…
阅读更多...
vue3 ts 请求封装后端接口

vue3 ts 请求封装后端接口

一 首页-广告区域-小程序 首页-广告区域-小程序 GET/home/banner1.1 请求封装 首页-广告区域 home.ts export const getHomeBannerApi (distributionSite 1) > {return http<BannerItem[]>({method: GET,url: /home/banner,data: {distributionSite,},}) }函数定…
阅读更多...
响应式CMS架构优化SEO与用户体验

响应式CMS架构优化SEO与用户体验

内容概要 在数字化内容生态中&#xff0c;响应式CMS架构已成为平衡搜索引擎可见性与终端用户体验的核心载体。该系统通过多终端适配技术&#xff0c;确保PC、移动端及平板等设备的内容渲染一致性&#xff0c;直接降低页面跳出率并延长用户停留时长。与此同时&#xff0c;智能S…
阅读更多...
C++核心语法快速整理

C++核心语法快速整理

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文主要为学过多门语言玩家快速入门C 没有基础的就放弃吧。 全部都是精华&#xff0c;看完能直接上手改别人的项目。 输出内容 std::代表了这里的cout使用的标准库&#xff0c;避免不同库中的相同命名导致混乱 …
阅读更多...
如何让自动驾驶汽车“看清”世界？坐标映射与数据融合概述

如何让自动驾驶汽车“看清”世界？坐标映射与数据融合概述

在自动驾驶领域，多传感器融合技术是实现车辆环境感知和决策控制的关键。其中，坐标系映射和对应是多传感器融合的重要环节，它涉及到不同传感器数据在统一坐标系下的转换和匹配，以实现对车辆周围环境的准确感知。本文将介绍多传感器融合中坐标系映射和对应的数学基础和实际应…
阅读更多...
移除idea External Liraries 中maven依赖包

移除idea External Liraries 中maven依赖包

问题背景 扩展包里面不停的出现已经在POM文件注释的包&#xff0c;其实是没有查询到根源位置。 在IDEA插件中搜索Maven Helper 点击pom.xml文件 会出现扩展插件 定位之后在pom中添加exclusions&#xff0c;如下代码 <dependency><groupId>com.disney.eva.framewo…
阅读更多...
AI革命！蓝耘携手海螺AI视频，打造智能化视频新纪元

AI革命！蓝耘携手海螺AI视频，打造智能化视频新纪元

AI革命&#xff01;蓝耘携手海螺AI视频&#xff0c;打造智能化视频新纪元 前言 在这个信息爆炸的时代&#xff0c;视频已经成为我们获取信息、学习新知识的重要方式。而随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;AI与视频内容的结合为我们带来了全新的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023