Skip to content

Instantly share code, notes, and snippets.

@nickbutcher

nickbutcher/MainActivity.kt

Last active March 23, 2022 13:17
Show Gist options
  • Save nickbutcher/b1806905c6bc0ef29f545fd580935bd3 to your computer and use it in GitHub Desktop.
Save nickbutcher/b1806905c6bc0ef29f545fd580935bd3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
MainActivity.kt
/*
* Copyright 2017 Google Inc. All rights reserved.
*
* 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.endlesspinjumpcompat
import android.graphics.drawable.Drawable
import android.os.Bundle
import android.support.graphics.drawable.Animatable2Compat
import android.support.graphics.drawable.AnimatedVectorDrawableCompat
import android.support.v7.app.AppCompatActivity
import android.widget.ImageView
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val avd = AnimatedVectorDrawableCompat.create(this, R.drawable.avd_endless_pin_jump)
val iv = (findViewById(R.id.pin) as ImageView).apply {
setImageDrawable(avd)
}
avd?.registerAnimationCallback(object : Animatable2Compat.AnimationCallback() {
override fun onAnimationEnd(drawable: Drawable?) {
iv.post { avd.start() }
}
})
avd?.start()
}
}
Raw
res-drawable-avd_endless_pin_jump.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2017 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.
-->
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:width="400dp"
android:height="300dp"
android:viewportWidth="800"
android:viewportHeight="600">
<path
android:name="horizon"
android:pathData="M189,409.5C189,409.5 294.7,409.6 411.2,409.5C527.8,409.4 649.2,409 649.2,409"
android:strokeColor="#E2E2E2"
android:strokeLineCap="square"
android:strokeWidth="1" />
<group android:name="dots">
<path
android:name="dot_1"
android:pathData="M363.5 409a9.5 9.5 0 0 1 -9.5 9.5 9.5 9.5 0 0 1 -9.5 -9.5 9.5 9.5 0 0 1 9.5 -9.5 9.5 9.5 0 0 1 9.5 9.5z"
android:fillColor="@color/dot" />
<path
android:name="dot_2"
android:pathData="M600 409a9.5 9.5 0 0 1 -9.5 9.5 9.5 9.5 0 0 1 -9.5 -9.5 9.5 9.5 0 0 1 9.5 -9.5 9.5 9.5 0 0 1 9.5 9.5z"
android:fillColor="@color/dot" />
<path
android:name="dot_3"
android:pathData="M843.5 409A16.5 16.5 0 0 1 827 425.5 16.5 16.5 0 0 1 810.5 409 16.5 16.5 0 0 1 827 392.5 16.5 16.5 0 0 1 843.5 409Z"
android:fillColor="@color/pin" />
<path
android:name="dot_4"
android:pathData="M1073 409a9.5 9.5 0 0 1 -9.5 9.5 9.5 9.5 0 0 1 -9.5 -9.5 9.5 9.5 0 0 1 9.5 -9.5 9.5 9.5 0 0 1 9.5 9.5z"
android:fillColor="@color/dot" />
<path
android:name="dot_5"
android:pathData="M1319.5 409a9.5 9.5 0 0 1 -9.5 9.5 9.5 9.5 0 0 1 -9.5 -9.5 9.5 9.5 0 0 1 9.5 -9.5 9.5 9.5 0 0 1 9.5 9.5z"
android:fillColor="@color/dot" />
</group>
<path
android:name="pin"
android:pathData="@string/pin_path_1"
android:fillColor="@color/pin" />
</vector>
</aapt:attr>
<target android:name="pin">
<aapt:attr name="android:animation">
<!-- This anim makes the pin jump 3 times. Each jump is performed by morphing the path
of the pin between 5 different keyframes. -->
<!-- Note on ordering: logically this should be 'sequential' but on older platforms
animator sets waited until frame boundaries to start the next animator. This leads
to 'drifting' in the timing which we don't want as other parts of our composition
are co-ordinated with this set taking 2070ms to complete. Instead we use 'together'
& use startOffsets to play them sequentially, starting at the correct time. -->
<set android:ordering="together">
<!-- Jump 1 -->
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_1"
android:valueTo="@string/pin_path_5"
android:startOffset="0"
android:duration="120"
android:interpolator="@interpolator/linear_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_5"
android:valueTo="@string/pin_path_9"
android:startOffset="120"
android:duration="120"
android:interpolator="@interpolator/fast_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_9"
android:valueTo="@string/pin_path_13"
android:startOffset="240"
android:duration="120"
android:interpolator="@interpolator/fast_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_13"
android:valueTo="@string/pin_path_19"
android:startOffset="360"
android:duration="150"
android:interpolator="@interpolator/fast_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_19"
android:valueTo="@string/pin_path_1"
android:startOffset="510"
android:duration="180"
android:interpolator="@interpolator/fast_out_linear_in"
android:valueType="pathType" />
<!-- Jump 2 -->
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_1"
android:valueTo="@string/pin_path_5"
android:startOffset="690"
android:duration="120"
android:interpolator="@interpolator/linear_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_5"
android:valueTo="@string/pin_path_9"
android:startOffset="810"
android:duration="120"
android:interpolator="@interpolator/fast_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_9"
android:valueTo="@string/pin_path_13"
android:startOffset="930"
android:duration="120"
android:interpolator="@interpolator/fast_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_13"
android:valueTo="@string/pin_path_19"
android:startOffset="1050"
android:duration="150"
android:interpolator="@interpolator/fast_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_19"
android:valueTo="@string/pin_path_1"
android:startOffset="1200"
android:duration="180"
android:interpolator="@interpolator/fast_out_linear_in"
android:valueType="pathType" />
<!-- Jump 3 -->
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_1"
android:valueTo="@string/pin_path_5"
android:startOffset="1380"
android:duration="120"
android:interpolator="@interpolator/linear_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_5"
android:valueTo="@string/pin_path_9"
android:startOffset="1500"
android:duration="120"
android:interpolator="@interpolator/fast_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_9"
android:valueTo="@string/pin_path_13"
android:startOffset="1620"
android:duration="120"
android:interpolator="@interpolator/fast_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_13"
android:valueTo="@string/pin_path_19"
android:startOffset="1740"
android:duration="150"
android:interpolator="@interpolator/fast_out_slow_in"
android:valueType="pathType" />
<objectAnimator
android:propertyName="pathData"
android:valueFrom="@string/pin_path_19"
android:valueTo="@string/pin_path_1"
android:startOffset="1890"
android:duration="180"
android:interpolator="@interpolator/fast_out_linear_in"
android:valueType="pathType" />
</set>
</aapt:attr>
</target>
<target android:name="dots">
<aapt:attr name="android:animation">
<!-- This animation moves the dots leftward. The trick is that there are actually 5 dots
in the image (2 grey, a red then 2 more grey). By correctly timing the loop this
makes it look like an uninterrupted sequence. -->
<objectAnimator
android:propertyName="translateX"
android:valueFrom="0"
android:valueTo="-710"
android:duration="2070"
android:interpolator="@android:interpolator/linear" />
</aapt:attr>
</target>
<target android:name="dot_1">
<aapt:attr name="android:animation">
<!-- Fade out dot 1 as it exits the scene -->
<set>
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="1"
android:valueTo="1"
android:duration="0" />
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="1"
android:valueTo="0"
android:startOffset="460"
android:duration="60"
android:interpolator="@android:interpolator/linear" />
</set>
</aapt:attr>
</target>
<target android:name="dot_2">
<aapt:attr name="android:animation">
<!-- Fade out dot 2 as it exits the scene -->
<set>
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="1"
android:valueTo="1"
android:duration="0" />
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="1"
android:valueTo="0"
android:startOffset="1150"
android:duration="60"
android:interpolator="@android:interpolator/linear" />
</set>
</aapt:attr>
</target>
<target android:name="dot_3">
<aapt:attr name="android:animation">
<!-- Fade dot 3 in as it enters the scene and out as it exits -->
<set>
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="0"
android:valueTo="0"
android:duration="0" />
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="0"
android:valueTo="1"
android:startOffset="420"
android:duration="60"
android:interpolator="@android:interpolator/linear" />
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="1"
android:valueTo="0"
android:startOffset="1840"
android:duration="60"
android:interpolator="@android:interpolator/linear" />
</set>
</aapt:attr>
</target>
<target android:name="dot_4">
<aapt:attr name="android:animation">
<!-- Fade dot 4 in as it enters the scene -->
<set>
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="0"
android:valueTo="0"
android:duration="0" />
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="0"
android:valueTo="1"
android:startOffset="1170"
android:duration="60"
android:interpolator="@android:interpolator/linear" />
</set>
</aapt:attr>
</target>
<target android:name="dot_5">
<aapt:attr name="android:animation">
<!-- Fade dot 5 in as it enters the scene -->
<set>
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="0"
android:valueTo="0"
android:duration="0" />
<objectAnimator
android:propertyName="fillAlpha"
android:valueFrom="0"
android:valueTo="1"
android:startOffset="1900"
android:duration="60"
android:interpolator="@android:interpolator/linear" />
</set>
</aapt:attr>
</target>
</animated-vector>
Raw
res-interpolator-fast_out_linear_in.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2017 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.
-->
<pathInterpolator
xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1" />
Raw
res-interpolator-fast_out_slow_in.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2017 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.
-->
<pathInterpolator
xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="0.2"
android:controlY2="1" />
Raw
res-interpolator-linear_out_slow_in.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2017 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.
-->
<pathInterpolator
xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0"
android:controlY1="0"
android:controlX2="0.2"
android:controlY2="1" />
Raw
res-values-pins.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2017 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>
<!-- pin keyframes -->
<string name="pin_path_1">M412.7,238.9C381,238.9 356.8,261.8 356.8,294.6C356.8,329.7 407.7,408.7 409.2,408.8C410.7,408.9 469.4,328.1 469.4,294.6C469.4,261.8 444.5,238.9 412.7,238.9ZM412.7,324.3C397.2,324.3 384.7,311.3 384.7,295.3C384.7,279.3 397.2,266.3 412.7,266.3C428.2,266.3 440.8,279.3 440.8,295.3C440.8,311.3 428.2,324.3 412.7,324.3Z</string>
<string name="pin_path_5">M406.7,247.6C374.9,247.6 350.4,270.5 350.4,303.4C350.4,335.9 406.9,400.5 406.1,408.7C416,408.7 463.4,339.3 463.4,303.4C463.4,270.5 438.4,247.6 406.7,247.6ZM406.7,329.7C391.2,329.7 378.6,317.5 378.6,302.4C378.6,287.2 391.2,275 406.7,275C422.2,275 434.8,287.2 434.8,302.4C434.8,317.5 422.2,329.7 406.7,329.7Z</string>
<string name="pin_path_9">M414.2,238.1C382.4,238.1 357.9,261 357.9,293.8C357.9,326.3 402.5,408.3 403.9,408.3C405.3,408.3 471.4,330.5 471.4,293.8C471.4,261 445.9,238.1 414.2,238.1ZM414.2,323.8C398.7,323.8 386.1,310.7 386.1,294.6C386.1,278.5 398.7,265.4 414.2,265.4C429.7,265.4 442.3,278.5 442.3,294.6C442.3,310.7 429.7,323.8 414.2,323.8Z</string>
<string name="pin_path_13">M411.5,270.7C375.4,270.7 354.7,289.4 354.7,322.3C354.7,341 392.2,409.6 402.3,409.6C415.5,409.6 468.3,350.4 468.3,322.3C468.3,289.4 439.4,270.7 411.5,270.7ZM411.5,345.4C396,345.4 382.2,333.7 382.2,320C382.2,306.4 393.6,294 411.5,295.9C428.7,297.7 440.3,308 440.3,321.7C440.3,335.3 429.6,345.4 411.5,345.4Z</string>
<string name="pin_path_19">M452.8,211C418,208.7 398,240.4 398,253.2C398,298.3 401.3,343.7 384.1,360.4C465,355.9 508.3,297.4 508.3,269.2C508.3,230.3 477.4,212.7 452.8,211ZM452.5,297C431.6,297 423.8,275.7 423.8,262C423.8,248.4 439.3,236.3 452.8,236.3C466.2,236.3 481.6,248.4 481.6,262C481.6,275.7 473.4,297 452.5,297Z</string>
<string name="pin_path_25">M412.7,238.9C381,238.9 356.8,261.8 356.8,294.6C356.8,329.7 407.7,408.7 409.2,408.8C410.7,408.9 469.4,328.1 469.4,294.6C469.4,261.8 444.5,238.9 412.7,238.9ZM412.7,324.3C397.2,324.3 384.7,311.3 384.7,295.3C384.7,279.3 397.2,266.3 412.7,266.3C428.2,266.3 440.8,279.3 440.8,295.3C440.8,311.3 428.2,324.3 412.7,324.3Z</string>
<!-- colors -->
<color name="pin">#F83E3E</color>
<color name="dot">#E2E2E2</color>
</resources>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment