手记

《原生 JS 实现帧动画库》(第一章知识点小结)

1.什么是帧动画

  • 所谓帧动画就是在"连续的关键帧"中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。
  • 由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容。

2.常见的帧动画方式:

  • GIF、CSS3 animation、 Javascript

3.GIF和CSS3 animation实现帧动画的不足

  • 不能灵活的控制动画的暂停和播放。(GIF、CSS3 animation)
  • 不能捕捉到动画完成的事件。(GIF)
  • 不能对帧动画做更加灵活的扩展。(GIF、CSS3 animation)

4.JS实现帧动画的原理

  • 如果有多张帧图片,用一个image标签区承载图片,定时改变image的src属性(不推荐,多个http请求)。
  • 把所有动画关键帧绘制在一张图片里,把图片作为元素的background-image,定时改变元素的background-position属性(推荐)。

5.设计一个通用的帧动画库

  • 需求分析
  • 编程接口
  • 调用方式
  • 代码设计

6.设计一个通用的帧动画库(需求分析)

  • 支持图片预加载
  • 支持2中动画播放方式,及自定义每帧动画
  • 支持单组动画控制循环次数(可支持无限次)。
  • 支持一组动画完成,进行下一组动画。
  • 支持每个动画完成后有等待时间。
  • 支持动画暂停和继续播放
  • 支持动画完成后执行回调函数

7.设计一个通用的帧动画库(编程接口)

  • loadImage(imglist) //预加载图片
  • changePosition(ele,positions,imageUrl) //通过改变元素的backgroun-position实现动画
  • changeSrc(ele,imglist) //通过改变image元素的src
  • enterFrame(callback) //每一帧动画执行的函数,相当于用户可以自定义,每一帧动画的callback
  • repeat(times) //动画重复执行的次数,times为空时表示无限次
  • repeatForever() //无限重复上一次动画,相当于repeat(),更友好的一个接口吧
  • wait(time) //每个动画执行完成等待的时间
  • then(callback) //动画执行完成后的回调函数
  • start(interval) //动画开始执行,interval表示动画执行的间隔
  • pause() //动画暂停
  • restart() //动画从上一次暂停处重新执行
  • dispose() //释放资源

8.设计一个通用的帧动画库(调用方式)

  • 支持链式调用,我们期望动词的方式描述接口,调用方式如下:
var animation=require("animation");
    var demoAnimation=animation()
                        .loadImage(images)
                        .changePosition(ele,positions)
                        .repeat(2)
                        .then(function(){
                            //动画执行完成后调用此函数
                        });
    demoAnimation.start(80)

9设计一个通用的帧动画库(代码设计)

  • 我们把"图片预加载-> 动画执行 ->动画结束" 等一系列操作看出一条任务链(数组)。
  • 任务链有两种类型的任务:
    • a.同步执行完毕的。
    • b.异步定时执行的(通过计时器或者raf)。
  • 记录当前任务链的索引。
  • 每个任务执行完毕后,通过调用next方法,执行下一个任务,同时更新任务链索引值。
2人推荐
随时随地看视频
慕课网APP