• 授课方式
    录播视频+社群交流+答疑辅导
  • 开课时间
    随到随学
  • 适合人群
    求职前端岗位,想获得具有竞争力的项目和简历亮点的同学
  • 课程时长
    1800分钟

课程介绍

点击“进入课程”即可免费学习

讲师介绍

  • 王亚男
    王亚男,牛客专职老师,拥有5年前端实战开发经验+1年授课经验,曾独立负责3个大型级项目,担任团队敏捷教练,在开发实战中及时发现团队问题,提出高效解决办法。

课程提纲

  • 第1章
    制作酷炫动画,学会使用anime.js

    课程介绍

    搭建开发环境

    anime.js基本功能的使用

    交错动画

    时间轴

    控制、回调与助手

    动画运动曲线

    SVG动画

    实践上

    实践下



  • 第2章
    剖析anime.js 核心,手撕基本功能代码

    anime.js核心结构解析

    engine实现

    处理目标元素

    目标属性和属性参数的数据结合

    获取动画数据

    整合处理params参数

    完成动画基本结构

    属性参数功能

    动画参数

  • 第3章
    再探anime.js 核心,触底属性值的全方位解决方案

    属性值-初始值

    属性值-单位缺省

    属性值-特殊单位

    属性值-相对值计算

    属性值-颜色值

    设置属性值-from-to

    设置属性值-函数值

    帧动画

  • 第4章
    深入 anime.js 核心,揭秘动画交互的本质

    交错方法1

    交错方法2

    交错方法3

    控制-运行-暂停

    控制-反向-重置-设置状态

    回调-begin-update-complete

    回调-loopBegin-loopComplete

    回调-change-changeBegin-changeComplete

    promise

    助手-remove

    助手-get-set

    助手-random-running

    助手-tick

    时间轴-基础

    时间轴-参数

    SVG-path

    SVG-改变形状-画线

    easing

  • 第5章
    项目实践与总结,根本解决面试过程中的三层痛点

    上照片墙案例1

    上照片墙案例2

    上照片墙案例3

    钟表案例

    徒手完成SVG动画

    疑难点总结-项目回顾与总结

    前端高频面试题-闭包

    前端高频面试题-递归

    前端高频面试题-深浅克隆

    前端高频面试题-动画性能

    前端高频面试题-vue-anime.js

常见问题

1.课程是真的免费吗?如何获得?

答:牛客职导自研课程的免费都是真实有效的,直接点击“进入课程”按钮即可免费观看学习,不用有任何其他的操作,同学们可以放心学习。

2.课程视频有效期多久?
答:课程视频是可以随时观看学习的。
3.课程可以分享给身边同学吗?
答:当然可以,但一定要记得上牛客官方平台来学习哦。
4.版权问题

答:虽然课程是免费的,但版权依然归牛客职导所有,任何其他机构、媒体、网站或个人未经本网协议授权,不得发布/发表/转载牛客职导官方的课程链接/内容,违者将依法追究相关责任。

最近正在学