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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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