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

Question

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

Спасибо!

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

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

Cut эти кольца в половине

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

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

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

Совместите кольца & установить порядок

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

Теперь приходит забавной часть

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

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

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

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

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