Axure: Как сделать круговой таймер?

Я хотел бы знать, как сделать эту анимацию на Axure 8

Круговой таймер

Спасибо!

Источник

3 ответа

Я только недавно начал играть с Axure, так что, возможно, есть лучший способ сделать это, но вот что я придумал:

Создать 2 кольца:

  • Начните с 2 кругов, один немного меньше другого. Сосредоточьте одно над другим, выберите оба и нажмите кнопку "вычитать" на панели стилей, чтобы по существу вырезать отверстие в большем круге. Вуаля, кольцо.
  • Скопируйте и вставьте это кольцо так, чтобы вы работали с 2. Заполните одно кольцо тем цветом, которым вы хотите, чтобы ваш цвет неактивного состояния был (скажем, серый), и залейте другим то, что вы хотите, чтобы ваше активное состояние было (скажем, голубым).,
  • Убить контур формы или сделать его таким же цветом, как заливка

Разрежь эти кольца пополам

  • Поместите прямоугольник точно на половину каждого круга (в этом примере я делил пополам мой вертикально, но это также можно сделать горизонтально). Используйте ту же кнопку "вычитать", чтобы удалить половину каждого кольца. Вы должны остаться с 1 серым полукольцом и 1 синим.

Сделайте новые полные кольца из 2 полуколец

  • Скопируйте и вставьте каждое полукольцо, чтобы у вас остались 2 серых и 2 синих полукольца.
  • Поверните 1 каждого цвета полукольца на 180 градусов
  • Выровняйте серые полукольца так, чтобы получилось то, что выглядит как одно целое серое кольцо. Сделайте то же самое с синим. Сгруппируйте каждый из них, пока.
  • Назовите каждое полукольцо на панели "Контур", чтобы потом было легче его использовать (левый серый, правый серый, левый синий, правый синий)

Выровняйте кольца и установите порядок

  • Поместите полученное серое кольцо прямо поверх синего, так что все, что вы можете увидеть, это серое кольцо.
  • Разгруппируйте кольца и установите порядок на панели Outline следующим образом: сверху вниз: справа серый, справа синий, слева серый, слева синий.

Теперь самое интересное

  • Выберите правильное серое полукольцо и перейдите в свойства. Я использую "On Load", но выбираю то, что вам подходит, и настраиваю следующий случай:

  • Поворот вправо серый на 180 градусов по часовой стрелке, привязка вправо, анимация - линейная, 1000 мс

  • Подождите 1000мс
  • Скрыть правый серый (без анимации)
  • Поворот влево, серый на 180 градусов, по часовой стрелке, привязка вправо, анимация - линейная, 1000 мс

Конечным результатом является вращение правого серого полукольца, обнажая синее кольцо под ним, но кажется, что синий просто заполняет серое пространство. Как только эта половина заканчивается, она поворачивается на 180 градусов и заканчивается на левой стороне, она исчезает, и левое серое полукольцо начинает свое вращение. Так как мы устанавливаем его за правым синим полукольцом, оно движется за ним по мере движения, открывая остальную часть синего кольца по ходу.

Как я уже упоминал, я довольно новичок в Axure, поэтому, если у кого-то есть какие-либо предложения о том, как сделать это более эффективно, они будут очень рады!

Источник

Вы можете использовать анимированный GIF. Но вместо непосредственного отображения вы можете применить его к выбранному состоянию. Вы добавляете действие для выбора изображения и GIF начинает работать.

Добавить таймер и сбросить, когда закончите. Посмотрите этот быстрый и грязный пример. https://www.dropbox.com/s/4hceqrbsbvyri8k/Circular-Timer.rp?dl=0

Источник

Вот еще одно решение с использованием другого подхода. А именно смешное количество синхронизированных анимаций: https://www.dropbox.com/s/52cuq8opsmquni0/Circular-Loader-Animated.rp?dl=0

Два круга могут быть анимированными. Каждая половина установила начало поворота в общий центр. Форма покрывает первую половину анимации.

Не очень надежное решение, просто доказательство того, что возможно с новыми функциями анимации.

Источник
Другие вопросы по тегам