使用Compose制作抖音快手视频进度条Loading动画效果

目录
  • 引言
  • Loading效果
    • BoxWithConstraints代码
    • animateFloat获取动画更新值
    • 线条动画值
    • 执行渐隐
    • 最终效果

引言

现在互联网产品，感觉谁家的App不整点视频功能，严格意义上都不能说是一个现代互联网App了，我们知道最火的是抖音、快手这类短视频App，在刷视频的同时，他们的App交互上面的一些特色能让我们一直沉浸在刷视频中；

比如，我们今天要聊的，短视频翻页流列表，视频加载缓冲的时候，Loading的设计：

它设计：在视频底部，进度条上面，当视频缓冲加载等待的时候，它有一个波纹的扩散效果，

即不干扰用户刷视频的操作，也没有很明显的突兀效果

（比如：突兀的屏幕中间大圆圈Loading，就很突兀）

Loading效果

我们先来看一下“抖音、快手App”的视频进度条Loading效果（GIF图稍微失真了点）

快手短视频首页的视频Loading

从视频里面可以看出来在视频底部，出现缓冲加载视频的时候，会有一个：“从中间往2边扩散”的效果。

GIF图放慢了一点，方便大家观看，实际研究过程，我一般是通过录制完视频，通过相册的视频编辑，去一帧一帧看，做了哪些动作，如下：

看完，我们发现：

1、一开始是在屏幕中间的位置，大概是20dp左右的宽度开始显示；

2、从中间扩散到屏幕边缘之后，会执行渐隐；

3、渐隐到透明，又开始从中间往2边扩散；

BoxWithConstraints代码

有了上面的前奏，我们就可以开始我们的编码了，那么在开始编码前，肯定需要知道宽度是多少，这里我们拿BoxWithConstraints来包我们的child composable， 我们可以看到BoxWithConstraints的代码如下：

// 代码来自：androidx.compose.foundation.layout
@Composable
@UiComposable
fun BoxWithConstraints(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content:
        @Composable @UiComposable BoxWithConstraintsScope.() -> Unit
) {
    val measurePolicy = rememberBoxMeasurePolicy(contentAlignment, propagateMinConstraints)
    SubcomposeLayout(modifier) { constraints ->
        val scope = BoxWithConstraintsScopeImpl(this, constraints)
        val measurables = subcompose(Unit) { scope.content() }
        with(measurePolicy) { measure(measurables, constraints) }
    }
}

里面用到了SubcomposeLayout，来推迟内容组合，我们可以在BoxWithConstraintsScope里面获取到最大宽度maxWidth (单位dp)。

Loading线条，我们可以用DrawScope.drawLine来画，扩散效果肯定需要有动画来更新。

animateFloat获取动画更新值

我们使用 rememberInfiniteTransition() 执行无限动画，使用animateFloat来获取动画更新的值：

// 代码来自：androidx.compose.animation.core
@Composable
fun InfiniteTransition.animateFloat(
    initialValue: Float,
    targetValue: Float,
    animationSpec: InfiniteRepeatableSpec<Float>
): State<Float>

初始值(initialValue)可以定义成50F(读者可自行修改)，目标值(targetValue)定义多少合适呢？

通过慢镜头查看“抖音、快手”的效果，发现它扩散完，会“渐隐到透明”，然后再从intialValue处开始重新扩散。

targetValue定义成maxWidth不行，那么我们拉大这个数值，可以定义成大概1.8倍的maxWidth;

由于maxWidth获取到的是dp单位的，我们需要转换成px，下面我们统一叫：width

val width = with(LocalDensity.current) {  maxWidth.toPx() }

线条动画值

然后，我们的线条动画值就变成下面这样：

val lineProgressAnimValue by infiniteTransition.animateFloat(
    initialValue = 100F,
    targetValue = width * 1.8F,
    animationSpec = infiniteRepeatable(
            animation = tween(
            durationMillis = TIME_PERIOD,
            easing = FastOutLinearInEasing
        )
    )
)
private const val TIME_PERIOD = 1100

执行渐隐

线条扩散到屏幕边缘的时候，需要执行渐隐，得出下面的alpha

val lineAlphaValue = if(lineProgressAnimValue <= width) {
    // 读者可以根据自己体验
    lineProgressAnimValue * 1.0F/ width * 1.0F
    // 读者可以根据自己体验
    //Math.min((lineProgressAnimValue.value) * 1.0F / width * 1.0F, 0.7F)
    // 抖音、快手看效果都是1F，根据自己体验来设置吧
    // 1F
} else {
    // 扩散到屏幕边缘的时候，开始触发：渐隐
    (width * 1.8F - lineProgressAnimValue) / width * 0.8F
}
// 线条宽度
val lineWidth = if(lineProgressAnimValue <= width) {
    lineProgressAnimValue / 2
} else {
    width / 2
}

最后，我们通过Canvas来绘制这个线条

Canvas(modifier = modifier) {
    drawLine(
        color = Color.White.copy(alpha = lineAlphaValue),
        start = Offset(x = size.width / 2 - lineWidth, y = 0F),
        end = Offset(x = size.width / 2 + lineWidth, y = 0F),
        strokeWidth = 2.5F
    )
}

最终效果

以上就是使用Compose制作抖音快手视频进度条Loading动画效果的详细内容，更多关于Compose视频进度条Loading的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Android Compose自定义TextField实现自定义的输入框

    Android Compose自定义TextField实现自定义的输入框

    目录 概览 简单自定义BasicTextField示例 实现自定义样式的BasicTextField 使用BasicTextField自定义百度输入框 概览 众所周知Compose中默认的TextField和OutlineTextField样式并不能满足所有的使用场景,所以自定义TextField就成了必备技能,本文就揭露一下自定义TextField的实现.自定义TextField主要使用BasicTextField实现. 简单自定义BasicTextField示例 1.代码 var text

  • Android开发Compose remember原理解析

    Android开发Compose remember原理解析

    目录 正文 随机色文本 原因分析 正确实现 remember的原理剖析 小结 正文 看过Compose案例或者源码的你,相信肯定是见过 remember 了的.顾名思义,Compose是要让我们的代码“记住”东西,那到底是记住什么呢?要是不 remember,相关功能就实现不了了吗? 带着这些问题,来一探究竟吧 随机色文本 假设有这么一个“随机底色文本”的需求:实现一个 Text,其背景色每次启动都随机产生,且生命周期内不变 用Compose可以实现如下: private val items =

  • Android开发Compose集成高德地图实例

    Android开发Compose集成高德地图实例

    目录 正文 高德地图官网开发者建议 初始化MapView并添加到AndroidView里面 MapView增加一个管理地图生命周期的扩展 给MapView添加生命周期观察者 添加MapView的生命周期控制 正文 Compose中我们应该怎么使用地图呢?像之前我们在xml里面创建MapView,都是在Activity里面,管理MapView生命周期,和其他的监听器,Compose里面怎么搞? 下面我们以高德地图为例,在Compose中创建地图MapView,然后用AndroidView添加Map

  • Android Jetpack Compose无限加载列表

    Android Jetpack Compose无限加载列表

    目录 前言 方法一: paging-compose 方法二:自定义实现 添加 LoadingIndicator 总结 前言 Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢? 两种方法可供选择: 基于 paging-compose 自定义实现 方法一: paging-compose Jetpack 的 Paging 组件提供了对 Compose 的支持 dependencies { ..

  • Android之Compose页面切换动画介绍

    Android之Compose页面切换动画介绍

    目录 前因后果 开始尝试 开始撸码 仓促的结尾 前因后果 Compose 正式版已经发布了一个多月了,从 Compose beta 版本发布之后各大网站中热度就一直不减,官方也一直在为开发者们推出学习 Compose 的文章,更加说明了 Android 开发的未来趋势. 在之前我写了 Compose 版本的玩安卓,当然也有 MVVM 版本的,只是不同分支而已,这是 Github地址:https://github.com/zhujiang521/PlayAndroid 但之前一直存在着一个问题,就

  • Android Jetpack结构运用Compose实现微博长按点赞彩虹效果

    Android Jetpack结构运用Compose实现微博长按点赞彩虹效果

    目录 原版 1. Compose 动画 API 概览 2. 长按点赞动画分解 3. 彩虹动画 3.1 状态管理 AnimatedRainbow animatedRainbows 列表 3.2 内容绘制 4. 表情动画 4.1 状态管理 AnimatedEmoji infiniteRepeatable CubicBezierEasing 抛物线动画 animatedEmojis 列表 4.2 内容绘制 5. 烟花动画 5.1 状态管理 AnimatedFlower keyframes animat

  • 使用Compose制作抖音快手视频进度条Loading动画效果

    使用Compose制作抖音快手视频进度条Loading动画效果

    目录 引言 Loading效果 BoxWithConstraints代码 animateFloat获取动画更新值 线条动画值 执行渐隐 最终效果 引言 现在互联网产品,感觉谁家的App不整点视频功能,严格意义上都不能说是一个现代互联网App了,我们知道最火的是抖音.快手这类短视频App,在刷视频的同时,他们的App交互上面的一些特色能让我们一直沉浸在刷视频中: 比如,我们今天要聊的,短视频翻页流列表,视频加载缓冲的时候,Loading的设计: 它设计:在视频底部,进度条上面,当视频缓冲加载等待的

  • Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果图: 1.切换图片: 2.彩票转盘 3.图片折叠 4.进度条旋转 5.粒子效果 一.切换图片 看起来很复杂的动画,通过少量的计算和编码就可以简单的实现.要做到这一步,必须是需要研究iOS开发中的Core Animation和Core Graphics框架的.日常工作中,对于很多东西不求甚解,只是拿过

  • Android中实现ProgressBar菊花旋转进度条的动画效果

    Android中实现ProgressBar菊花旋转进度条的动画效果

    在一些常见到的加载中需要显示一个加载动画,如旋转的菊花,旋转的圈圈等等动画-,然后我们现在就来说下怎么去试下它吧 一.菊花的旋转动画 1.新建一个drawable文件 在res/drawable下新建一个progressbar_style.xml文件定义一个旋转动画 <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable

  • python gui开发——制作抖音无水印视频下载工具(附源码)

    python gui开发——制作抖音无水印视频下载工具(附源码)

    hello,大家好啊,失踪人口回归了 [捂脸]!本次使用tkinter撰写一篇 抖音无水印视频下载,目的很纯粹,就是为了设置 微信状态视频.本篇博文中,我会写下我的代码撰写思路以及想写设计流程,代码放在了第四节,工具打包好放在了 蓝奏云,慢慢看,后面有链接. 一．准备工作 本次要用到以下依赖库:re json os random tkinter threading requests pillow 其中后两个需要安装后使用 二．预览 0.复制抖音分享短链接 1.启动 2.运行 3.结果 (小姐姐挺

  • PHP语言对接抖音快手小红书视频/图片去水印API接口源码

    以下为PHP语言调用去水印接口的示例,分别展示GET请求方式和POST请求方式的调用方式.示例代码中用到的userId和secretKey请前往开发者接口管理中心获取. 接口文档:https://jx.henghengmao.com/page/apidoc GET请求方式调用接口示例: $url = 'https://v.douyin.com/JjEFdHT/'; //请把此处的userId和secretKey换成你自己的 这是GET请求方式 $api = 'https://api.henghe

  • Python抖音快手代码舞(字符舞)的实现方法

    Python抖音快手代码舞(字符舞)的实现方法

    先上效果,视频敬上: 字符舞: 代码舞 源代码: video_2_code_video.py import argparse import os import cv2 import subprocess from cv2 import VideoWriter_fourcc from PIL import Image, ImageFont, ImageDraw # 命令行输入参数处理 # aparser = argparse.ArgumentParser() # aparser.add_argum

  • 微信小程序仿抖音短视频切换效果的实例代码

    一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的. 还是先看效果 体验路径 自定义组件系列>>仿抖音短视频切换 代码逻辑 直接调用自定义的swiper组件就好 调用代码 js const videoList = [] Page({ data: { videoList, activeId:2, isPlaying:true }, onLoad() { var that = this wx.getSys

  • 使用python爬取抖音app视频的实例代码

    使用python爬取抖音app视频的实例代码

    记录一下如何用python爬取app数据,本文以爬取抖音视频app为例. 编程工具:pycharm app抓包工具:mitmproxy app自动化工具:appium 运行环境:windows10 思路: 假设已经配置好我们所需要的工具 1.使用mitmproxy对手机app抓包获取我们想要的内容 2.利用appium自动化测试工具,驱动app模拟人的动作(滑动.点击等) 3.将1和2相结合达到自动化爬虫的效果 一.mitmproxy/mitmdump抓包 确保已经安装好了mitmproxy,并

  • 详解使用python爬取抖音app视频(appium可以操控手机)

    详解使用python爬取抖音app视频(appium可以操控手机)

    记录一下如何用python爬取app数据,本文以爬取抖音视频app为例. 编程工具:pycharm app抓包工具:mitmproxy app自动化工具:appium 运行环境:windows10 思路: 假设已经配置好我们所需要的工具 1.使用mitmproxy对手机app抓包获取我们想要的内容 2.利用appium自动化测试工具,驱动app模拟人的动作(滑动.点击等) 3.将1和2相结合达到自动化爬虫的效果 一.mitmproxy/mitmdump抓包 确保已经安装好了mitmproxy,并

  • Java用20行代码实现抖音小视频批量转换为gif动态图

    Java用20行代码实现抖音小视频批量转换为gif动态图

    本文主要介绍了Java用20行代码实现抖音小视频批量转换为gif动态图,分享给大家,具体如下: 效果图 本功能实现需要用到第三方jar包 jave,JAVE 是java调用FFmpeg的封装工具. spring boot项目pom文件中添加以下依赖 <!-- https://mvnrepository.com/artifact/ws.schild/jave-core --> <dependency> <groupId>ws.schild</groupId>

随机推荐