移动颜色 Android Studio

huangapple go评论70阅读模式
英文:

Moving colors Android Studio

问题

我正在开发一个Android应用程序。在这个应用程序中,我想要实现如下图片中的颜色移动效果。

1)我尝试过旋转背景可绘制对象:这里

2)我尝试过使用animation-list,但这不是解决方案。

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/border"
        android:contentDescription="@string/qr"
        android:cropToPadding="true"
        android:padding="10dp"
        android:scaleType="centerCrop" />

</RelativeLayout>

@drawable/border

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="270"
        android:endColor="@color/colorYellowGreen"
        android:type="linear"
        android:centerColor="@color/colorBlue"
        android:startColor="@color/colorPink" />

    <corners android:radius="5dp" />

</shape>

注意: 我不是在寻找旋转视图。因为ImageView内部有内容。所以请不要建议使用ViewPropertyAnimator类。

英文:

i am developing an android application. In this application i want to move colors as in the picture below.移动颜色 Android Studio

1)I've tried to rotate background drawable:This

2)I've tried animation-list but this wasn't the solution.

Layout

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;

&lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;match_parent&quot;&gt;

&lt;ImageView
    android:id=&quot;@+id/imageView&quot;
    android:layout_width=&quot;wrap_content&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:layout_centerInParent=&quot;true&quot;
    android:background=&quot;@drawable/border&quot;
    android:contentDescription=&quot;@string/qr&quot;
    android:cropToPadding=&quot;true&quot;
    android:padding=&quot;10dp&quot;
    android:scaleType=&quot;centerCrop&quot;
    /&gt;

</RelativeLayout>

@drawable/border

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;

&lt;shape xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
android:shape=&quot;rectangle&quot;&gt;
&lt;gradient
    android:angle=&quot;270&quot;
    android:endColor=&quot;@color/colorYellowGreen&quot;
    android:type=&quot;linear&quot;
    android:centerColor=&quot;@color/colorBlue&quot;
    android:startColor=&quot;@color/colorPink&quot; /&gt;

&lt;corners android:radius=&quot;5dp&quot; /&gt;

&lt;/shape&gt;

NOTE: I am not looking for rotating view. Because there is content inside imageview. So do not suggest to use ViewPropertyAnimator class

答案1

得分: 2

以下是您提供的代码部分的中文翻译:

旋转效果

// 调用此方法一次以更改渐变角度
private fun startAngleChangeJob() {
    var shape = imageView.background
    var borderGrad = shape as GradientDrawable

    var timer = fixedRateTimer("colorTimer", false, 0L, 100) {
        var ori = borderGrad.orientation.ordinal
        var newOri = (ori + 1) % 7

        this@BorderActivity.runOnUiThread {
            borderGrad.orientation = GradientDrawable.Orientation.values()[newOri]
        }
    }
}

颜色更改效果

// 在 onCreate 中调用此方法一次以更改渐变颜色
private fun startColorChangeJob() {
    var timer = fixedRateTimer("colorTimer", false, 0L, 100) {
        var shape = imageView.background
        var borderGrad = shape as GradientDrawable
        var colors = borderGrad.colors
        var colorsNew = IntArray(colors!!.size)
        for (i in colors.indices) {
            var newInd = (i + 1) % colors.size
            colorsNew[newInd] = colors[i]
        }
        this@BorderActivity.runOnUiThread {
            borderGrad.colors = colorsNew
        }
    }
}

颜色偏移效果

for (i in colors.indices) {
    var oldColor = Color.valueOf(colors[i])
    var red = (oldColor.red() + 0.2f) % 1.0f
    var green = (oldColor.green() + 0.2f) % 1.0f
    var blue = (oldColor.blue() + 0.2f) % 1.0f
    colorsNew[i] = Color.argb(1.0f, red, green, blue)
}
英文:

One way to do it would be the gradient with a timer.
Here are two examples, one changes the colors and the other changes the angle hence creating a rotation effect.

You can tweak them for your purposes.

But be wary of the performance depending on how fast you want it to change.

Rotation effect

//Call this once to change gradient angle
private fun startAngleChangeJob() {
    var shape = imageView.background
    var borderGrad = shape as GradientDrawable

    var timer = fixedRateTimer(&quot;colorTimer&quot;, false, 0L, 100) {
        var ori = borderGrad.orientation.ordinal
        var newOri = (ori + 1) % 7

        this@BorderActivity.runOnUiThread {
            borderGrad.orientation = GradientDrawable.Orientation.values()[newOri]
        }
    }
}

Color change effect

//Call this once in onCreate to change gradient colors
private fun startColorChangeJob() {
    var timer = fixedRateTimer(&quot;colorTimer&quot;, false, 0L, 100) {
        var shape = imageView.background
        var borderGrad = shape as GradientDrawable
        var colors = borderGrad.colors
        var colorsNew = IntArray(colors!!.size)
        for (i in colors.indices) {
            var newInd = (i + 1) % colors.size
            colorsNew[newInd] = colors[i]
        }
        this@BorderActivity.runOnUiThread {
            borderGrad.colors = colorsNew
        }
    }
}

Color shift effect

for (i in colors.indices) {
            var oldColor = Color.valueOf(colors[i])
            var red = (oldColor.red() + 0.2f) % 1.0f
            var green = (oldColor.green() + 0.2f) % 1.0f
            var blue = (oldColor.blue() + 0.2f) % 1.0f
            colorsNew[i] = Color.argb(1.0f, red, green, blue)
        }

huangapple
  • 本文由 发表于 2020年9月27日 17:17:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/64086820.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定