基于动画的图片预加载技术的可复用的对象

基于动画的图片预加载

1. 效果图实例：https://hswlian.github.io/JavaScript-blog/练习-js实现动画（组件化）/house.html 。
2. 为了使动画不卡顿，使用了图片预加载技术。
3. 暴露出动画的运动速度、动画容器的属性和属性值、图片资源的数组，以供下次的复用。

---

用法示例

1. 引入js文件：https://github.com/hswlian/JavaScript-blog/blob/master/%E7%BB%83%E4%B9%A0-js%E5%AE%9E%E7%8E%B0%E5%8A%A8%E7%94%BB%EF%BC%88%E7%BB%84%E4%BB%B6%E5%8C%96%EF%BC%89/moveHouse.js
2. 在html文件中创建容器。

 <img class="house" src="img/house1.png"/>

1. 在文件中添加js代码。

    (function(){
//新建动画资源的数组
      let imgArr = [];
      for(let i = 1;i <= 12;i++){
        imgArr[i-1] = 'img/house'+i+'.png';
      }

//创建名为move的预加载对象
      let move = new MoveHouse({
        domType : 'class',//html中容器属性类型
        bdbox : 'house',//容器属性对应的值
        //autoplay : false,
        speed : 100,//运动的速度
        imageArr : imgArr//动画资源的数组
      });
    })();

转载于:https://www.cnblogs.com/huasw/articles/8525341.html