2016年度10大HTML5動畫
阿新 • • 發佈:2019-02-07
踏得網精選2016年度最酷最新的HTML5動畫集,評選標準為:創意新穎度+實現技術難度+趣味程度。
使用一些線上H5生成工具的作品,因其主要使用圖片和CSS3套路動畫,千人一面乏善可陳,不入該列。
所涉及技術主要是:HTML5/CSS3/SVG/WebGL(Three.js)/ES6(BabelJS)。檢視原文連結。
TOP10: 鏡花水月
使用SVG turbulence 濾鏡實現的動畫特效
TOP9: 海上生明月,天涯共此時
3D版本的水中月,使用Three.js 3D渲染引擎實現,光影效果很不錯
TOP8: 機甲戰士
使用WebGL實現的一個3D版本的射擊小遊戲(無情節),包含3D遊戲的基本互動操作
TOP7: 魔鏡魔鏡
使用GIF圖作為整體的場景動畫,使用WebGL實現內嵌的魔鏡特效,很有創意
TOP6: 亡命小兔
來一個相對完整的年度小遊戲作品,使用Three.js和GSAP所實現。
TOP5: 時空隧道
超炫的HTML5/WebGL蟲洞特效,體驗玄幻穿越。
TOP4: 線上電子琴
使用柏林噪音演算法實現的音樂自動演奏,使用Tone音效庫實現的聲音效果
TOP3: 雨中飛鳥
一個HTML5微動漫作品製作。淅瀝瀝雨中棲息在電線杆上的鳥兒,忽然傳來一聲犬吠,驚起一線飛鴻。使用HTML5/SVG/CSS3製作動畫,使用buzz.js實現音效。TOP2: 花樣年華
使用WebGL模擬時光流淌的動畫,可用於電影特效
TOP1: 自由之枝
在HTML5/Canvas上繪製分形樹生長動畫。使用滑鼠劃線,幫助樹枝擺脫束縛,變身自由飛翔的小鳥!
雖無3D之炫酷,但極富創意和寓意,故此排在第一位。