SVG-Dashboards/en: различия между версиями

SVG-Dashboards/en (просмотреть исходный код)

Версия 12:54, 4 августа 2023

1200 байт убрано ,  9 месяцев назад
Новая страница: «=== Loading === # Create a new SVG panel following the instructions in the Creating an SVG panel. # In the svg panel editor, click the '''As JSON''' button, copy the link description from the saved file and paste the text into the field # Click the '''Save'' button '' at the bottom of the page.»
(Новая страница: «=== Conditional expressions === Available operations: * <code>></code> — greater than * <code>>=</code> — greater than or equal to * <code><</code> — less than * <code><=</code> — less than or equal to!N !* <code>==</code> — equals * <code>!=</code> — not equal»)
(Новая страница: «=== Loading === # Create a new SVG panel following the instructions in the Creating an SVG panel. # In the svg panel editor, click the '''As JSON''' button, copy the link description from the saved file and paste the text into the field # Click the '''Save'' button '' at the bottom of the page.»)
Строка 261: Строка 261:
SVG panel elements can be animated using CSS.
SVG panel elements can be animated using CSS.


<div lang="ru" dir="ltr" class="mw-content-ltr">
To do this:
Для этого нужно:
#Draw an SVG panel in a vector editor like Inkscape.
#Нарисовать SVG-панель в векторном редакторе, например, Inkscape.
#Open the SVG file in a text editor and add a style block wrapped in tags<style></style> .
#Открыть файл SVG в текстовом редакторе и добавить блок стилей, заключенный в теги <code><style></style></code>.
#Add the '''@keyframes''' rule in the style block.
#В блоке стилей добавить правило '''@keyframes'''.
#Save the file and load it into the controller.
#Сохранить файл и загрузить его в контроллер.
#Go to the SVG panel editor in the controller's web interface.
#Перейти в редактор SVG-панели в веб-интерфейсе контроллера.
#Activate the '''Style''' parameter and set the property '''animation''' in the '''Value''' field. You also need to set the condition under which the animation will work.
#Активировать параметр '''Style''' и задать в поле '''Value''' свойство '''animation'''. Также нужно задать условие при котором анимация будет срабатывать.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
Rendering in CSS is done using the '''animation''' property and the '''@keyframes''' rule.  
Визуализация в CSS осуществляется с помощью свойства '''animation''' и правила '''@keyframes'''.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
'''@keyframes''', or keyframes, contain information about how the element should look at each point in time.
'''@keyframes''', или ключевые кадры, содержат информацию о том как должен выглядеть элемент в каждый из моментов времени.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
A rule containing two keyframes would look like this:
Правило содержащее два ключевых кадра будет выглядеть так:
<syntaxhighlight lang="css">  
<syntaxhighlight lang="css">
@keyframes <keyframe name> {
@keyframes <имя кейфрейма> {
from: { description of the initial state of the element }
from: { описание начального состояния элемента }
to: { description of the final state of the element }
to: { описание конечного состояния элемента }
}
}
</syntaxhighlight>
</syntaxhighlight>  
Здесь '''from''' и '''to''' ключевые слова обозначающие начальную и конечную точки анимации. Вместо них можно использовать 0% и 100%, а также добавить промежуточные значения.
Here '''from''' and '''to''' keywords denote the start and end points of the animation. Instead, you can use 0% and 100%, as well as add intermediate values.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
The keyframe name is an identifier by which the rule will be called from the style description.
Имя кейфрейма — идентификатор, по которому правило будет вызываться из описания стилей.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
In order for the animation to work, you need to set the element style to the '''animation''' property.
Чтобы анимация заработала нужно задать стилю элемента свойство '''animation'''.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
<div lang="ru" dir="ltr" class="mw-content-ltr">
Источник — https://wirenboard.com/wiki/Служебная:Сравнение_версий/75711