Open source
ბრაუზერის ძრავის აზროვნება, Flutter-ის SVG-ში გადმოტანილი.
დენისმა შექმნა და დღემდე ავითარებს full_svg_flutter-ს — დამოუკიდებელ რენდერინგის runtime-ს გუნდებისთვის, რომლებსაც არსებული SVG-ასეტების Flutter-შიც SVG-ად შენარჩუნება სჭირდებათ.
საჯარო მდგომარეობა · 17 აგვისტო 2026
01 · Problem
ასეტი ბრაუზერში მუშაობს. Flutter-ში ანიმაცია ქრება.
ბევრი გუნდი ამ ხარვეზს ასეტის Lottie-ში, Rive-ში, GIF-ში, WebP-ში ან Flutter-ის საკუთარ ანიმაციურ კოდში კონვერტაციით აგვარებს. ეს კარგი ინსტრუმენტებია, მაგრამ კონვერტაცია ზედმეტი ფასია, როცა SVG უკვე თავად არის პირველწყარო.
02 · Engine
ერთი, DOM-ის სტრუქტურის შემნახველი ძრავი სტატიკური და ანიმირებული SVG-ისთვის
პაკეტი დოკუმენტის მოდელს, CSS-ს, დროის ღერძს, ფილტრებს, ტექსტსა და ინტერაქციის მდგომარეობას პარსავს და შემდეგ Flutter-ის შიგნით ხატავს. JavaScript-ზე მომუშავე SVGator-ის ექსპორტები ჩაშენებული QuickJS-ძრავით სრულდება; სკრიპტების გარეშე SVG-ები JavaScript-ის გაშვების ხარჯს არ იხდიან.
03 · Runtime
რას ფარავს runtime
- სტატიკური გეომეტრია, გრადიენტები, პატერნები, ამოჭრა და მასკები
- SMIL და CSS @keyframes ანიმაცია
- Path morphing, motion paths და დაკვრის მართვა
- SVG-ის 17-ვე ფილტრის პრიმიტივი
- მდიდარი ტექსტი, textPath, bidi/RTL და ხელმისაწვდომობის მეტამონაცემები
- ჩაშენებული JavaScript და SVGator-ის ექსპორტები
- flutter_svg-თან თავსებადი სტატიკური API და მიგრაცია
- Android, iOS, macOS, Windows და Linux
04 · Demo
ერთი SVG ფაილი. აქ — ბრაუზერის ნატიური ანიმაცია; პაკეტში — Flutter-ის ნატიური რენდერინგი.
ეს გვერდი პროექტის საკუთარ ანიმირებულ SVG-ს ბრაუზერში აჩვენებს. Flutter-აპლიკაციაში full_svg_flutter იმავე საწყის ფორმატს Flutter-ის შიგნით ხატავს — WebView-სა და კონვერტაციის ეტაპის გარეშე.
მიგრაციის პრაქტიკული გზა
არსებული სტატიკური SvgPicture ხშირად მხოლოდ იმპორტის შეცვლით გადადის. FSvgPicture ანიმაციის ნიშნებს ავტომატურად ამოიცნობს, AnimatedSvgController კი საჭიროებისამებრ ამატებს პაუზას, გადახვევას, სიჩქარეს, მიმართულებასა და SVG-ის ხედების მართვას.
05 · Runtime stack
რეალური ზღვრული შემთხვევებიდან დაბადებული runtime-ების დოკუმენტაცია.
ტექნიკური სტატიები
პრობლემა: Flutter-ში SVG-ის მხარდაჭერა, როგორც წესი, სტატიკურია
პრაქტიკული ახსნა: რენდერინგის ხარვეზი, გავრცელებული გვერდის ავლის გზები, დაკვრის მართვა, წარმადობის კომპრომისები და ის, როდის არის SVG-ის SVG-ად შენარჩუნება სწორი არჩევანი.
ტექნიკური ანალიზის წაკითხვა (იხსნება ახალ ჩანართში)კონტაქტი
გჭირდებათ ციფრული პროდუქტის შექმნა, მოდერნიზაცია ან ჩიხიდან გამოყვანა?
მოგვიყევით რეალურ პრობლემაზე — ვები, მობილური, გუნდის მიწოდება თუ AI სამუშაო პროცესი, რომელიც პროდაქშენისთვის ვარგისი უნდა გახდეს.
პროექტის განხილვა