Jetpack Compose实现的天气动画！可爱~

最新推荐文章于 2024-05-02 14:26:53 发布
最新推荐文章于 2024-05-02 14:26:53 发布
阅读量480 收藏 4
点赞数 1
文章标签： android 移动开发 mvvm 3d weex
原文链接：https://juejin.cn/post/6944884453038620685
版权

fundroid | 作者 

承香墨影 | 校对 

https://juejin.cn/post/6944884453038620685 | 原文

Hi，大家好，这里是承香墨影！

Jetpack Compose 是 Android 新出的响应式 UI 框架，可以简化并加快 Android 上的 UI 开发。

Jetpack Compose 目前还处于 Beta 版，但仍然阻止不聊喜欢尝鲜的开发者，使用 Compose 做出酷炫的效果。

从命令式转到响应式，最主要的思想的转变。

响应式 UI 不同于 Android 传统的基于 XML 的命令式 UI 开发规范，是一套全新的 UI 思想，糅合了 UI 与代码逻辑。跨平台框架 Flutter 的 Widget 和 Swift UI 都属于响应式。

今天给大家推荐一个使用 Compose 实现酷炫的天气动画的实现，其实只要掌握了方式方法，利用响应式的 UI 框架，依然可以做出酷炫的效果，UI 展示并不是难点。

一、项目介绍

此前参加了 Compose 挑战赛的终极挑战，使用 Compose 完成了一个天气 App。之前几轮挑战我也都有参与，每次都学到不少新东西，希望在这最后一轮挑战中，活用这段时间的积累做出更加成熟的作品。

1.1 项目挑战

因为没有美工协助，所以我考虑通过代码实现 App 中的所有 UI 元素例如各种 Icon 等，这样的 UI 在任何分辨率下都不会失真，而且可以更灵活地完成各种动画效果。

为了降低实现成本，我将 app 中的 UI 元素定义成偏卡通的风格，更利于代码实现：

上面的动画没有使用 Gif、Lottie 等三方资源，所有效果都基于 Compose 代码绘制。

1.2 MyApp：CuteWeather

App 界面比较简洁，采用单页面呈现（这也是挑战赛要求），可以查看近一周的天气信息和温度走势等。

项目地址:

https://github.com/vitaviva/compose-weather

其中，卡通风格的天气动画，算是这个 app 相对于同类应用的特色，本文将围绕这些天气动画，介绍一下如何使用 Compose 绘制自定义图形、并基于这些图形实现动画。

二、Compose自定义绘制

像常规的 Android 开发一样，除了各种默认的 Composable 控件以外，Compose 也提供了 Canvas 用来绘制自定义图形。

Canvas 相关的 API 在各个平台都大同小异，但在 Compose 上具有以下特点：

  • 用声明式的方式创建和使用 Canvas；

  • 通过 DrawScope 提供必要的 state 及各种 APIs；

  • API 更简单易用；

2.1 声明式地创建和使用 Canvas

Compose 中，Canvas 作为 Composable 可以声明式地添加到其他 Composable 中，并通过 Modifier 进行配置

Canvas(modifier = Modifier.fillMaxSize()){
}

传统方式，需要获取 Canvas 句柄命令式地进行绘制，而 Canvas{...} 则通过状态驱动的方式，执行 block 内的绘制逻辑，从而刷新 UI。

2.2 强大的 DrawScope

Canvas{...} 通过 DrawScope 提供了一些当前绘制所需的 state，例如经常使用到的 size；DrawScope 还提了各种常用的绘制 API，例如 drawLine 等。

Canvas(modifier = Modifier.fillMaxSize()){
 
  val canvasWidth = size.width
  val canvasHeight = size.height

  drawLine(
    start = Offset(x=canvasWidth, y = 0f),
    end = Offset(x = 0f, y = canvasHeight),
    color = Color.Blue,
    strokeWidth = 5F 
  )
}

上面代码绘制效果如下：

2.3 简单易用的 API

传统的 Canvas API 需要进行 Paint 的配置，而 DrawScope 的 API 则更简单、使用更友好。

例如绘制一个圆，传统的 API 是这样：

public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) {
}

DrawScope 提供的 API：

fun drawCircle(
  color: Color,
  radius: Float = size.minDimension / 2.0f,
  center: Offset = this.center,
  alpha: Float = 1.0f,
  style: DrawStyle = Fill,
  colorFilter: ColorFilter? = null,
  blendMode: BlendMode = DefaultBlendMode
) {...}

虽然看起来参数变多了，但是其实已经通过 size 等设置了合适的默认值，同时省去了 Paint 的创建和配置，使用起来更方便。

2.4 使用原生 Canvas

目前 DrawScope 提供的 API 还不及原生 Canvas 丰富（比如不支持 drawText 等），当不满足使用需求时，也可以直接使用原生 Canvas 对象进行绘制。

drawIntoCanvas { canvas ->
  val nativeCanvas  = canvas.nativeCanvas
}

上面对 Compose 中的 Canvas 做了简单介绍，下面结合 App 中的具体示例看一下实际使用效果。

首先，看一下雨水的绘制过程。

三、雨天效果

雨天天气的关键，是如何绘制不断下落的雨水。

3.1 雨滴的绘制

我们先绘制构成雨水的基本单元：雨滴。

经拆解后，雨水效果可由三组雨滴构成，每一组雨滴分成上下两段，这样在运动时，可以形成接连不断的效果。

我们使用 drawLine 绘制每一段黑线，设置适当的 stokeWidth，并通过 cap 设置端点的圆形效果：

@Composable
fun rainDrop() {
  Canvas(modifier) {
    val x: Float = size.width / 2 
    drawLine(
      Color.Black,
      Offset(x, line1y1), 
      Offset(x, line1y2), 
      strokeWidth = width, 
      cap = StrokeCap.Round
    )

    drawLine(
      Color.Black,
      Offset(x, line2y1),
      Offset(x, line2y2),
      strokeWidth = width,
      cap = StrokeCap.Round
    )
  }
}

3.2 雨滴下落动画

完成雨滴的基本图形绘制后，接下来为两线段增加位移动画，形成流动的效果。

以两线段中间空隙为动画的锚点，根据 animationState 变动其 y 轴位置，从 canvas 的顶端移动到低端（0 ~ size.hight），然后 restart 这个动画。

然后以锚点为基准绘制上下两线段，就形成接连不断的动画效果了。

代码如下：

@Composable
fun rainDrop() {
  val animateTween by rememberInfiniteTransition().animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
      tween(durationMillis, easing = LinearEasing),
      RepeatMode.Restart 
    )
  )

  Canvas(modifier) {
    val width = size.width
    val x: Float = size.width / 2

    val scopeHeight = size.height - width / 2 

    val space = size.height / 2.2f + width / 2 
    val spacePos = scopeHeight * animateTween 
    val sy1 = spacePos - space / 2
    val sy2 = spacePos + space / 2

    val lineHeight = scopeHeight - space

    val line1y1 = max(0f, sy1 - lineHeight)
    val line1y2 = max(line1y1, sy1)

    val line2y1 = min(sy2, scopeHeight)
    val line2y2 = min(line2y1 + lineHeight, scopeHeight)

    drawLine(
      Color.Black,
      Offset(x, line1y1),
      Offset(x, line1y2),
      strokeWidth = width,
      colorFilter = ColorFilter.tint(
          Color.Black
      ),
      cap = StrokeCap.Round
    )

    drawLine(
      Color.Black,
      Offset(x, line2y1),
      Offset(x, line2y2),
      strokeWidth = width,
      colorFilter = ColorFilter.tint(
        Color.Black
      ),
      cap = StrokeCap.Round
    )
  }
}

3.3 Compose 自定义布局

完成了单个雨滴的动画，接下来我们使用三个雨滴组成雨水的效果。

首先可以使用 Row + Space 的方式进行组装，但是这种方式缺少灵活性，仅通过 Modifier 很难准确布局三雨滴的相对位，因此考虑借助 Compose 的自定义布局，以提高灵活性和准确性：

Layout(
  modifier = modifier.rotate(30f), 
  content = { 
  Raindrop(modifier.fillMaxSize())
  Raindrop(modifier.fillMaxSize())
  Raindrop(modifier.fillMaxSize())
  }
) { measurables, constraints ->
    
  val placeables = measurables.mapIndexed { index, measurable ->

    val height = when (index) { 
      0 -> constraints.maxHeight * 0.8f
      1 -> constraints.maxHeight * 0.9f
      2 -> constraints.maxHeight * 0.6f
      else -> 0f
    }
    measurable.measure(
      constraints.copy(
        minWidth = 0,
        minHeight = 0,
        maxWidth = constraints.maxWidth / 10, 
        maxHeight = height.toInt(),
      )
    )
  }

  layout(constraints.maxWidth, constraints.maxHeight) {
    var xPosition = constraints.maxWidth / ((placeables.size + 1) * 2)

    placeables.forEachIndexed { index, placeable ->
      placeable.place(x = xPosition, y = 0)
      xPosition += (constraints.maxWidth / ((placeables.size + 1) * 0.8f)).roundToInt()
    }
  }
}

Compose 中可以使用 Layout{...} 对 Composable 进行自定义布局，content{...} 中定义参与布局的子 Composable。

跟传统 Android 视图一样，自定义布局需要先后经历 measure、layout 两步。

  • measrue：measurables返回所有待测量的子 Composable，constraints 类似于 MeasureSpec，封装父容器对子元素的布局约束。measurable.measure() 中对子元素进行测量

  • layout：placeables 返回测量后的子元素，依次调用placeable.place()对雨滴进行布局，通过 xPosition 预留雨滴在 x 轴的间隔

经过 layout 之后，通过 modifier.rotate(30f) 对 Composable 进行旋转，完成最终效果：

四、雪天效果

雪天效果的关键在于雪花的飘落。

4.1 雪花的绘制

雪花的绘制非常简单，用一个圆圈代表一个雪花。

Canvas(modifier) {

 val radius = size / 2
 
 drawCircle( 
  color = Color.White,
  radius = radius,
  style = FILL
 )

  drawCircle(
   color = Color.Black,
     radius = radius,
  style = Stroke(width = radius * 0.5f)
 )
}

4.2 雪花飘落动画

雪花飘落的过程相对于雨滴坠落要复杂一些，由三个动画组成:

  1. 下落：改变 y 轴坐标：0f ~ 2.5f；

  2. 左右飘移：改变 x 轴的 offset：-1f ~ 1f；

  3. 逐渐消失：改变 alpha：1f ~ 0f；

借助 InfiniteTransition 同步控制多个动画，代码如下：

@Composable
private fun Snowdrop(
 modifier: Modifier = Modifier,
 durationMillis: Int = 1000 
) {
  val transition = rememberInfiniteTransition()

  val animateY by transition.animateFloat(
    initialValue = 0f,
    targetValue = 2.5f,
    animationSpec = infiniteRepeatable(
      tween(durationMillis, easing = LinearEasing),
      RepeatMode.Restart
    )
  )

  val animateX by transition.animateFloat(
    initialValue = -1f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
      tween(durationMillis / 3, easing = LinearEasing),
      RepeatMode.Reverse
    )
  )

  val animateAlpha by transition.animateFloat(
    initialValue = 1f,
    targetValue = 0f,
    animationSpec = infiniteRepeatable(
      tween(durationMillis, easing = FastOutSlowInEasing),
    )
  )

  Canvas(modifier) {
    val radius = size.width / 2
    val _center = center.copy(
      x = center.x + center.x * animateX,
      y = center.y + center.y * animateY
    )

    drawCircle(
      color = Color.White.copy(alpha = animateAlpha),
      center = _center,
      radius = radius,
    )

    drawCircle(
      color = Color.Black.copy(alpha = animateAlpha),
      center = _center,
      radius = radius,
      style = Stroke(width = radius * 0.5f)
    )
  }
}

animateY 的 targetValue 设为 2.5f 是为了让雪花的运动轨迹更长，看起来更加真实。

4.3 雪花的自定义布局

像雨滴一样，对雪花也使用 Layout 自定义布局。

@Composable
fun Snow(
  modifier: Modifier = Modifier,
  animate: Boolean = false,
) {
  Layout(
    modifier = modifier,
    content = {

        Snowdrop( modifier.fillMaxSize(), 2200)
        Snowdrop( modifier.fillMaxSize(), 1600)
        Snowdrop( modifier.fillMaxSize(), 1800)
    }
  ) { measurables, constraints ->
    val placeables = measurables.mapIndexed { index, measurable ->
      val height = when (index) {
        0 -> constraints.maxHeight * 0.6f
        1 -> constraints.maxHeight * 1.0f
        2 -> constraints.maxHeight * 0.7f
        else -> 0f
      }
      measurable.measure(
        constraints.copy(
          minWidth = 0,
          minHeight = 0,
          maxWidth = constraints.maxWidth / 5, 
          maxHeight = height.roundToInt(),
        )
      )
    }

    layout(constraints.maxWidth, constraints.maxHeight) {
      var xPosition = constraints.maxWidth / ((placeables.size + 1))

      placeables.forEachIndexed { index, placeable ->
        placeable.place(x = xPosition, y = -(constraints.maxHeight * 0.2).roundToInt())

        xPosition += (constraints.maxWidth / ((placeables.size + 1) * 0.9f)).roundToInt()
      }
    }
  }
}

最终效果如下：

五、晴天效果

通过一个旋转的太阳代表晴天效果。

5.1 太阳的绘制

太阳的图形由中心圆形，和围绕圆环的等分线段组成。

@Composable
fun Sun(modifier: Modifier = Modifier) {
  Canvas(modifier) {

    val radius = size.width / 6
    val stroke = size.width / 20

    drawCircle(
      color = Color.Black,
      radius = radius + stroke / 2,
      style = Stroke(width = stroke),
    )
    drawCircle(
      color = Color.White,
      radius = radius,
      style = Fill,
    )
    
    val lineLength = radius * 0.2f
    val lineOffset = radius * 1.8f
    (0..7).forEach { i ->

      val radians = Math.toRadians(i * 45.0)

      val offsetX = lineOffset * cos(radians).toFloat()
      val offsetY = lineOffset * sin(radians).toFloat()

      val x1 = size.width / 2 + offsetX
      val x2 = x1 + lineLength * cos(radians).toFloat()

      val y1 = size.height / 2 + offsetY
      val y2 = y1 + lineLength * sin(radians).toFloat()

      drawLine(
        color = Color.Black,
        start = Offset(x1, y1),
        end = Offset(x2, y2),
        strokeWidth = stroke,
        cap = StrokeCap.Round
      )
    }
  }
}

均分 360 度，每间隔 45 度画一条线段，cos计算 x 轴坐标，sin计算 y 轴坐标。

5.2 太阳的旋转

太阳的旋转动画很简单，通过 Modifier.rotate 不断转动 Canvas 即可。

@Composable
fun Sun(modifier: Modifier = Modifier) {
  val animateTween by rememberInfiniteTransition().animateFloat(
    initialValue = 0f,
    targetValue = 360f,
    animationSpec = infiniteRepeatable(tween(5000), RepeatMode.Restart)
  )

  Canvas(modifier.rotate(animateTween)) {
    val radius = size.width / 6
    val stroke = size.width / 20
    val centerOffset = Offset(size.width / 30, size.width / 30) 
    drawCircle(
      color = Color.Black,
      radius = radius + stroke / 2,
      style = Stroke(width = stroke),
      center = center + centerOffset 
    )
  }
}

此外，DrawScope 提供了 rotate 的 API，也可以实现旋转效果。

最后我们给太阳的圆心增加一个偏移量，让转动更加活泼：

六、动画的组合、切换

在实现了 Rain、Snow、Sun 等图形后，就可以使用这些图形组合成各种天气效果了。

6.1 将图形组合成天气

Compose 的声明式语法非常有利于 UI 的组合：

比如，多云转阵雨，我们摆放 Sun、Cloud、Rain 等元素后，通过 Modifier 调整各自位置即可：

@Composable
fun CloudyRain(modifier: Modifier) {
 Box(modifier.size(200.dp)){
  Sun(Modifier.size(120.dp).offset(140.dp, 40.dp))
  Rain(Modifier.size(80.dp).offset(80.dp, 60.dp))
  Cloud(Modifier.align(Aligment.Center))
 }
}

6.2 让动画切换更加自然

当在多个天气动画之间进行切换时，我们希望能实现更自然的过渡。

实现思路是将组成天气动画的各元素的 Modifier 配置变量化，然后通过 Animation 不断改变。

假设所有的天气都由 Cloud、Sun、Rain 组成，无非就是 offset、size、alpha 值的不同：

6.3 ComposeInfo

data class IconInfo(
  val size: Float = 1f, 
  val offset: Offset = Offset(0f, 0f),
  val alpha: Float = 1f,
) 

data class ComposeInfo(
  val sun: IconInfo,
  val cloud: IconInfo,
  val rains: IconInfo,

) {
  operator fun times(float: Float): ComposeInfo =
    copy(
      sun = sun * float,
      cloud = cloud * float,
      rains = rains * float
    )

  operator fun minus(composeInfo: ComposeInfo): ComposeInfo =
    copy(
      sun = sun - composeInfo.sun,
      cloud = cloud - composeInfo.cloud,
      rains = rains - composeInfo.rains,
    )

  operator fun plus(composeInfo: ComposeInfo): ComposeInfo =
    copy(
      sun = sun + composeInfo.sun,
      cloud = cloud + composeInfo.cloud,
      rains = rains + composeInfo.rains,
    )
}

如上，ComposeInfo 中持有各种元素的位置信息，运算符重载用于跟随 Animation 计算当前最新值。

定义不同天气的 ComposeInfo 如下：

val SunnyComposeInfo = ComposeInfo(
  sun = IconInfo(1f),
  cloud = IconInfo(0.8f, Offset(-0.1f, 0.1f), 0f),
  rains = IconInfo(0.4f, Offset(0.225f, 0.3f), 0f),
)

val CloudyComposeInfo = ComposeInfo(
  sun = IconInfo(0.1f, Offset(0.75f, 0.2f), alpha = 0f),
  cloud = IconInfo(0.8f, Offset(0.1f, 0.1f)),
  rains = IconInfo(0.4f, Offset(0.225f, 0.3f), alpha = 0f),
)

val RainComposeInfo = ComposeInfo(
  sun = IconInfo(0.1f, Offset(0.75f, 0.2f), alpha = 0f),
  cloud = IconInfo(0.8f, Offset(0.1f, 0.1f)),
  rains = IconInfo(0.4f, Offset(0.225f, 0.3f), alpha = 1f),
)

6.4 ComposedIcon

接着，定义 ComposedIcon，消费 ComposeInfo 绘制天气组合的 UI。

@Composable
fun ComposedIcon(modifier: Modifier = Modifier, composeInfo: ComposeInfo) {
  val (sun, cloud, rains) = composeInfo
  Box(modifier) {
    val _modifier = remember(Unit) {
      { icon: IconInfo ->
          Modifier
            .offset( icon.size * icon.offset.x, icon.size * icon.offset.y )
            .size(icon.size)
            .alpha(icon.alpha)
      }
    }

    Sun(_modifier(sun))
    Rains(_modifier(rains))
    AnimatableCloud(_modifier(cloud))
  }
}

6.5 ComposedWeather

最后，定义ComposedWeather，通过动画更新当前的ComposedIcon：

@Composable
fun ComposedWeather(modifier: Modifier, composedIcon: ComposedIcon) {
  val (cur, setCur) = remember { mutableStateOf(composedIcon) }
  var trigger by remember { mutableStateOf(0f) }

  DisposableEffect(composedIcon) {
    trigger = 1f
    onDispose { }
  }

  val animateFloat by animateFloatAsState(
      targetValue = trigger,
      animationSpec = tween(1000)
  ) {
    setCur(composedIcon)
    trigger = 0f
  }

  val composeInfo = remember(animateFloat) {
    cur.composedIcon + (weatherIcon.composedIcon - cur.composedIcon) * animateFloat
  }


  ComposedIcon(
    modifier,
    composeInfo
  )
}

到此，我们就实现了天气动画的自然过度了。

七、最后

Compose 通过声明式的方式，实现自定义图形及其动画，这相比与命令式的代码来的更加简单，这也让用代码替代 gif 等实现动画、表情成为可能，经代码绘制的效果在清晰度以及帧率上也都要远超 gif，欢迎大家下载源码体验。

当然，在我看来 Compose 精髓绝不仅是 UI，后面有机会将分享更多关于架构以及底层实现的内容，希望与大家一起学习和讨论。

-- End --

本文对你有帮助吗？留言、转发、点好看是最大的支持，谢谢！

references：

  • github：https://github.com/vitaviva/compose-weather

  • Canvas：https://developer.android.com/jetpack/compose/graphics#canvas

  • CustomLayout：https://developer.android.com/jetpack/compose/layout#custom-layouts

推荐阅读：

还在用 Glide？看看 Google 官推的图片库 Coil 有何不同！

效果炸了，Drawable 实现红鲤鱼动画，点哪儿游哪儿（下）

把倒计时做到极致，又准、又稳！

承香墨影
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Holi:Holi是一款轻巧的Jetpack Compose库，可满足您所有调色板需求的颜色，渐变和炫酷的实用功能！
04-01
洒红节 使用Jetpack Compose for Android构建的颜色，渐变和实用程序库 特征 来自不同调色板的多种颜色，可轻松在您的宠物项目中使用 提供您所有可组合画笔所需的简单渐变构建功能 大小仅为28 KB！ 超过450种预定义的颜色和无尽的渐变。 调色板 材质颜色 平面颜色 酷色 德古拉的颜色 调色板展示柜 酷色 材质颜色 平面颜色 吸血鬼颜色 渐变混合机展示柜 方向梯度 定向多颜色渐变 使用颜色 您可以使用每个调色板和获利的容器对象来简单地选择颜色。 例如。 MaterialColor . RED CoolColor . FIREBRICK FlatColor . EMERLAND DraculaColor . YELLOW 选板参考 使用渐变 对于Holi而言，使用渐变非常容易，只需使用GradientMixer并从各种渐变画笔生成功能中进行选择
android 天气动画,为app制作炫酷天气动画 – WeatherView
weixin_34621309的博客
05-25 969
WeatherView从1.1.0版本开始这个库使用了一个不同的setter结构。WeatherView是一个为app制作一个炫酷天气动画的Android库。SetupAndroid Studio / grandle在项目的 build.gradle 添加下列依赖 :repositories {maven { url = 'https://jitpack.io' }}dependencies {c...
Jetpack Compose中的动画
川峰的博客
12-17 2047
Jetpack Compose中没有沿用Android原有的View动画和属性动画，而是新创建了一套全新的动画系统API，这是理所当然的，因为旧的动画系统主要是基于View体系的，而Compose中需要针对的是Composable可组合函数进行处理，那么势必要创造一套新的玩具出来，同时，这也无疑增加了开发者的学习成本。 乍一看Jetpack Compose中的动画Api，尼玛是真的多呀，我C了，简直令人眼花缭乱、云里雾里、天马行空、小兔乱撞、手脚慌乱、头冒虚汗、四肢抓狂、不知所措呀 。。。😭
Jetpack Compose中的Canvas
川峰的博客
01-13 1622
Jetpack Compose中直接提供了一个叫 Canvas 的 Composable 组件，可以在任何 Composable 组件中直接使用，在 Canvas 的DrawScope作用域中就可以使用其提供的各种绘制Api进行绘制了。这比传统View要方便的多，传统View中，你只能继承一个View控件，才有机会覆写其onDraw()方法。Canvas Api使用相比比传统View中的要简单一些，不需要画笔Paint和画布分开来，大多数直接就是一个函数搞定，当然也有一些限制。
Jetpack Compose - Canvas
乐翁龙
03-10 2560
Jetpack Compose - Canvas0、介绍1、属性一览2、使用示例2.1、drawArc2.2、drawCircle2.3、drawImage2.4、drawLine2.5、drawOval2.6、drawPath2.7、drawPoints2.8、drawRect，drawRoundRect3、版本更新4、未解决问题 Compose系列文章，请点原文阅读。原文，是时候学习Compose了！ 0、介绍 Canvas 是允许您在屏幕上指定区域并在此区域上执行绘制的组件。您必须使用修饰符指定
Jetpack Compose入门到精通
01-29
Jetpack Compose入门到精通
Jetpack Compose入门到精通.pdf
09-06
为了可以进行模板式的开发，Google 在2018年推出了 Android Jetpack。现在 Google 的应用市场中，大部分 APP 已经开始使用 Android Jetpack。Android Jetpack 组件的集合可以帮助我们写大量重复的代码的任务，并且...
Retrogamer-Compose:使用Jetpack Compose实现的复古游戏
03-08
Retrogamer-撰写 :brick: 俄罗斯方块
Jetpack Compose 入门到精通.pdf
11-25
Jetpack Compose 入门到精通
compose-icons:Jetpack Compose的开源图标包
03-28
Compose图标是一包库，提供了可在Jetpack Compose Multiplatform中使用的众所周知的Icon Pack。 库的使用受到“构成材料图标”的启发。 撰写版本 Jetpack撰写（Android）： 1.0.0-beta01 Jetbrains组成（桌面）： ...
compose-weather:CuteWeather是Jetpack Compose中一个美丽的天气应用程序构建
03-25
可爱天气 CuteWeather是Jetpack Compose中一个美丽的天气应用程序构建 :scroll: 描述 用可爱的动画显示天气信息 每日和每小时温度趋势 在华氏温度和摄氏温度之间切换 支持Android辅助功能对讲 查看更多： :light_bulb: 动机与情境 没有GIF，Lottie或其他静态资源， 所有UI元素都是使用Jetpack Compose图形，动画等代码创建的。 :camera_with_flash: 屏幕截图 执照 Copyright 2020 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of t
Jetpack compose：炫酷的按钮点击效果
虎哥LoveDroid
03-25 1523
表示与组件发出的事件相对应的交互流。这些交互可用于更改组件在不同状态下的显示方式，例如当组件被按下或拖动时。所以这里我们有一个返回空流，这意味着按钮不会对不同的点击状态做出反应，例如按钮按下或拖动。如何使用这个自定义的？按钮有属性。检查此输出。你将有一个没有任何效果的按钮。RippleAlpha 为不同的交互定义了波纹/状态层的 alpha。我们为所有状态添加了 0.0f，这意味着没有连锁反应。
compose--动画
aruba的博客
12-14 1142
compose中本身封装了很多动画，我们可以拿来直接使用，动画也可以从官网进行学习：Compose动画 一、AnimationSpec compose中的动画效果都是由AnimationSpec定义的，它包含了动画执行时长，估值器，插值器的功能，我们也可以通过AnimationSpec自定义动画效果，所以在真正使用compose动画之前，先对AnimationSpec来做学习 1.spring s...
Android 很酷的天气动画控件
莫爷博客
12-08 6170
今日推荐WeatherView是一个Android库，可以帮助你做一个很酷的天气动画为您的应用程序。 这个图书馆是基于这个Leonids图书馆。 使用Android Studio / grandle添加到项目的build.gradle里面 :repositories { maven { url = ‘https://jitpack.io’ } }dependencies {
android 天气动画,安卓实现旋转风车动画(仿华为天气预报)
weixin_33736279的博客
05-25 378
旋转风车实现效果实现方案对于风车的立柱部分，采用一张固定背景图；对于风车上面旋转部分，采用一张图，通过安卓属性动画进行旋转。注意点： 因为是采用两张图叠加而形成的效果，所以需要注意调整两张图的相对位置，使之刚好形成风车旋转效果。主要代码BaseWindmillView.ktabstract class BaseWindmillView constructor(context: Context, a...
Android自定义View--用贝塞尔曲线实现一加多云天气
Dawish的专栏
01-07 1944
之前看到了一加天气，感觉做得还是很讨巧的，利用了传感器来控制动画效果，是使用Android手机的朋友还没有体验过，那就去试一下吧一加天气官方网站，下面是我简单地实现了一下的效果图： 代码很简单，就是用了五个二阶贝塞尔曲线，不断来回改变控制点的Y坐标不断重绘界面。package danxx.library.widget; import android.content.Context; import
Jetpack Compose 中使用 Lottie 动画
移动端开发干货分享
09-27 1557
从事 Android 开发的 都知道 airbnb 的 Lottie 库，如今它也支持在 Jetpack Compose 中使用了
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 1178
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
Jetpack Compose 实现沉浸式效果
06-11
要在 Jetpack Compose 中实现沉浸式效果，可以使用 System UI Controller API 来控制状态栏和导航栏的可见性和颜色。 首先，需要在 AndroidManifest.xml 文件中设置主题为 NoActionBar，这样可以去除默认的 ActionBar，从而实现更好的沉浸式效果。 接下来，在 Composable 中使用 SystemUiController API 来控制状态栏和导航栏的可见性和颜色。例如，要隐藏状态栏和导航栏，可以使用以下代码： ```kotlin val systemUiController = rememberSystemUiController() systemUiController.isStatusBarVisible = false systemUiController.isNavigationBarVisible = false ``` 要设置状态栏和导航栏的颜色，可以使用以下代码： ```kotlin val systemUiController = rememberSystemUiController() systemUiController.setStatusBarColor(Color.Transparent, darkIcons = false) systemUiController.setNavigationBarColor(Color.Transparent) ``` 这里的 darkIcons 参数表示状态栏图标和文字是否使用深色，如果设置为 true，则状态栏图标和文字会使用深色，否则使用浅色。 需要注意的是，System UI Controller API 只在 Android 11 及以上版本中可用，如果要在更早的版本中实现沉浸式效果，可以使用 SystemBarStyle API 或者自定义 View 来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值