[Перевод] Повторяем дизайн приложений, получивших награду Apple06.03.2017 15:33

let column = floor(tapLocation.x / cellSize.w)
let row = floor(tapLocation.y / cellSize.h)
let rect = Rect(w: cellSize.w, h: cellSize.h)

let background = Shape(form: rect, fill: Color.rgb(r: 4, g: 112, b: 215))
let foreground = Shape(form: rect, fill: Color.white, opacity: 0.0)
let sound = Group(
    contents: [background, foreground],
    place: Transform.move(
        dx: column * cellSize.w,
        dy: row * cellSize.h
    )
)

let border = Shape(
    form: Arc(
        ellipse: Ellipse(rx: radius, ry: radius),
        shift: -M_PI / 2 + 0.05,
        extent: 2 * M_PI - 0.1
    ),
    stroke: Stroke(fill: Color.rgba(r: 219, g: 222, b: 227, a: 0.3), width: 2.0)
)

let circle = Shape(form: Circle(r: 25.0), fill: сolor)

let playButton = Shape(
    form: MoveTo(x: -1, y: 2).lineTo(x: 2, y: 0)
        .lineTo(x: -1, y: -2).close().build(),
    fill: Color.rgb(r: 46, g: 48, b: 58),
    place: Transform.scale(sx: 5.0, sy: 5.0)
)

let stopButton = Shape(
    form: MoveTo(x: -2, y: 2).lineTo(x: 2, y: 2)
        .lineTo(x: 2, y: -2).lineTo(x: -2, y: -2).close().build(),
    fill: Color.rgb(r: 46, g: 48, b: 58),
    place: Transform.scale(sx: 4.0, sy: 4.0)
)

let buttons = [[playButton], [stopButton]]
let buttonGroup = Group(contents: buttons[0])

let button = Group(contents: [border, circle, buttonGroup])

• Заменяем «Play» на «Stop» или обратно
• Запускаем циклическую анимацию дуги: длина анимируется с -PI/2+0.05 до 3*PI/2–0.1

button.onTap { tapEvent in
  // change button content
  let index = buttons.index { $0 == buttonGroup.contents }!
  buttonGroup.contents = buttons[(index + 1) % buttons.count]

  if index == 0 {
     play()
  } else {
      // if stop pressed
      contentAnimation.stop()
      // hide animation group
      animationGroup.opacityVar.animation(to: 0.0, during: 0.1).play()
  }
}

func play() {
  contentAnimation = animationGroup.contentsVar.animation({ t in
      let shape = Shape(
          form: Arc(
              ellipse: Ellipse(rx: radius, ry: radius),
              shift: -M_PI / 2 + 0.05,
              extent: max(2 * M_PI * t - 0.1, 0)
          ),
          stroke: Stroke(fill: Color.white, width: 2)
      )
      return [shape]
  }, during: time).cycle()
  contentAnimation.play()
}

let line = Shape(
  form: Line(x1: 0, y1: 0, x2: size.w, y2: 0),
  stroke: Stroke(fill: Color.rgba(r: 219, g: 222, b: 227, a: 0.5), width: 1.0)
)

func run(time: Double) {
  let lineAnimation = line.placeVar.animation(
      to: Transform.move(dx: 0, dy: screen.height),
      during: time
  ).easing(Easing.linear)

  let hightlight = sounds.map { sound -> Animation in
      return sound.hightlight().delay(sound.place.dy / screen.height * time)
  }.combine()

  let runAnimation = [soundsAnimation, lineAnimation].combine().cycle()
  runAnimation?.play()
}

Результат

Zova

В круговую диаграмму входит восемь кругов на фоне, один заполненный круг в центре, текущий результат и emoji иконка.

let mainCircle = Shape(
    form: Circle(r: 60), fill: mainColor,
    stroke: Stroke(fill: Color.white, width: 1.0)
)

let score = Text(
    text: "3",
    font: Font(name: lightFont, size: 40), fill: Color.white,
    align: .mid, baseline: .mid
)

let icon = Text(
    text: "молния",
    font: Font(name: regularFont, size: 24), fill: Color.white,
    align: .mid, place: Transform.move(dx: 0.0, dy: 30.0)
)

let shadows = [
    Point(x: 0, y: 35), Point(x: -25, y: 25), Point(x: 25, y: 25), Point(x: 25, y: -25),
    Point(x: -25, y: -25), Point(x: -40, y: 0), Point(x: 40, y: 0), Point(x: 0, y: -35)
].map { place in
    return Shape(
        form: Circle(r: 40), fill: Color.white.with(a: 0.8),
        place: Transform.move(dx: place.x, dy: place.y)
    )
}.group()

let acivityCircle = Group(contents: [shadows, mainCircle, score, icon])

let data = ["лыжник", "мяч", "молния"] // хабр сходит с ума от emoji
let emojis = data.enumerated().map { (index, item)  -> Group in
  let shape = Shape(form: Circle(r: 20), fill: Color.white)

  let icon = Text(
      text: item,
      font: Font(name: regularFont, size: 14),
      fill: Color.white,
      align: .mid,
      baseline: .mid
  )

  return Group(
      contents: [shape, icon],
      place: emojiPlace(index: index, d: 20.0),
      opacity: 0.0
  )
}.group()

func emojiPlace(index: Int, d: Double) -> Transform {
    let alpha = 2 * M_PI / 10.0 * Double(index)
    return Transform.move(
        dx: cos(alpha) * d,
        dy: sin(alpha) * d
    )
}

let border = Shape(
  form: Rect(w: 80, h: 30).round(r: 16.0),
  fill: Color.white
)

let text = Text(
  text: "Low",
  font: Font(name: regularFont, size: 20), fill: mainColor,
  align: .mid, baseline: .mid,
  place: Transform.move(dx: 40, dy: 15)
)

let line = Shape(
  form: Rect(x: 20, y: 30, w: 2, h: 40),
  fill: LinearGradient(
      degree: 90,
      from: Color.white.with(a: 0.8),
      to: mainColor
  )
)
let legend = [border, text, line].group()

let text = Text(
    text: text,
    font: Font(name: regularFont, size: 12), fill: Color.white,
    align: .min, baseline: .alphabetic,
    place: Transform.move(dx: 0, dy: -5)
)

let rect = Shape(
    form: Rect(w: width, h: 8),
    fill: !last ? color : gradient
)

let bar = [text, rect].group()

let jumpAnimation = legend.placeVar.animation(
    to: Transform.move(dx: 0.0, dy: -8.0),
    during: 2.0
).autoreversed().cycle()

• Скрываем бар и верхние надписи
• Уменьшаем фоновые круги
• Поднимаем и скрываем текст с текущим результатом
• Поднимаем и увеличиваем иконку emoji
• Показываем и перемещаем от центра доступные emoji иконки

let during = 0.5

let hideAnimation = [
    bar.opacityVar.animation(to: 0.0, during: during),
    texts.opacityVar.animation(to: 0.0, during: during)
].combine()

let emojisAnimation = emojis.contents.enumerated().map { (index, node) in
    return [
        node.opacityVar.animation(to: 1.0, during: during),
        node.placeVar.animation(
            // new emoji position
            to: emojiPlace(index: index, d: 120.0),
            during: during
        )
    ].combine()
}.combine()

let circleAnimation = [
    shadows.placeVar.animation(to: Transform.scale(sx: 0.5, sy: 0.5), during: during),
    score.placeVar.animation(to: Transform.move(dx: 0, dy: -20), during: during),
    score.opacityVar.animation(to: 0.0, during: during),
    icon.placeVar.animation(to: Transform.move(dx: 0, dy: -30).scale(sx: 2.0, sy: 2.0), during: during),
].combine()

let animation = [hideAnimation, emojisAnimation, circleAnimation].combine()
let reverseAnimation = animation.reverse()

Результат

Summary