构建和 Telegram 一样的上传动画

• 原文地址：Telegram-like uploading animation
• 原文作者：Michael Spitsin
• 译文出自：翻译计划
• 本文永久链接：github.com/xmarkdownpaditu/gold-m…
• 译者：霜羽 Hoarfroster
• 校对者：Kimhooo、greycodee

前段时刻，我研讨了一个新功用：在 app 内部谈天后端开发中发送图片。这个功用本身很大，包含了多种东西，但实际上，初步并没有规划上传动画与吊销上传的功用。当我用到这部分的时候，我选择添加图片上传动画，所以咱们就给他们这个功用吧：)

View vs. Drawable

其实，这是个好问题。由于假定咱们看看我的其他一篇关于声纳类动画的文章，我在那里用了一个 Drawable。在我markdown是什么意思个人看来markdownpad，StackOverflow 这儿就有app装置下载个很好的简练的答案。

Drawable 只照顾制作操作，而 View 照顾制作和用户界面GitHub，比方触摸工作和封闭屏幕等等。

现在咱们来分析一下，咱们想要做什么。咱们希望有一条无限旋转的弧线做圆形动画，而且弧线的圆心角不断添加直到圆心角等于 2。我觉得一个 Drawable 应该能够安全帮上我的忙，而且实际上我也应该那样做，但我没有。

我没有这样做的原因在上面示例图片中的文字右边那三个小的点点的动画上。我现已用自界说 ViMarkdownew 完成了这个动画，而且我现已为无限循环的动画预备了布景。对我appointment来说把动画预备逻辑后端破解体系提取到父 View 中重用，而appreciate不是把一github直播渠道永久回家切东西都重写成 Drawable，应该是更简略的APP。所以我并不是说我的处理计划github直播渠道永久回家是正确的（其实没有什么是正确的），而是它满意approach了我安全教育渠道的需求。

Base InfiniteAnimationView

为了自己的需求，我将把想要的开展视图分红两个视图：

1. ProgressView —— 担任制作所需的开展 View
2. InfiniteAnimate安全教育渠道登录View ——github下载 抽象 View，它担任动画的预备、发动和间断。由于开展中包含了无限旋转的部分，咱们需求了解什么时候需求发动这个动画，什么时候需求间断这个动画

在检查了 Android 的 ProgressBar 的源代码后，咱们能够毕竟得到这样的作用：

// Infi安全教育渠道登录niteAnapproveimateView.kt
abstract classapprove InfiniteAnimateView @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
private var isAggregatedVisible: Boolgithub直播渠道永久回家ean = false
private var animation: Animator? = null
override fun onVisibilityAggregated(isVisible: Boolean) {
super.onVisibilgithub怎样下载文件ityAggregated(igithub永久回家地址sVisible)
if (isAggregatedVisible != isVisib后端开发薪酬一般多少le) {
isAggregatedVisible = isVisible
if (i后端开发薪酬一般多少sVisible) startAnimation() else stopAnimagithub是干什么的tion()
}
}appointment
override fungithub敞开私库 onAttachedToWindow() {
super.onAttachedToWindow()
star安全期是哪几天tAnimation()
}
override fun onDetachedFromWindow() {
stopAnimation()
suapproachper.onDetachedFromWindow()
}
privgithub中文官网网页ate fun startAnimation() {
if (!isVisible || wi后端开发需求学什么ndowVisibility != V安全出产法ISIBLE) return
if (animation == null) angithub下载imation = createAnimation().apply { start() }
}
protected abstract fun createAnimation(): Animator
private fun stop安全期计算器Animation() {
animation?.cancel()
animation = null
}
}

怅惘的是，首要出于 onVisibilityAggregated 办法的原因，它并无法作业 —— 由于[这个办法在 API 24 以上才被支撑](developermarkdown中文官网.android.com/reference/a… !isVisible || windowVisibility != VISIBLE 上的问题，markdown下载当视图是可见的，但它的容器却不可见。所以我选择重写这个：

// InfiniteAnimateView.kt
abstract class InfiniteAnimateView @JvmOverloads constructor(
context: Context, attrs: AttribuappreciateteSet? = nuapplicationll, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
private var animation后端开发: Animator? = null
/**
* 咱们不能够运用 `onVisibilityAggregithub打不开gated` 办法，由于它只在 SDK 24 以上被支撑，安全期是哪几天而咱们的最低 SDK 是安全期是哪几天 21
*/
override fun onVisibiappstorelityChanged(changedView: View, visibility: Int) {
super.onVisibilityChanged(安全期是哪几天chan后端开发gedView, visibility)
if (isShown) startAnimation() else stopAnimation()
}
override fun onAttachedToWind安全教育渠道ow() {
super.onAttachedmarkdown是什么意思ToWindow()
startAnimation()
}
override fun onDetachedFromWindow()markdown下载 {
stopAnimation()
super.onDetachedFromWindow()
}
private fu后端开发需求学什么n st安全期artAnimation() {
if (!isShown) r后端破解体系eturn
if (animation == null) animation = createAnimation().apply { start() }
}
protected abstract fun createAgithub打不开nimation(): Animator
private fun stopAnimmarkdownpadation() {
animation?.cancel()
animation =Markdown null
}
}

不幸的是，这也没有用（尽APP管我觉安全得它应该能够正常作业的）。说实话，我不知道问题的具体原因。或许在普通的状况下会有用，但是关于 RecyclerView 就不行了。前段时刻我就遇到了这个问题：假定运用 isShown 来跟踪一些东西是否在 RecyclerView 中闪现。因后端开发此或许我的毕竟处理计划并不正确，但至少在我的计划中，application它能按照我的希望作业：

// InfiniteAnimateView.kt
abstract class InfiniteAnimateView @JvmOverloads constructor(
contMarkdownext: Context, attrmarkdown数学公式s: AttributeSet? = null, defStyleAttr:后端破解体系 Int = 0
) : View(conappletext, attrs, defStyleAttr) {
private var animation: Animator? = null
/appreciate**
* 咱们不能够运用 `onVisibilityAggregated` 办法，由于它只在 SDK 24 以上被支撑，而咱们的最低 Smarkdown格局DK 是 21
*/
override fun onVimarkdown中文官网sibi安全教育渠道登录进口lityChanged(changedView: View, visibility: Int) {
super.onVisibilityChappleanged(changedView, visibility)
if (isDeepVisible()) startAnim后端开发薪酬一般多少ati后端结构on() else s后端开发topAnimation()
}
override fun onAttachedTmarkdown下载oWindow() {
super.onAttachedToWindow()
startAnimation()
}
override fun onDetacapproachhedFromWindow() {
stopAnimation()
super.onDetachedFromWimarkdown教程ndow()
}
private fun sgithub下载tartAnimation() {
if (!isAttachedToWindow || !isDeepVisible()) return
if (animation == null) animation = create后端言语Animation().apply { start() }
}appreciate
protected abstract fun createAnimation(): Animgithub永久回家地址ator
privappleate fun stoapprovepAnimation() {
aapproachnimation?.camarkdown教程ncel()
animation = null
}
/**
* 或许这个函数上完成了 View安全教育日是哪一天.isShown，但我发觉到它有一些问题。
* 我在 Lottie lib 中也遇到了这些问题。不过由于咱们总是没有时刻去深入研讨
* 我选择运用了这个简略的办法暂时处理这个问题，只为确保它能够正常作业
* 我毕竟需求什么 = =
*
* 更新：测验运用 isSh后端开发需求把握什么技术own 替代这个办法，但没有成功。所以假定你知道
* 怎样改appstore进，欢迎谈论区讨论一下
*/
private fun isDeepVisible(): Boolean {
var isVappstoreisible = isVisible
var parent = parentView
wappearancehilegithub怎样下载文件 (parent != null && isVisible) {
isVisible = isVisible && parent.isVisible
parent = parent.parentViMarkdownew
}
return isVisible
}
private val View.parentView: ViewGroup? get(安全手抄报) = parent as? ViewGroup
}安全出产法

开展动画

预备

那么首先咱们来谈谈咱们 View 的结构。它应该包含哪些绘画组件？在当前情境下最好的表达方式便是声明不同的 Paint。

// progress_paints.kt
private val bgPaintappearance = Paint(Paint.ANTI_ALIAS_FLAG).apply {
style = P后端组aint.Style.FIAPPLL
color = defaultBgColor
}
private val bgStrokePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
style = Paint.Smarkdown软件tyle.STROKappreciateE
color = defaultBgStrokeColor
strappreciateokeW安全期计算器idth = context.resources.getDimension(R.dimen.chat_progress_bg_stroke_width)
}
private val progressPaint = Paint(Paint.ANTI_ALIAS_FLmarkdown教程AG).apply {
style = Paint.Style.STROKE
strokeCap = Paint.Capgithub直播渠道永久回家.BUTT
strokeWidth = context.resources.getDim后端结构ension(R.dimen.cmarkdownpadhat_progress_stroke_width)
color = defaultProgressColor
}

为了展现我将改动笔触的宽度和其他东西，所以你会看到某些方面的不同。这 3 个 Paint 就与 3 个要害部分的开展相关联：

左： background; 中：markdown格局 strapproveoke; 右： progress

你或许想知道为什么安全期是哪几天我要用 Paint.Cap.BUTT。后端开发需求把握什么技术好吧，为了让这个开展更 “Telegram”（至少在 iOS 设备上是这样），你应该运用 Paint.Cap.ROUND。让我来演示一下这三种或许的样式之间的差异（这儿添加了描边宽度以让差异更显着）。

左： Cap.BUTT，中： Cap.ROUappointmentND，右： Cap.SQUARE

因此，首要的差异是，Cap.ROUND 给笔画的安全教育渠道角以特别的圆角，而 Cap.BUTT 和appointment Cap.SQUARE 仅仅切开。Cap.SQUARE 也和 Cap.ROUND 相同预留了额定的空间，但没有圆角作用。这或许导致 Cap.SQ后端开发UARE 闪现的视点与 Ca后端开发p.BUTT 相同但预留了额定的空间。

试图用 Cap后端言语.BUTT 和 Capmarkdown数学公式.SQUARE 来appstore闪现 90 度。appointment

考虑到一切这些状况，咱们最好运用 Cap.BappearanceUTT，由于它比 Cap.SQUARE 闪现markdown教程的视点标明更恰当。

趁便说一下 Cap.BUTT 是画笔默许的笔刷类型。这儿有一个官方的文档链接。但我想向你展现实markdown数学公式在的差异，由于初步我想让它变成 ROUND，然后我初步运用 SQUARE，但我留意到了一些特application性。

Base Spinning

动画本身其实很简略，由于咱们有 InfiniteAnimateView：

ValueAnimator.ofFloat(安全期是哪几天currentAngle, currentAngle + MAX_ANGLE)
.apply {
interpolator = LinearInterpolator()
duration = SPIN_DURATION_MS
repeatCount = Va安全期计算器lueAnimator.INFINITE
addUpdateListener {
currentAngle = normalize安全教育日是哪一天(it.animatedValue as Float)
}
}

其间 normalize 是一种简略的办法用于将恣意角缩小approach回 [0, 2)后端结构 区间内。例如，关于视点 400.54 nmarkdown语法ormalize 后便是 40.54。

private fun normalize(angle: Float): Float安全教育日是几月几日 {
val decimal = angle - angle.toInt()
return (angle.toInt() % MAgithub官网X_ANGLE)approach + decimal
}

丈量与制作

咱们将依托由父视图提供的丈量标准或运用在 xml 中界说的精确的 layout_width、layout_height 值进行制作。因此，咱们在 View 的丈量方面github官网不需求任何工作，但咱们会运用丈量的标准来预备开展矩形并在其间制作 View。

嗯，这并不难，但咱们需求github敞开私库记住一些工作：

• 咱们不能只拿 measuredWidth、measuredHeight 来画圆圈布景、开展、描边（首要是描边的原因）。假定咱们不考虑描边的宽度，也不从标准核算中减去它的一半，咱们毕竟会得到看起来像切开的鸿沟：

• 假定咱们不考虑笔触的宽度，咱们或许毕竟会在绘图阶段将其堆叠。（这关于不透明的色彩来说是能够的）

但是，假定你将运用半透明的色彩，你就安全会看github下载到很乖僻的堆叠（我添加了笔触宽度以更markdown编辑器明晰地展现问题所在）。

扫描动画的视点

好了，github直播渠道永久回家毕竟是开展本身后端组。假定咱们能够把它从 0 改成 1：

@FloatRgithub官网ange(from = .0, to = 1.0, toInclusive = false)后端工程师
var progress.Float = 0f Float = 0f

为了制作弧线，咱们需求核算一个特别的扫描动画的视点，而它便是绘图部分的一个特别视点。360 —— 一个无缺的圆将被制作。9approve0 —— 将画出圆的四分之一。

所以咱们需求将开展转化为度数，一同，咱们需求坚持扫描角不为 0。也approach便是说即使 progress 值等于 0，咱们也要制作一小块的开展。

private安全手抄报 fun convertToSweepAngle(progress: Float): Float =
MIN_SWEEP_ANGLE + progress * (MAX_ANGLE - MIN_SWEEP_ANGLE)

其间 MAX_ANGLE = 360（当然你能够自界说为任何视点），MIN_SWEEP_ANGLE 是最小的开展，github永久回家地址以度数为单位。最小开展会在 progress = 0 就会替代 pappointmentrogress 值。

代码放一安全手抄报起！

现在将一切的代码吞并一同，咱们就能够构建无缺的 View 了：

// ChatProgressView.kt
class ChaapprovetProgressView @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : InfinapproveiteAnimateView(context, attrs, defStyleAttgithub中文社区r) {
private val defaultBgColor: Int = context.getColorCompat(R.colomarkdown编辑器r.chat_progress_bg)
private val defaultBgSt后端破解体系rokeColor: Int = context.g后端工程师etColorCompappleat(R.color.chat_progress_bg_stroke)
privapproveate val defaultProgressColor: Int = context.getCo后端和前端有什么区别lorCompat(R.color.white)
private val progres后端开发需求学什么sPadding = context.resources.getDimension(R.dimen.chat_progress_paddinapplicationg)
private val bgPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
style = Paint.Style.FILL
color = dappearanceefaultappearanceBgColmarkdown语法or
}
private val bgStrokePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
style = Paint.Style.STROKE
color = defaultBgStrokeColor
strokeWidth = context.resmarkdown是什么意思ources.getDimension(R.diapproachmen.chat_progress_bg_stroke_width)
}github是干什么的
private val progressPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
style = Paint.Style.STROKE
strokeWidth = context.resources.getDimension(R.dimen.chat_progress_stroke后端组_width)
color = defaultProgressColor
}
@FloatRange(from = .0, to =github直播渠道永久回家 1.0, toInclusive = false)
var progress: Float = 0f
set(vgithub中文社区al后端开发ue) {
field = when {
value < 0f -> 0f
value > 1f -> 1f
else -后端组> value
}
sweepAngle = convertToSweepAngle(field)
invalidate()
}
// [0,github敞开私库 360)
private var currentAngle: Float b后端y observable(0f) { _, _, _ -> invalidate() }
private var sweepAngappointmentle: Float by observable(MIN_SWEEP_ANGLE) { _, _, _ -> invalidate() }
private val progressRect: RectF = RectF()
private var bgRadius: Float = 0f
in安全教育渠道it {
attrs?.parseAttrs(context, R.styleable.ChatProgressView) {
bgPaint.color = getColor(R.styleable.ChatProgressView_bgC安全出产法olor, defaultBgColor)
bgStrokePaint.color = get后端组Color(R.styleable.ChatProgressView_bgStrokeColor, defaultBgStrokeColor)
progressPaint.color = getColor(R.styleable.ChatProgressView_progressColor, defaultProgressColor)
}
}
override fun onMeasure(widthMeasureSpegithub敞开私库c: Int, heightMeasureSpec: Int) {
sumarkdown教程per.onMeasure(widthMeasureSp后端开发需求学什么ec, heightMeasureSpecmarkdown数学公式)
vaappointmentl horizHalf = (measuredWidth - padding.hgithub敞开私库orizontal) / 2f
val vertHalf = (measuredHeight - padding.vertical) / 2f
val progresappreciatesOffsappleet = progressPadding + progressPaint.strokeWidth / 2f
// 由于笔画在线的后端中心，咱们需求为它留出一半的安全空间，否markdown教程则它将被堵截的鸿沟
bgRadius = min(horizHalf, vertHalf) - bgStrok安全期是哪几天ePaint.strokeWidth / 2f
val progressRectMinSize = 2 * (min(horizHalf, vertHalf) - prgithub打不开ogressOffset)
prog后端组ressRect.apply {
le安全出产法ft = (measuredWidth - progressRectMinSize) / 2f安全期是哪几天
top = (measumarkdown下载redHeight - progressRectMinSize) / 2f
right = (measuredWidth + progressRectMinSize) / 2f
bottom = (measure安全出产法dHeight + progressRectMinSize) /appointment 2f
}
}
override fun o安全教育渠道nDraw(canvas: Canvas) {
super.onDraw(cangithub直播渠道永久回家vas)
with(canvas) {
//(radius - strokmarkdown编辑器eWidth) - because we don't want to o后端组verlap colors (since they by default translucent)
d安全期rawCircle(progressRect.centermarkdown是什么意思X()后端开发需求学什么, progmarkdown教程ressRect.centerY(), bgRadius - b后端开发需求学什么gStrokePaint.strokeWidth / 2f, bgPaint)
drawCircle(progressRect.centerX(), progregithub打不开ssRect.centerY(), bgRadius, bgStrokePaint)
drawArc(progressRect, currentAngle, sweepAngle, false, progressPaint)
}
}
override fun createAnimation(): Animator = ValueAnimator.ofFloat(currentAngle, currentAngle + MAX_ANGLE).apply {
interpolatappleor = LinearInterpolator()
duration = SPIN_DURATION_MS
repeatCount = ValueAnimator.INgithub打不开FINITE
addUpdateListener { currentAngle = normalize(it.animatedValue as Float) }
}
/**
* 将恣意角markdown格局转化至 [0, 360)
* 比方说 angle = 400.安全教育渠道登录54 => return 4APP0.54
* anapproachgle = 360 => return 0
*/
private fun normalize(angle: Float): Float {
val decimal = angle - angle.toInt()
return (angle.toInt() % MAX_ANGLE) + decimal
}
private fun convertToSweepAngle(progress: Float): Float =
MIN_SWEEP_ANGLE + prgithub中文官网网页ogress * (MAX_ANGLE - MIN_SWEEP_ANGLE)
private companion object {
cogithub直播渠道永久回家nst val SPIN_DURATION_MS = 2_000L
cappearanceonst val MIN_SWEEP_ANGLE = 10f //in degrees
const val MAX_ANGLE = 360 //in dgithub直播渠道永久回家egrees
}
}

补偿！

补偿一下markdown数学公式，咱们能够在 drawArc 这个办法上拓展一下。你看咱们有一个 currentAgithub官网ngle 代表了制作圆弧的起始点的视点，还有一个 sweepAapplicationngle 代表了咱们需求制作多少度数的圆弧。

当开展添加时，咱们后端开发需求学什么只改动 sweep安全教育日是几月几日Angle，也便是说，假定 currentAngle 是静态值（不后端破解体系变），那么咱们将看到添加的圆弧只需一个方向。咱们能够试着批改一下。考虑一下三种状况并看看作用分别是怎样的：

// 1. 在这种状况下，弧线只在一个方向上 "添加"
drawArc(progressRect, currentmarkdown编辑器Angle, sweepAngle, false, progressPaint)
//后端破解体系 2. 在这种情后端破解体系况下，弧线在两个方向上 "添加"
drawArc(progressRect, curren后端结构tAngle - sweepAngle / 2f, sweepAngle, famarkdownpadlse, prog安全教育日是哪一天ressPain安全期是哪几天t)
// 3. 在这种情github下载况下，弧线向另一个方向 "添加"
drawArc(progAPPressRect, currentAngle - sweepAngle, sweepAngle, false, progressPaint)

而作用是：

**左：**第一种状况；**中：**第二种状况；右：第三种状况

如你所见，左APP面和右边的动画（计划一、三）在速度上并不一同。第一个给人的感觉是旋转速度加快，开展添加，而毕竟一个则相反，给人的感觉是旋转速安全期度变慢。而反之则是开展递减。

不过中心github怎样下载文件的动approach画在旋转速度上是一同的。所以，假定你不是添加开展（比方上传文件），或许仅仅减少开展（比方倒计时），那么我主张运用github是干什么的第二个计划。

跋文

动画是巨大的。像素是巨大appreciate的。形markdown软件状是巨大的。咱们只需求用爱细心对待它们。由于细节是产品中最有价值的东西;)

假定你喜爱这篇文章，别忘了点赞注重保藏一键三连！假定你有什么问题，能够谈论我，咱们来讨论一下。祝你编程愉快!

假定发现译文存在过错或其他需求改进的当地，欢迎到 翻译计划 对译文进行批改并 PR，也可获得相应奖赏积分。文章最初的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

---

翻译计划 是一个翻译优质互联网技术文章安全手抄报的社区，文章来历为 上的英文同享文章。内容掩盖 Android、iOS、前端安全教育渠道登录、后端、区块链、产品、规划、人工智能等领域，想要检查更多优质译文请继续注重 翻译计划、官方微博、知乎专栏。