Как сделать колесо фортуны android studio

Виджеты колеса удачи для сайта

Всем — привет. Многие из вас, наверное, знают, что я увлекаюсь созданием виджетов для сайтов и около года назад был создан SmartRoulette. Это скрипт колеса фортуны, который в игровой и ненавязчивой форме помогает получать контакты потенциальных клиентов. Но дело в том, что способ подключения виджета исключает возможность использования его на конструкторах. При этом меня часто спрашивают о такой возможности и мне приходиться объяснять, что это нереально, так как конструкторы не позволяют грузить на хостинг PHP-файлы, а именно в PHP происходит процесс выбора ячейки, чтобы исключит возможность манипуляции результатом.

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

Game Lead

GameLead – неплохой сервис с адекватными ребятами (общался с техподдержкой). В свое время был небольшой конфликт, но при общении все претензии разрешились.

В колесо, на момент написания статьи, можно добавить до 8 секторов с возможностью выбора вероятности выпадения. Присутствует возможность выбора шаблона колеса (темы, скина) и изменения цвета текста в секторе.

Также можно кастомизировать цвет фона, кнопки, формы и изменять текст сообщений.

Есть настройка ограничения количества вращений на 1 пользователя или вообще запретить повторную заявку на тот же контакт.

Присутствует интеграция с Telegram, CRM-системами Битрикс24 и AmoCRM, а также возможность передавать информацию о лиде на свой сервер посредством вебхука в виде json.

Тариф – от 1280 рублей, при учете, что не более 1000 отправок писем в месяц.

Lp9 – совсем простой виджет колеса удачи без особых настроек дизайна. Можно выбрать только цвет колеса, настроить сообщения приглашения и выигрыша. По секторам — тоже максимум 8 штук. Собирать, пока, можно только телефоны, но в разработке и почтовые адреса. Есть интеграция с Telegram, Вконтакте и CRM-системой Битрикс24, метрикой и возможность отправить POST-запрос на внешний URL.

На сайт виджет встраивается путем добавления js-скрипта.

Минимальный тариф от 990 рублей в месяц, при котором можно получать до 100 заявок в месяц.

Playlead

Playlead – еще один сервис без особых настроек, но с возможностью заказать брендирование и визуальную кастомизацию под свой проект у разработчиков. Собирать можно телефоны, e-mail, логины в Instagram или любые произвольные данные. Количество секторов – 2, 4, 6 или 8. Заявки попадают во Вконтатке, Телеграм, по SMS или отправляются на указанный URL.

Интеграция с CRM-системами, пока, в разработке.

Цена – от 490 рублей в месяц.

У меня, пока, на этом – все. Если вы знаете еще какие-то стоящие сервисы, то добавьте их в опрос ниже или напишите в комментариях, я сам добавлю. Хочу собрать действительно стоящие проекты, с которыми можно работать и рекомендовать клиентам и читателям. Пока, из онлайн-сервисов, могу рекомендовать только GameLead, так как там есть, более-менее, нормальные настройки внешнего вида и интеграции.

Источник

Как сделать колесо фортуны на сайте

Достаточно одного скрипта и немного CSS

На некоторых сайтах можно встретить колесо фортуны с призами. Работает так: нажимаете кнопку, колесо начинает крутиться, и на что показывает стрелка после остановки — это и есть ваш приз. Есть сервисы, которые предоставляют такое колесо как платную услугу, а мы сделаем своё и бесплатно:

❗️ В этом проекте довольно люто используется CSS 3. Мы о нём ещё не писали, но мы исправимся и напишем. Многие штуки в CSS-коде будут выглядеть непривычно, поэтому мы их объясним прямо в комментариях. Крепитесь.

Готовим страницу

Как обычно в наших проектах, на странице будет только разметка невидимых блоков — всё содержимое появится потом, из скрипта. Внутреннее устройство будет такое:

• делаем главный блок deal-wheel, внутри которого будут находиться все элементы;
• внутрь этого блока добавляем список spinner — это будут наши надписи на секторах;
• туда же кладём блок с язычком барабана ticker, который укажет на приз и кнопку с классом btn-spin — она запустит колесо.

За остальное будет отвечать скрипт.

Сразу добавим стили в отдельный файл style.css:

Настраиваем общий блок

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

Чтобы не перегружать код одними и теми же параметрами, будем использовать CSS-переменные. Они начинаются с двух дефисов и работают внутри того блока, в котором прописаны. Также эти переменные понадобятся нам при настройке анимации в скрипте.

Добавим стили в файл style.css. Читайте комментарии, тут всё подробно объяснено:

Готовим переменные в скрипте

Так как на самой странице у нас только блоки, всё остальное содержимое будем делать и добавлять через скрипт script.js.

Первое, что нам понадобится, — завести все переменные, которые будем использовать в проекте. Начнём со списка призов. Обратите внимание, что цвета здесь указаны в системе HSL — hue, saturation, lightness (оттенок, насыщенность, яркость). Это не необходимость, можно было указать и в RGB, и в hex-значениях:

Теперь создадим переменные, через которые будем работать со всеми элементами на странице:

// создаём переменные для быстрого доступа ко всем объектам на странице — блоку в целом, колесу, кнопке и язычку
const wheel = document.querySelector(«.deal-wheel»);
const spinner = wheel.querySelector(«.spinner»);
const trigger = wheel.querySelector(«.btn-spin»);
const ticker = wheel.querySelector(«.ticker»);

Следующий шаг — переменные для разбивки блока на разноцветные секторы. Так как мы заранее не знаем, сколько у нас призов, то будем сразу всё высчитывать:

Осталось добавить переменные, которые будут меняться в ходе работы скрипта:

// переменная для анимации⠀
let tickerAnim;⠀
// угол вращения
let rotation = 0;⠀
// текущий сектор⠀
let currentSlice = 0;⠀
// переменная для текстовых подписей
let prizeNodes;

Добавляем секторы и призы на экран

Теперь, когда у нас есть все нужные переменные, добавим призы в блок со списком «.spinner». Логика такая:

1. Перебираем весь список с призами, один за одним, по очереди.
2. Сразу считаем угол поворота для каждой надписи.
3. Добавляем в конец списка HTML-код, чтобы у нас появился новый элемент маркированного списка.
4. В этом же коде добавляем ему стиль для поворота на нужный угол.

Также сделаем разбивку по цветным секторам: просто добавим нужные параметры к стилю у класса «.spinner»:

Теперь соберём всё вместе и сразу создадим объект с призами, чтобы потом было из чего выбирать:

// создаём функцию, которая нарисует колесо в сборе
const setupWheel = () => <
// сначала секторы
createConicGradient();
// потом текст
createPrizeNodes();
// а потом мы получим список всех призов на странице, чтобы работать с ними как с объектами
prizeNodes = wheel.querySelectorAll(«.prize»);
>;

// подготавливаем всё к первому запуску
setupWheel();

После запуска вам может показаться, что наш код не работает. Но на самом деле это не так: код работает как нужно, просто мы не добавили в стили новые параметры, которые использовали в коде — spinner и prize. Исправим это на следующем шаге.

Исправляем внешний вид колеса

Сейчас блок с колесом выглядит как прямоугольник, потому что зависит от содержимого с текстом. Чтобы это стало похоже на круг, добавим стили специально для секторов колеса:

У нас появились нормальное деление круга на цветные секторы, но все надписи слиплись. Всё дело в относительном позиционировании. Так как мы ещё не задавали правила расстановки текста, каждый элемент получился на одном и том же месте. Чтобы их разнести по секторам, добавим стили для текста:

Стало лучше, но кнопка теперь слишком мелкая. Нужно исправить.

Кнопка запуска

Сделаем текст на кнопке того же размера, что и надписи на секторах. Заодно пропишем внешний вид неактивной кнопки: пусть она будет полупрозрачной и с другим курсором. Тогда сразу будет понятно — кнопка работает, нажимать пока нельзя.

Добавляем язычок

Язычок — это такой указатель на колесе, который всё время указывает на какой-то сектор. При вращении настоящего колеса фортуны металлический язычок касается столбиков на границе секторов и отклоняется в сторону. Так легко можно определить — перескочил язычок на новый сектор или скорости колеса не хватило и он остался на столбике, указывая на предыдущее значение.

Пока просто нарисуем язычок, а механику добавим чуть позже:

Задаём количество оборотов

Если мы в жизни запустим такое колесо, то оно постепенно будет замедляться. За это отвечает сила трения и разные физические факторы. Чтобы нам реализовать такую же механику, мы заранее определим количество градусов, на которое повернётся колесо. Для этого добавим функцию, которая вернёт нам случайным образом некоторое число в зависимости от минимального и максимального параметра вращения:

// функция запуска вращения с плавной остановкой
const spinertia = (min, max) => <
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max — min + 1)) + min;
>;

Запускаем колесо

Чтобы запустить колесо, нужно нажать на кнопку. Но так как мы в HTML-файле не прописывали обработчик нажатия, добавим такой обработчик в JS-файле. Читайте комментарии, чтобы разобраться подробнее, что происходит в этом блоке:

👉 Готовый код анимации вращения мы взяли с сайта css-tricks.com — там много интересного; если знаете английский, то загляните на досуге.

Чтобы магия анимации сработала, добавим нужные свойства в CSS-файл:

Видно, что колесо запускается и останавливается, но больше ничего не происходит: кнопка не отжимается и приз никак не подсвечивается. Этим и займёмся.

Отжимаем кнопку

Кнопку можно отжимать только после того, как колесо полностью остановилось и нам выпал какой-то приз. Чтобы это сработало именно после остановки колеса, добавим ещё один обработчик событий. Он будет следить за анимацией секторов, и если она закончилась — запустится код обработчика:

И сразу добавим код, который добавит спецэффектов в выпавший сектор:

// функция выбора призового сектора
const selectPrize = () => <
const selected = Math.floor(rotation / prizeSlice);
prizeNodes[selected].classList.add(selectedClass);
>;

Добавляем спецэффект в приз

Последнее, что нам осталось сделать в этом проекте, — добавить спецэффект в призовой сектор. Сделаем его так: сделаем текст белым, а потом на мгновение сделаем его чуть больше, как будто он выпрыгивает на нас, а потом возвращается на место. И добавим тень, которую текст будет отбрасывать при вылете:

Источник

Введение в новый CoordinatorLayout

В этом году на конференции Google IO компания Google представила новую библиотеку Android Design Support Library, которая создана для того, чтобы помочь разработчикам внедрять материальный дизайн в их приложения. Билиотека содержит много компонентов, нужных для этого нового стиля, и работает со всеми уровнями API, начиная с седьмого. Если по какой-то причине вы пропустили её анонс, можете ознакомиться с постом Ian Lake, выложенным на Android Developers Blog.

Встречайте Android CoordinatorLayout

Из всех компонентов, включенных в Android Design Support Library, наиболее интересным выглядит новый «прокачанный FrameLayout», он же герой нашей статьи — CoordinatorLayout. По названию можно догадаться, что CoordinatorLayout позволяет координировать некие зависимости между включенными в него виджетами.

Всё, что нужно сделать — обернуть необходимые нам виджеты в CoordinatorLayout. Давайте посмотрим, как это будет выглядеть в коде. Наш демонстрационный код очень прост — Floating Action Button, по нажатию на которую на экране появляется Snackbar.

Сначала добавим Support Design Library в gradle:

Теперь создадим разметку для нашей Activity:

И, заодно, саму MainActivity:

Посмотрим на демо:

Но что если мы захотим использовать другую реализацию FAB? FAB из Support Library не умеет разворачиваться по нажатию на неё в список доступных опций (прим. переводчика: так, как это показано в спецификациях дизайна от самой Google), поэтому давайте-ка попробуем другую реализацию FAB:

В этом случае CoordinatorLayout не работает из коробки, и связано это с тем, что наша новая FAB не имеет подключенной к ней реализации класса CoordinatorLayout.Behavior (прим. переводчика: далее по тексту будет использоваться слово «поведение»). Что можно сделать? Можно подождать, пока кто-нибудь не добавит её…

… или написать свою собственную реализацию CoordinatorLayout.Behavior, специфичную для FAB в нашем проекте.

Виджеты учатся вести себя правильно

Чем по-настоящему хорош CoordinatorLayout, так это тем, что нам не нужно иметь доступа к исходникам того виджета, для которого нужно реализовать его поведение. Также можно изменить поведение по умолчанию для любого виджета.

Сначала отнаследуемся от класса CoordinatorLayout.Behavior:

Добавим конструктор с параметрами Context и AttributeSet для того, чтобы наша реализация могла получить необходимые ей аттрибуты из xml-файла:

Следующий шаг — переопределить метод layoutDependsOn() и возвращать true только тогда, когда мы хотим отреагировать на происходящие в разметке изменения. В нашем случае, мы хотим реагировать только на изменения виджета Snackbar:

Теперь перейдем к реализации поведения. Метод onDependentViewChanged вызывается всякий раз, когда с виджетом, который находится в CoordinatorLayout и изменения которого мы отслеживаем, что-то происходит (прим. переводчика: имеются в виду изменения, приводящие к тому, что нужно пересчитать положение на экране виджета, для которого мы реализуем поведение, то есть понятно, что изменение, скажем, цвета Snackbar нас никак не интересует). В этом методе мы можем узнать текущее состояние Snackbar, и, соответственно, подвинуть FAB вверх, когда Snackbar появляется на экране. Для этого нужно изменить значение translationY у FAB на величину, равную высоте Snackbar. В начале анимации Snackbar, свойство translationY SnackBar’a выставлено в величину, равную высоте самого Snackbar, а значит, чтобы получить правильное значение translationY для FAB, нам нужно вычесть высоту Snackbar из его же translationY. Согласно документации, нам нужно вернуть true тогда, когда объект меняет своё положение на экране.

Последнее, что остаётся сделать — указать, что CoordinatorLayout должен использовать FloatingActionButtonBehavior. Сделать это можно в разметке:

И вот результат:

Если вы хотите указать для своего виджета поведение по умолчанию, пометьте его аннотацией DefaultBehavior, указав в параметрах аннотации путь к нужной вам реализации класса Behavior.

Хотите взглянуть на полную реализацию? Вам на github.

Источник