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

课程介绍

8.1-8.7号,名企offer冲刺周,anime.js 入门到实战 超值特惠价:¥299

点击链接即可进入活动页面:https://www.nowcoder.com/activity/general-activity-promotion/20200801

一定要点击上面活动链接进去购买,才能享受优惠价哦!!!


讲师介绍

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

课程提纲

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

    第一节  课程介绍


    anime.js 简介
    课程学习目标
    前端动画实现方式对比


    第二节  搭建开发环境

    vsCode

    一个简单动画需求



    第三节  anime.js基本功能的使用

    动画的目标对象

    可动画的目标属性参数

    属性参数

    动画参数

    属性值

    关键帧


    第四节  交错动画


    交错动画


    第五节  时间轴

    时间轴


    第六节  控制、回调、助手

    动画控制

    回调

    助手


    第七节  动画运动曲线

    easing


    第八节 SVG 动画

    运动路径

    变形

    画线条



    第九节  anime.js 实践

    实现动画思路

    动画实现


    第十节  SVG 动画实践

    实现动画思路

    动画实现


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

    第一节  动画驱动核心

    动画驱动原理

    使用核心实现简单动画


    第二节  动画目标


    anime targets 数据分析

    css 选择器参数

    dom 对象参数

    js 对象参数

    数组参数

    targets 植入核心动画


    第三节  目标属性


    targets 属性数据分析

    属性数据设置

    targets 属性类型判断

    targets 属性设置

    targets 属性参数植入核心动画


    第四节  动画基础参数设置

    动画基础参数分析

    持续时间 duration

    延迟 delay

    末尾延迟 endDelay

    缓动 easing

    浮点数设置 round

    针对某个样式设置基础参数 specific property parameters

    函数参数 function based parameters

    动画基础参数整体植入核心动画


    第五节  动画的方向、循环、自动执行

    动画方向设置原理与方法

    动画执行次数设置原理与方法

    动画自动执行

    将方向、循环、自动执行整体植入核心动画


    第六节 帧动画设置

    帧动画设置原理

    动画帧

    参数帧

    帧植入到核心动画中

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

    第一节  动画属性值数据分析

    可接受的属性值类型


    第二节  属性值单位处理

    却省单位

    特殊单位


    第三节  属性值之计算

    相对值

    from to

    函数设置


    第四节  特殊值

    颜色值的类型与特点

    颜色值的处理


    第五节  整体数据处理植入到核心动画中

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

    第一节  交错动画

    交错动画实现原理

    交错动画实现


    第二节  时间轴

    时间轴动画实现原理

    时间轴动画实现


    第三节  动画控制

    开始/暂停原理与实现

    重新执行原理与实现

    反向执行原理与实现

    手动设置动画进程原理与实现

    时间轴的控制原理与实现


    第四节  回调

    回调设置原理

    更新回调

    开始与完成回调

    循环开始与循环完成回调

    修改回调

    修改开始与修改完成回调

    动画完成的原理与实现回调


    第五节 助手

    移除动画元素的原理与实现

    获取元素样式的原理与实现

    设置元素样式的原理与实现

    随机数的设置

    tick 的原理与实现

    running 的实现


    第六节  EASING

    SVG 动画的基本原理

    运动路径

    变形

    画线条

    SVG植入动画核心

    SVG

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

    第一节 anime.js 实践一个复杂的需求

    复杂动画原理解析

    动画实现


    第二节  徒手实现复杂动画需求

    复杂动画原理解析

    动画实现


    第三节  项目重点难点回顾

    核心思想回顾

    难点回顾


    第四节  常见面试题的解析


常见问题

1.课程包括哪些内容?
答:课程包括学习视频、课件和对应的源码,另外配有课程讲师提供一对一的答疑。
2.课程是全部更新完的吗?
答:课程目前还在持续更新中,以每周6节的进度更新,预计8月中旬全部更新完!

最近正在学