如何解决使用 Android 创建带有自定义视图和 ImageView 的蒙版
我有这张图片:
我想用带有渐变和波浪效果的画布填充这些条形以获得类似效果(在条形下方填充 70%)
我已经成功地创建了带有波浪动画的视图,但我无法在两个元素之间创建一种蒙版。我找到了很多方法来在图像上创建带有画布的蒙版,但在我的情况下则相反。我可以将图像重新创建为画布,但我仍然不知道如何在它们之间创建遮罩。我试图将视图转换为位图并将其指定为 imageView 的背景,也使用 clipToPath() 方法,但什么也没有。 那么,我如何才能达到这个结果?
这里是我的自定义视图的波形视图代码:
class WaveView @JvmOverloads constructor(
context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0) : View(context,attrs,defStyleAttr) {
private var amplitude = 30f.toDp() // scale
private var speed = 0f
private val path = Path()
private var paint = Paint(Paint.ANTI_ALIAS_FLAG)
private var animator: ValueAnimator? = null
override fun onSizeChanged(w: Int,h: Int,oldw: Int,oldh: Int) {
super.onSizeChanged(w,h,oldw,oldh)
animator?.cancel()
animator = createAnimator().apply { start() }
}
override fun onDraw(c: Canvas) {
c.drawPath(path,paint)
this.clipToOutline = true
}
private fun createAnimator(): ValueAnimator {
return ValueAnimator.ofFloat(0f,Float.MAX_VALUE).apply {
repeatCount = ValueAnimator.INFINITE
addUpdateListener {
speed -= WAVE_SPEED
createPath()
invalidate()
}
}
}
private fun createPath() {
path.reset()
paint.color = Color.parseColor("#1da6f9")
paint.style = Paint.Style.FILL_AND_STROKE
paint.strokeWidth = 10f
path.moveTo(0f,height.toFloat())
path.lineTo(0f,amplitude)
var i = 0
while (i < width + 10) {
val wx = i.toFloat()
val wy = amplitude * 2 + amplitude * sin((i + 10) * Math.PI / WAVE_AMOUNT_ON_SCREEN + speed).toFloat()
path.lineTo(wx,wy)
i += 10
}
path.lineTo(width.toFloat(),height.toFloat())
path.close()
}
override fun onDetachedFromWindow() {
animator?.cancel()
super.onDetachedFromWindow()
}
companion object {
const val WAVE_SPEED = 0.05f
const val WAVE_AMOUNT_ON_SCREEN = 2500
}
private fun Float.toDp() = this * context.resources.displayMetrics.density
}
结果(动画作品):
还会有另一个画布,但它与第一个画布相同,不同之处在于将使用 cos 而不是 sin 并且方向相反
谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。