- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
Android 有一个标准的 ProgressBar,当不确定时有一个特殊的动画。还有很多可用的各种进度 View 库(here)。
在我搜索的所有内容中,我找不到做一件非常简单的事情的方法:
有一个从 X 色到 Y 色的渐变,水平显示,并在 X 坐标中移动,这样 X 之前的颜色就会变为 Y 色。
例如(只是一个插图),如果我有一个蓝色渐变<->红色,从边缘到边缘,它会这样:
我已经尝试过 StackOverflow 上提供的一些解决方案:
但遗憾的是,它们都是关于 Android 的标准 ProgressBar View ,这意味着它以不同的方式显示可绘制对象的动画。
我也尝试在 Android Arsenal 网站上找到类似的东西,但即使有很多不错的东西,我也找不到这样的东西。
当然,我可以自己制作 2 个 View 的动画,每个 View 都有自己的渐变(一个与另一个相反),但我相信还有更好的方法。
是否可以使用 Drawable 或它的动画,使渐变(或其他任何东西)以这种方式移动(当然是重复)?
也许只是从 ImageView 扩展并在那里为 drawable 设置动画?
是否也可以设置容器的多少将用于重复绘制?我的意思是,在上面的例子中,它可能是从蓝色到红色,所以蓝色会在边缘,红色会在中间。
编辑:
好的,我已经取得了一点进展,但是我不确定运动是否正常,并且我认为它的速度不会像它应该的那样一致,以防 CPU 有点忙,因为它不考虑丢帧。我所做的是一个接一个地绘制 2 个 GradientDrawables,如下所示:
class HorizontalProgressView @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
private val speedInPercentage = 1.5f
private var xMovement: Float = 0.0f
private val rightDrawable: GradientDrawable = GradientDrawable()
private val leftDrawable: GradientDrawable = GradientDrawable()
init {
if (isInEditMode)
setGradientColors(intArrayOf(Color.RED, Color.BLUE))
rightDrawable.gradientType = GradientDrawable.LINEAR_GRADIENT;
rightDrawable.orientation = GradientDrawable.Orientation.LEFT_RIGHT
rightDrawable.shape = GradientDrawable.RECTANGLE;
leftDrawable.gradientType = GradientDrawable.LINEAR_GRADIENT;
leftDrawable.orientation = GradientDrawable.Orientation.RIGHT_LEFT
leftDrawable.shape = GradientDrawable.RECTANGLE;
}
fun setGradientColors(colors: IntArray) {
rightDrawable.colors = colors
leftDrawable.colors = colors
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val widthSize = View.MeasureSpec.getSize(widthMeasureSpec)
val heightSize = View.MeasureSpec.getSize(heightMeasureSpec)
rightDrawable.setBounds(0, 0, widthSize, heightSize)
leftDrawable.setBounds(0, 0, widthSize, heightSize)
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
canvas.save()
if (xMovement < width) {
canvas.translate(xMovement, 0.0f)
rightDrawable.draw(canvas)
canvas.translate(-width.toFloat(), 0.0f)
leftDrawable.draw(canvas)
} else {
//now the left one is actually on the right
canvas.translate(xMovement - width, 0.0f)
leftDrawable.draw(canvas)
canvas.translate(-width.toFloat(), 0.0f)
rightDrawable.draw(canvas)
}
canvas.restore()
xMovement += speedInPercentage * width / 100.0f
if (isInEditMode)
return
if (xMovement >= width * 2.0f)
xMovement = 0.0f
invalidate()
}
}
用法:
horizontalProgressView.setGradientColors(intArrayOf(Color.RED, Color.BLUE))
结果(它确实循环良好,只是很难编辑视频):
所以我现在的问题是,我应该怎么做才能确保它的动画效果很好,即使 UI 线程有点忙?
只是 invalidate
对我来说似乎不是一种可靠的方法,独自一人。我认为它应该检查更多。也许它可以使用一些动画 API 来代替 interpolator 。
最佳答案
我决定将“pskink”答案放在 Kotlin 中(来源 here)。我在这里写它只是因为其他解决方案要么不起作用,要么是解决方法而不是我所询问的。
class ScrollingGradient(private val pixelsPerSecond: Float) : Drawable(), Animatable, TimeAnimator.TimeListener {
private val paint = Paint()
private var x: Float = 0.toFloat()
private val animator = TimeAnimator()
init {
animator.setTimeListener(this)
}
override fun onBoundsChange(bounds: Rect) {
paint.shader = LinearGradient(0f, 0f, bounds.width().toFloat(), 0f, Color.WHITE, Color.BLUE, Shader.TileMode.MIRROR)
}
override fun draw(canvas: Canvas) {
canvas.clipRect(bounds)
canvas.translate(x, 0f)
canvas.drawPaint(paint)
}
override fun setAlpha(alpha: Int) {}
override fun setColorFilter(colorFilter: ColorFilter?) {}
override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
override fun start() {
animator.start()
}
override fun stop() {
animator.cancel()
}
override fun isRunning(): Boolean = animator.isRunning
override fun onTimeUpdate(animation: TimeAnimator, totalTime: Long, deltaTime: Long) {
x = pixelsPerSecond * totalTime / 1000
invalidateSelf()
}
}
用法:
MainActivity.kt
val px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 200f, resources.getDisplayMetrics())
progress.indeterminateDrawable = ScrollingGradient(px)
activity_main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"
tools:context=".MainActivity">
<ProgressBar
android:id="@+id/progress" style="?android:attr/progressBarStyleHorizontal" android:layout_width="200dp"
android:layout_height="20dp" android:indeterminate="true"/>
</LinearLayout>
关于android - 如何创建一个重复的动画移动渐变drawable,就像一个不确定的进度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48520655/
我使用 jQuery 已经有一段时间了,但我不知道如何从一个渐变渐变到另一个渐变。我一直在用 http://www.colorzilla.com/gradient-editor/对于我的渐变。例如 b
为了使用 jni 帮助程序库运行测试,我将这样的代码添加到 build.gradle 中: def jniLibDir = "xxx" tasks.withType(Test) { syste
我正在从命令行运行 wsimport 以从 WSDL 生成 java 类,如下所示。 wsimport -J-Djavax.xml.accessExternalDTD=all -J-
我们有一个重复使用第3方 war 的项目(如果有人要求,则为shindig-server-2.0.2.war :)。这场 war 目前位于项目根目录中,当前的ant任务将其解压缩到temp文件夹中,进
我有一个边界框,其坐标由(x,y,w,h)给出,其中x和y是框的左上角坐标。我想在盒子外面应用模糊或渐变。如何使用上面的坐标创建蒙版,并使用类似于下图的PIL或cv2在蒙版之外应用此效果? 最佳答案
考虑情况http://codepen.io/anon/pen/JdGYBN 我需要在拖动元素时动态更改卡片“可拖动”的背景颜色。 但是卡片的背景应该根据线条的渐变颜色而变化。 background:
我现在有这种情况:JSFIDDLE 我想实现这种效果,但我希望文本可以在渐变后面选择,并且即使我将鼠标放在文本上也可以滚动文本。 是否有任何解决方法可以使用 javascript 来改变滚动时文本的不
这段代码是我从css graident generator得到的,渐变底部是透明的 background: -moz-linear-gradient(top, rgba(248,246,247,1)
我必须使用 CSS 完成以下图像: 这是一张包含主导航的图像。所以我为此写了一些 CSS(我知道不是正确的颜色代码): #menu-block { background: #730868; b
是否可以使用渐变作为渐变中的一种颜色? 为了我的特定目的,我有一个从左到右的初始渐变: linear-gradient(to right, red, darkgray); 但我希望深灰色部分实际上是从
我这辈子都想不通为什么 transition 属性在我的 CSS 中不起作用。这是代码: #header #menu-top-nav ul li a { -webkit-transition:
我一直在寻找像下图中那样的多组件日期选择器,但在 Github 或其他地方找不到任何东西。 所以我决定做一个。我在实现 CSS 时遇到问题,它在顶部和底部淡出。 我想过在容器中使用:before和:a
我正在寻找与下图等效的 css。我正在使用多个停止点,但很难获得硬停止点 solid 2px white 边框。如果我添加它,它看起来像是一个渐变而不是硬边。任何帮助都会很棒,谢谢! .stripes
我的广告部门给了我一些图像,将其放在网站上的选项卡等。但是我确信这会减慢页面的呈现速度。所以我想我会用 css 来做。然而,经过几次试验,我无法接近以下图像。对于这两张图片,我将不胜感激。 请删除这个
我试图在将鼠标悬停在 div (id="above") 上时更改 body 的背景图像/渐变,我按照他们在另一篇文章 (http://stackoverflow.com/questions/14623
我正在测试所有浏览器的渐变兼容性,我发现渐变在 FireFox 上有不同的效果。请允许我演示测试。 代码 body{
当我使用渐变时,当内容很少时,渐变会重复出现,我该如何防止这种情况发生? http://jsfiddle.net/mcqpP/1/ 我可以尝试使用 html { height: 100%; },但是当
我有一个导航栏,它的背景颜色略深。我想要一个从中心到左右两侧的渐变,以便导航栏最右边和最左边的位达到背景颜色。这可能吗? -->
我在 Firefox 中使用了这个 CSS 线性渐变,但在 Safari 和其他浏览器中似乎无法获得相同的结果。它是联系字段的纸状背景。我试过整个 body 和一个特定的元素,这种风格似乎只适用于 F
我有这行代码 背景:线性渐变(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%); 如您所见,它一半是灰色一半是黑色。有没有办法让它的灰
我是一名优秀的程序员,十分优秀!