玩转HTML5动画与交互.pptxVIP

K12教育玩转HTML5动画与交互面向中小学生的网页动画入门实操课

目录CONTENTS01这节课我们要学什么02网页动画有多重要03CSS3动画vsCanvas动画04三种动画实现方式对比05一个动画从想法到上线06常用CSS动画属性速查07课堂练习：做一个弹跳小球08为什么要学动画09课后任务与下节预告

这节课我们要学什么31了解HTML5Canvas和CSS3动画的基本概念与区别2学会用代码让网页元素动起来：平移、旋转、渐变3动手做一个会响应鼠标点击的交互动画小作品4掌握调试技巧：动画卡顿怎么办、如何优化性能

网页动画有多重要473%用户更愿意停留在有动效的网页上2.5倍带动画的按钮点击率比静态高出的倍数60帧/秒流畅动画的最低刷新标准12岁+适合开始学习HTML5动画的年龄

CSS3动画vsCanvas动画5CSS3动画（简单上手）用transition和keyframes写几行代码就能动适合做按钮悬停、元素淡入淡出浏览器自动优化，不用担心卡顿像搭积木一样拼接动画效果Canvas动画（灵活强大）用JavaScript逐帧绘制，控制更精细适合做小游戏、粒子特效、数据图表需要自己管性能，代码量更大像画画一样，每一笔都由你决定

三种动画实现方式对比6纯CSS过渡代码量少，5行以内搞定只能做简单位移和透明度不需要写JavaScript适合入门练习CSS关键帧可以定义多步复