svg 動畫

After Effect 轉 svg 動畫 – 神奇的 bodymovin 插件

在製作網頁的過程中,以往遇到太複雜的動畫時我不會用 css 處理,而是直接轉成 gif 檔,但 gif 檔實在是超級大,如今在螢幕尺寸百家爭鳴的生態之下,更需準備多組大小才能讓動畫看起來銳利。對於這話題,Ivan Wei 寫過一篇文章 Android — 讓 apk 裡的切圖容量減少95%的好方法" 非常詳細的介紹如何運用 svg 處理圖樣 icon,現在我們面對 svg 動畫 而言又有甚麼方案呢? Continue reading

如何讓介面中的動畫設計較容易被實現?

animatio

一般而言設計師交接給工程師製作時,除了輸出的圖檔之外還會有一份設計文件,用來交代畫面上的間距、文字、顏色等等資訊,有很多文章都在講解如何寫一份好的設計文件,例如這一篇

隨者設計發展,動畫的重要性也逐漸受到重視,設計大舌頭也特別寫了一篇文章說明動畫效果的重要性: 2015 動畫效果會是介面設計的趨勢嗎?。然而動畫效果較不容易用設計文件說明。

通常設計師會透由原型(prototype)來表達動畫效果,運用像 After Effect、Framer.js、Origami 等等工具製作,但這些工具的產出大多是展示用途,工程師不太能夠直接拿來用, 於是工程師看完設計的動畫之後,還必須自己再用程式寫出那樣的效果。這樣的流程常常會有工程師看到原型後說動畫太複雜做不到,或需要花太多資源去做,以及做出的動畫效果跟原型展示不一致的情況發生。

Continue reading