Skip to content

Instantly share code, notes, and snippets.

@nickbutcher
Last active May 24, 2019 03:37
Show Gist options
  • Save nickbutcher/ef74e9012837ea0738a2ad57ae8e7c6f to your computer and use it in GitHub Desktop.
Save nickbutcher/ef74e9012837ea0738a2ad57ae8e7c6f to your computer and use it in GitHub Desktop.
A prototype of an animation I helped out on, see: https://twitter.com/crafty/status/1073612862139064332
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2018 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied. See the License for the specific language governing permissions and limitations under
the License.
-->
<resources>
<attr name="showbizViewStyle" format="reference" />
<declare-styleable name="ShowbizView">
<attr name="circleStroke" format="dimension" />
<attr name="circleColor" format="color" />
<attr name="waveStroke" format="dimension" />
<attr name="waveColor" format="color" />
<attr name="waveGap" format="dimension" />
<attr name="highlightColor" format="color" />
<attr name="android:text" />
<attr name="android:textSize" />
<attr name="android:textColor" />
</declare-styleable>
</resources>
/*
* Copyright 2018 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file
* except in compliance with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under the
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
package com.example.nikeshowbiz
import android.animation.ValueAnimator
import android.animation.ValueAnimator.INFINITE
import android.animation.ValueAnimator.RESTART
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.CornerPathEffect
import android.graphics.Matrix
import android.graphics.Paint
import android.graphics.Paint.ANTI_ALIAS_FLAG
import android.graphics.Paint.Style.STROKE
import android.graphics.Path
import android.graphics.PointF
import android.graphics.PorterDuff.Mode.CLEAR
import android.graphics.PorterDuff.Mode.SRC_IN
import android.graphics.PorterDuffXfermode
import android.graphics.RadialGradient
import android.graphics.Shader.TileMode.CLAMP
import android.text.TextPaint
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import android.view.animation.LinearInterpolator
import androidx.core.content.res.getColorOrThrow
import androidx.core.content.res.getDimensionOrThrow
import kotlin.LazyThreadSafetyMode.NONE
class ShowbizView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = R.attr.showbizViewStyle
) : View(context, attrs, defStyleAttr) {
private val textPaint: TextPaint
private val circlePaint: Paint
private val wavePaint: Paint
private val waveGap: Float
private val wavePath = Path()
private val text: CharSequence?
private val highlightPaint = Paint(ANTI_ALIAS_FLAG).apply {
// This mode means that the highlight only applies to areas already touched
// on the canvas i.e. only on the waves
xfermode = PorterDuffXfermode(SRC_IN)
}
private val highlightMatrix = Matrix()
private val highlightColor: Int
private val clearPaint = Paint(ANTI_ALIAS_FLAG).apply {
// Used to 'punch out' waves from the center circle
xfermode = PorterDuffXfermode(CLEAR)
}
private var maxRadius = 0f
private var center = PointF(0f, 0f)
private var circleRadius = 0f
private var waveRadiusOffset = 0f
set(value) {
field = value
postInvalidateOnAnimation()
}
init {
val a = context.obtainStyledAttributes(attrs, R.styleable.ShowbizView, defStyleAttr, 0)
circlePaint = Paint(ANTI_ALIAS_FLAG).apply {
color = a.getColorOrThrow(R.styleable.ShowbizView_circleColor)
strokeWidth = a.getDimensionOrThrow(R.styleable.ShowbizView_circleStroke)
style = STROKE
}
wavePaint = Paint(ANTI_ALIAS_FLAG).apply {
color = a.getColorOrThrow(R.styleable.ShowbizView_waveColor)
strokeWidth = a.getDimensionOrThrow(R.styleable.ShowbizView_waveStroke)
style = STROKE
}
text = a.getText(R.styleable.ShowbizView_android_text)
textPaint = TextPaint(ANTI_ALIAS_FLAG).apply {
textSize = a.getDimensionOrThrow(R.styleable.ShowbizView_android_textSize)
color = a.getColorOrThrow(R.styleable.ShowbizView_android_textColor)
}
waveGap = a.getDimensionOrThrow(R.styleable.ShowbizView_waveGap)
highlightColor = a.getColorOrThrow(R.styleable.ShowbizView_highlightColor)
a.recycle()
}
private val waveAnimator by lazy(NONE) {
ValueAnimator.ofFloat(0f, waveGap).apply {
addUpdateListener {
waveRadiusOffset = it.animatedValue as Float
}
duration = 1500L
repeatMode = RESTART
repeatCount = INFINITE
interpolator = LinearInterpolator()
}
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
center.set(w / 2f, h / 2f)
// `* 1.2` because the rounding path effect 'shrinks' the path, so need a larger radius
maxRadius = Math.hypot(center.x.toDouble(), center.y.toDouble()).toFloat() * 1.2f
circleRadius = w / 4f
// (Fake) cubic gradient on the highlight
val stops = 5
val colorStops = IntArray(stops)
for (i in 0 until stops) {
val x = i * 1f / (stops - 1)
val opacity = Math.pow(x.toDouble(), 3.0).toFloat().coerceIn(0.3f, 1f)
colorStops[stops - 1 - i] =
modifyAlpha(highlightColor, opacity * (Color.alpha(highlightColor) / 255f))
}
highlightPaint.shader = RadialGradient(
center.x, center.y, maxRadius, colorStops, null, CLAMP
)
}
override fun onAttachedToWindow() {
super.onAttachedToWindow()
waveAnimator.start()
}
override fun onDetachedFromWindow() {
waveAnimator.cancel()
super.onDetachedFromWindow()
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
// Waves
var radius = circleRadius + waveRadiusOffset
while (radius < maxRadius) {
// How far 'out' this wave it
val offset = radius / maxRadius
// How wiggly should it be
// This value should be capped at 1 but we use a larger max so that it forms a circle
// before reaching the extremities
val pointDelta = lerp(0.75f, 1.05f, offset)
// Fade the alpha based on distance
// This will be composed with the highlight
val alpha = lerp(1f, 0.4f, offset)
// Tend toward a circle further out
val rounding = lerp(radius / 2f, radius * 10f, offset)
val path = createStarPath(14, radius, pointDelta, wavePath)
// Unfortunately path effects are immutable, so have to re-create each time.
// Should probably cache these but ART should save us here.
wavePaint.pathEffect = CornerPathEffect(rounding)
wavePaint.color = modifyAlpha(wavePaint.color, alpha)
canvas.drawPath(path, wavePaint)
radius += waveGap
}
// Now clear the inner circle, this is more performant than using a non-rectangular clip
// BUT it prevents us using a background on the view, have to move it to a parent/sibling.
canvas.drawCircle(center.x, center.y, circleRadius, clearPaint)
// Highlight
canvas.drawPaint(highlightPaint)
// Outer circle
canvas.drawCircle(center.x, center.y, circleRadius, circlePaint)
// Inner circle
canvas.drawCircle(
center.x, center.y,
circleRadius - textPaint.textSize * 2f,
circlePaint
)
// Circular text
text?.let { t ->
val checkpoint = canvas.save()
val angle = 360f / t.length
val textHalfWidth = textPaint.measureText(text, 0, 1) / 2f
// Start text from 9 o'clock
canvas.rotate(-90f, center.x, center.y)
val textX = center.x - textHalfWidth
val textY = center.y - circleRadius + textPaint.textSize * 1.45f
(0 until t.length).forEach { i ->
if (i > 0) canvas.rotate(angle, center.x, center.y)
canvas.drawText(t, i, i + 1, textX, textY, textPaint)
}
canvas.restoreToCount(checkpoint)
}
}
// Didn't hook up the accelerometer so test the highlight using touch
override fun onTouchEvent(event: MotionEvent): Boolean {
val handled = super.onTouchEvent(event)
when (event.action) {
MotionEvent.ACTION_DOWN,
MotionEvent.ACTION_MOVE,
MotionEvent.ACTION_UP,
MotionEvent.ACTION_CANCEL -> {
updateHighlight(event.x, event.y)
return true
}
}
return handled
}
/**
* Creates a star shaped path.
*
* [pointDelta] Radius difference between inner and outer star points.
*/
private fun createStarPath(
points: Int,
radius: Float,
pointDelta: Float,
path: Path = Path()
): Path {
path.reset()
val angle = 2.0 * Math.PI / points
val startAngle = Math.PI / 2.0 + Math.toRadians(360.0 / (2 * points))
path.moveTo(
center.x + (radius * Math.cos(startAngle)).toFloat(),
center.y + (radius * Math.sin(startAngle)).toFloat()
)
for (i in 1 until points) {
val r = if (i % 2 == 1) {
pointDelta.coerceIn(0f, 1f) * radius
} else {
radius
}
path.lineTo(
center.x + (r * Math.cos(startAngle - angle * i)).toFloat(),
center.y + (r * Math.sin(startAngle - angle * i)).toFloat()
)
}
path.close()
return path
}
private fun updateHighlight(x: Float, y: Float) {
highlightMatrix.setTranslate(x - center.x, y - center.y)
highlightPaint.shader.setLocalMatrix(highlightMatrix)
postInvalidateOnAnimation()
}
private fun lerp(a: Float, b: Float, t: Float): Float {
return a + (b - a) * t
}
private fun modifyAlpha(color: Int, alpha: Float): Int {
return color and 0x00ffffff or ((alpha * 255).toInt() shl 24)
}
}
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2018 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied. See the License for the specific language governing permissions and limitations under
the License.
-->
<resources>
<style name="Widget.NikeShowbiz.ShowbizView" parent="@android:style/Widget">
<item name="circleStroke">2dp</item>
<item name="circleColor">#fff</item>
<item name="waveStroke">2dp</item>
<item name="waveColor">#fff</item>
<item name="waveGap">32dp</item>
<item name="highlightColor">@color/highlight</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">#fff</item>
</style>
</resources>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment