yfujiki

var drawable = AnimatablePathDrawable(INITIAL_PATH.toMutableList(), 
                                      activity!!.applicationContext)
view.pathCanvas.background = drawable

// Assume that the final path on the normalized map rectangle ((0,0),(0,1),(1,1),(1,0)) 
// is something like this. 
drawable.startAnimating(listOf(
    NormalizedPoint(0.1f, 0.74f),
    NormalizedPoint(0.15f, 0.68f),
    NormalizedPoint(0.26f, 0.69f),

yfujiki

class AnimatablePathDrawable(points: MutableList<NormalizedPoint>, context: Context)
  : PathDrawable(points, context), ValueAnimator.AnimatorUpdateListener {
    ...

  // The main method to be explained here. It configures startPoints/endPoints         
  private fun configureStartEndPoints(fromStartPoints: List<NormalizedPoint>, 
                                      toEndPoints: List<NormalizedPoint>) {
    // The first part of the explanation above. 
    // Projecting vertices on the start/end path onto the straight line.
    val projectedMergedPoints = projectedMergedPoints(fromStartPoints, toEndPoints)

yfujiki

class AnimatablePathDrawable(points: MutableList<NormalizedPoint>, 
                             context: Context)
  : PathDrawable(points, context),
  ValueAnimator.AnimatorUpdateListener {

  // Blue points in the illustration
  private val startPoints: MutableList<NormalizedPoint> = mutableListOf()
  // Red points in the illustration
  private val endPoints: MutableList<NormalizedPoint> = mutableListOf()

yfujiki

<View
             android:id="@+id/pathCanvas"
...
             android:transitionName="PathCanvasTransition"
     />

yfujiki

val INITIAL_PATH = listOf(
    NormalizedPoint(0.2f, 0.5f),
    NormalizedPoint(0.8f, 0.5f)
)

// In MainFragment/MapFragment
// ...
   val drawable = PathDrawable(INITIAL_PATH.toMutableList(), activity!!.applicationContext)
   view.pathCanvas.background = drawable

yfujiki

// x and y are normalized value which are in 0~1.
// It doesn't necessarily need to be like this, but I valued the merit that 
// I don't need to consider the actual size of the path depending on the layout.
data class NormalizedPoint(val x: Float, val y: Float)

open class PathDrawable(val points: MutableList<NormalizedPoint>, val context: Context) : Drawable() {

    protected val path: Path = {
        val p = Path()
        p

yfujiki

extension UILabel {    
    @objc var substituteFontName: String {
        get {
            return font.fontName
        }
        set {
            // Set custom font unless the original font is a bold font.
            if font.fontName.range(of: "Medium") == nil {
                font = UIFont(name: newValue, size: font.pointSize)
            }

yfujiki

 extension UILabel {
    @objc var substituteFontName: String {
        get {
            return font.fontName
        }
        set {
            // Called at every UILabel initialization
            font = UIFont(name: newValue, size: font.pointSize)
        }
    }

yfujiki

class AppDelegate: UIResponder, UIApplicationDelegate {

    ...

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: 
        [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        ...
        UILabel.appearance().substituteFontName = "Gills Sans"
        ...
        return true

yfujiki

extension UILabel {
    @objc var substituteFontName: String {
        get {
            return font.fontName
        }
        set {
            font = UIFont(name: newValue, size: font.pointSize)
        }
    }
}