05.07.2024 – Pavel Klavík, Kamila Klavíková
Dnes jsme uveřejnili update OrgPadu, ve kterém jsme vylepšili animaci nadpisu při otevírání buňky. Odstranili jsme rušivé pobliknutí, místo něj rovnou přehodíme nadpis do nového zalomení. Na dalších vylepšeních animací buněk pracujeme.
#vylepšení, #změny, #OrgPad, #animace
Skvělé animace jsou pro fungování OrgPadu zásadní. Proto jsme jim během vývoje věnovali velkou pozornost. Nejedná se však pouze o grafické pozlátko. Animace umožňují srozumitelnější interakce s OrgPadem a předávají informace o změnách v dokumentu. Navíc používáme fyzikální animace na bázi pružin, kdy je buňka přitahována do nové pozice pružinou. Tyto pohyby jsou nám přirozené a při práci v OrgPadu nás neruší, protože jsme na ně celý život zvyklí z reálného světa. Špatné animace ruší a zdržují, těch správných si ani nevšimnete.
Animační systém je možné pořád vylepšovat, a jedno takové vylepšení jsme dnes udělali. Otevření buňky a zobrazení jejího obsahu je složitá orchestrace několika animací. Buňka mění rozměry, zobrazuje se obsah a také se může změnit zalomení nadpisu. Historicky jsme nadpis animovali tak, že zatímco starý zmizí, nový se objeví. To však působilo rušivě aniž by to sdělovalo užitečnou informaci. U buněk, které měly stejné zalomení nadpisu po otevření, jsme nadpis vůbec neanimovali a vypadalo to mnohem lépe. Proto nyní na začátku animace ihned předěláme nadpis do nového zalomení a buňka se roztáhne na správnou velikost.
Toto je však pouze první ze změn animací buněk, které plánujeme. Můžete si všimnout, že při otevření buňky ve videu fotka psa poblikne, protože se animací objeví z bílého pozadí. I tato animace je zbytečná a výsledek vypadá mnohem lépe, když tam bude fotka umístěná celou dobu, oříznutá okraji buňky, zatímco se buňka zvětšuje. Pak bude celá animace pouze jednoduchý pohyb. Když jsme to dnes zkoušeli, byli jsme překvapeni, o kolik výsledek vypadal lépe. Musíme dotáhnout jen pár detailů.
Dále pro buňky s více stránkami chceme udělat korektní přechod jedné stránky v další, tzv. cross fade. Dnes stará stránka mizí a nová stránka se objevuje, což znamená, že uprostřed animace přechod poblikne. Vypadá to obzvlášť ošklivě, pokud jsou stránky téměř totožné. Tento článek popisuje, jak lze kýženého efektu docílit v prohlížeči pomocí CSS.
Poslední plánovaná změna se týká „obrázkových buněk“. Pokud do buňky bez nadpisu vložíte jediný obrázek, vloží se tento obrázek přímo do šedého plátna. To je skvělé pro transparentní obrázky, které umožňují vytvářet libovolné tvary buněk. Když jsme tuto funkci do OrgPadu před třemi roky přidali, nebylo nám jasné, jestli je to správné řešení a jak moc bude užitečná. Proto jsme ji naprogramovali nejjednodušším možným způsobem a animace přechodu stránek vůbec neřešili. Velice rychle se ukázalo, že tato funkce v OrgPadu umožňuje vytvářet graficky skvělé materiály a více si tak přizpůsobit vzhled OrgStránky. Až do této chvíle jsme se ale k vylepšení animací obrázkových buněk nedostali. Proto také vylepšíme přechody mezi dvěma obrázkovými stránkami nebo mezi obrázkovou a neobrázkovou stránkou s bílým pozadím.
