终、球不落地，永不放弃

闻くは一瞬の耻、闻かぬは一生の耻。
俗话说：不耻下问是一时之耻，耻而不问是一生之耻。
— 井口佑未【白箱】

心得

白箱，剧情叙述一群女孩为了热爱的动画，而努力在日本动画业界奋斗的故事，剧情写实、但又会让观众为了这群热血追梦的女孩们而热泪盈眶。参加铁人赛的过程也许没有像白箱一样美好，但感受那种为了热爱的事情而燃烧生命的感觉却是一样的。

从前端新手到真正进入前端工程界一小段时间後，发现自己真的是对画面特效相当大的热情与兴趣，又平常专案非其实会遇到动画技术的时刻非常少，因此想藉由至个机会好好研究一下前端动画技术能到达怎麽样的境界。

不过回想起整个参赛得过程，真的有种『天啊这 30 天到底发生什麽事，我是谁？我人在哪里？』的感受，大概真的就像许多影视作品里的转生者有相同感受吧。

遗珠之憾

没能好好花时间研究 Canvas，本来想做乱数产生箭头 - 「矢琶羽：红洁之箭」，加上滑鼠事件 - 「愈史郎：目隐」。但时间真的不够好好实际演练一遍啊！只好留到未来有时间再说罗～

目录

动画概论

• 基础动画 12 法则：
  想成为网页动画创世神？那麽你不可不知的动画12法则！
• 网页动画历史：
  网页动画到底在干尛？才不告诉逆咧～咧、咧～

伪。网页动画

• CSS 视差滚动
  我是爱与正义的水少服战士，要代替 视差滚动 惩♥︎罚♥︎你

CSS 基础定位系统

• CSS Transform
  上上下下左左右右AB Transform
• CSS Transform 3D - 基础理论
  和我签订契约，成为魔法少女吧! Transform 3D (上篇)
• CSS Transform 3D - 实作范例
  和我签订契约，成为魔法少女吧! Transform 3D (下篇)

CSS 基础动画

• CSS Transition
  今晚，我想来点...双重口感切换的 Transition
• CSS Animation - 简介
  ☞ 轰隆隆隆冲冲冲 Animation 引擎发动 ━☆ﾟ.*･｡ (正)
• CSS Animation - 基础理论
  ☞ 轰隆隆隆冲冲冲 Animation 引擎发动 ━☆ﾟ.*･｡ (反)
• CSS Animation - Animation even 与 实作范例
  ☞ 轰隆隆隆冲冲冲 Animation 引擎发动 ━☆ﾟ.*･｡ (合)
• Time Function 工具介绍
  制作网页动画却不用 Time function ? HaiYaa~~

雪碧图动画

• Sprite 图基础理论 与 CSS Sprite 动画
  喵喵喵喵喵喵喵喵 Sprite Animation

SVG

• SVG 简介
  辣个 SVG 也许会迟到，但永不缺席 。(起)
• SVG 基础理论
  辣个 SVG 也许会迟到，但永不缺席 。(承)
• SVG 基础理论 与 动画概论
  辣个 SVG 也许会迟到，但永不缺席 。(转)
• SVG 实作范例
  辣个 SVG 也许会迟到，但永不缺席 。(合)

Canvas

• Canvas 简介
  你好啊铁人们，接下来就由我锁链 Canvas 对付你！(壹)
• Canvas 动画概论
  你好啊铁人们，接下来就由我锁链 Canvas 对付你！(贰)
• Canvas 的 物件导向 与 物件导向简介
  你好啊铁人们，接下来就由我锁链 Canvas 对付你！(参)
• Canvas 的 class 写法 与 class 简介
  你好啊铁人们，接下来就由我锁链 Canvas 对付你！(肆)
• Canvas API 简介
  你好啊铁人们，接下来就由我锁链 Canvas 对付你！(伍)
• Canvas 实作范例
  你好啊铁人们，接下来就由我锁链 Canvas 对付你！(陆)

Three.js

• Three.js 简介
  燃烧吧！Three.js 小宇宙！(壹)
• Three.js 基础理论
  燃烧吧！Three.js 小宇宙！(贰)
• Three.js 物件操作
  燃烧吧！Three.js 小宇宙！(参)
• Three.js 动画概论
  燃烧吧！Three.js 小宇宙！(肆)
• Three.js 实作范例
  燃烧吧！Three.js 小宇宙！(伍)

近代多媒体艺术 与 动画概论

• 探讨 近代多媒体艺术 与 传统动画 差异
  集合啦！ 动画技术同好会

感谢

虽然说「要感谢的人太多了，那就谢天吧」但在这边还是要好好感谢这一路上帮助我的人们。

首先先感谢这次一起参加 Web 技术组的小夥伴们：

• 感谢 Chris 从一开始给予我参赛文章方向，我不会忘记你说「想做的事情太多了？那就不要睡觉啊」加上天真灿笑的表情。在我最痛苦差点文章难产的时候陪着我一边聊天一边整理思绪，让我平安的度过每一天。跟你讨论那些玄幻的事情，真的好有趣。
• 感谢 Penghua 有耐心的陪着我研究一个有点陌生的技术语法好久，还有嘴我文章 Title 太过中二。中二很棒，希望我活到了 60 岁还能有个中二的心。
• 感谢 Titan 你教我 class 时那个自信及写出来漂亮的程序码我一辈子都不会忘记，程序麻瓜我真的佩服得五体投地。真不愧是体质强健的 Titan (跟体质虚弱的 Cathy)

感谢想像工作室的大家

• 感谢 创造这麽棒学习环境的 好想工作室，如果没有你们每天的 highlight 我大概不可能独自完成这艰难的任务吧。
• 感谢 好想工作室 Web Camp 的大家，我一边做案子一边写比赛还要一边搞战情室出来的时候，是你们陪着我完成了这些事情、并且体谅我事情太多而有些事情我都呈现摆烂状态，还要被迫帮我想文章梗，真的好辛苦。

感谢陪在我身边的人

• 感谢 爸妈 在我经历各种摧残，连假窝在家油腻腻又疲倦的写程序时，帮我买早餐午餐晚餐，催促我去洗澡睡觉，还默默地从房门缝後面递一盘水果怕我太辛苦，只能说我要当一辈子的爸宝、妈宝～
• 感谢 姐姐 在我一边哭着文章难产的时候，抱着我鼓励我的你，我们要一起加油。
• 感谢我身边的朋友，每天听我哭夭多辛苦多累，一句怨言也没有还每天都会鼓励我的朋友。还有我醉到坐在计程车上一边大哭一边说自己是废物绝对无法完赛的时候笑着把丑样录影下来安慰我的朋友，我爱你们。

最後的最後，感谢一下真的完赛的自己，我真的超棒的，一年前的我一定会超崇拜现在的自己。 也期望未来能够保持参赛的那种心态去学习每一个技术。

还有感谢阅读我的文章的你们，有你们的支持就是我写文章的动力。

那麽 网页阿尼尛，到底是在干尛？ 就到这边告一段落，落幕一鞠躬，也许未来还会再见，掰掰～～