{"id":26783,"date":"2026-07-01T11:48:13","date_gmt":"2026-07-01T09:48:13","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=26783"},"modified":"2026-07-31T12:20:59","modified_gmt":"2026-07-31T10:20:59","slug":"wprowadzenie-do-animacji-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-18","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wprowadzenie-do-animacji-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-18\/","title":{"rendered":"Wprowadzenie do animacji | Kurs\u00a0Industrial Graphics w oprogramowaniu AVEVA, odc. 18"},"content":{"rendered":"\n
<\/div>\n\n\n\n

Czas, by\u015bmy przeszli do konfigurowania animacji w symbolach Industrial Graphics.<\/p>\n\n\n

\n

Kurs projektowania symboli Industrial Graphics w oprogramowaniu wizualizacyjnym AVEVA<\/strong><\/h3>\n1. Wprowadzenie do Industrial Graphics<\/a>
\n\n
\n
Edytor Industrial Graphics<\/h5>\n2. Edytor symboli Industrial Graphics<\/a>
\n3. Zaznaczanie i przesuwanie element\u00f3w graficznych<\/a>
\n4. Grupowanie element\u00f3w graficznych<\/a>
\n5. Wyr\u00f3wnywanie element\u00f3w graficznych<\/a>
\n6. Zmiana orientacji element\u00f3w graficznych<\/a>
\n7. Kolejno\u015b\u0107 element\u00f3w w osi Z (z-order)<\/a>
\n8. Dynamiczna zmiana rozmiaru<\/a>
\n9. Tworzenie symboli na podstawie zmiennych<\/a>
\n10. Wykorzystanie grafiki SVG w symbolach<\/a><\/td>\n
Projektowanie symboli<\/h5>\n11. Rysowanie linii<\/a>
\n12. Rysowanie kszta\u0142t\u00f3w<\/a>
\n13. Teksty i pola tekstowe<\/a>
\n14. Wy\u015bwietlanie statusu jako\u015bci danych<\/a>
\n15. Praca z przyciskami wyboru (radio buttons)<\/a>
\n16. Praca z kontrolk\u0105 kalendarza<\/a>
\n17. Praca z kontrolk\u0105 wyboru daty i czasu<\/a>
\n
Animacje<\/h5>\n18. Wprowadzenie do animacji<\/a>
\n19. Animacja wype\u0142nienia procentowego<\/a><\/td>\n
20. Animacja wy\u015bwietlania warto\u015bci<\/a>
\n21. Animacja wprowadzania warto\u015bci<\/a>
\n
Narz\u0119dzia zaawansowane<\/h5>\n22. Wprowadzenie do w\u0142a\u015bciwo\u015bci Custom Properties<\/a>
\n23. Dodawanie w\u0142a\u015bciwo\u015bci Custom Properties<\/a>
\n24. Wprowadzenie do styl\u00f3w<\/a>
\n25. Wprowadzenie do skrypt\u00f3w<\/a>
\n26. Edytor skrypt\u00f3w Industrial Graphics<\/a>
\n27. U\u017cywanie zewn\u0119trznych bibliotek w skryptach<\/a><\/td>\n<\/tr><\/tbody><\/table>\n<\/div>\n\n\n

Zacznijmy od podstaw.  Na pocz\u0105tek narysujmy najprostszy prostok\u0105t i dodajmy najprostszy napis za pomoc\u0105 narz\u0119dzia Text<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Animacje konfigurowane s\u0105 w znanym nam ju\u017c oknie Edit Animations<\/strong>. Najprostszym sposobem otwarcia tego okna edycji jest dwukrotne klikni\u0119cie elementu, dla kt\u00f3rego chcemy zdefiniowa\u0107 animacj\u0119. Zr\u00f3bmy to dla narysowanego wcze\u015bniej prostok\u0105ta. Okno, kt\u00f3re pojawia si\u0119 na ekranie, pocz\u0105tkowo jest puste, bo prostok\u0105t na pocz\u0105tku nie ma zdefiniowanej \u017cadnej animacji.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Istniej\u0105 r\u00f3wnie\u017c alternatywne sposoby. W dolnej cz\u0119\u015bci panelu Properties<\/strong> wy\u015bwietlana jest sekcja Animations<\/strong>, w kt\u00f3rej b\u0119d\u0105 pojawia\u0142y si\u0119 animacje zdefiniowane dla poszczeg\u00f3lnych element\u00f3w. Za pomoc\u0105 przycisku z plusem mo\u017cna doda\u0107 animacj\u0119 z tego poziomu.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Mo\u017cna wreszcie zaznaczy\u0107 element w oknie i wykorzysta\u0107 skr\u00f3t klawiszowy CTRL+A.<\/p>\n\n\n\n

Aby doda\u0107 animacj\u0119, klikamy przycisk z plusem w g\u00f3rnej cz\u0119\u015bci okna Edit Animations<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Animacje dziel\u0105 si\u0119 na dwie grupy:<\/p>\n\n\n\n