├── .gitignore ├── 404.jade ├── README.html ├── README.md ├── _layout.jade ├── compare └── three.png ├── data ├── fututhreeyear-data-three.png └── fututhreeyear-data-year.png ├── examples ├── fututhreeyear.html └── macnnscreen.html ├── export-data-png.html ├── images ├── fututhreeyear │ ├── three-final.png │ └── year-final.png ├── macnnscreen │ ├── mac-final.png │ └── mac-init.png ├── macscreen │ ├── 0.png │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 16.png │ ├── 17.png │ ├── 18.png │ ├── 19.png │ ├── 2.png │ ├── 20.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── 9.png │ └── reset20.png ├── phonescreen │ └── phone-cover.png ├── three │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 16.png │ ├── 17.png │ ├── 18.png │ ├── 19.png │ ├── 2.png │ ├── 20.png │ ├── 21.png │ ├── 22.png │ ├── 23.png │ ├── 24.png │ ├── 25.png │ ├── 26.png │ ├── 27.png │ ├── 28.png │ ├── 29.png │ ├── 3.png │ ├── 30.png │ ├── 31.png │ ├── 32.png │ ├── 33.png │ ├── 34.png │ ├── 35.png │ ├── 36.png │ ├── 37.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── 9.png │ └── final.png └── year │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 16.png │ ├── 17.png │ ├── 18.png │ ├── 19.png │ ├── 2.png │ ├── 20.png │ ├── 21.png │ ├── 22.png │ ├── 23.png │ ├── 24.png │ ├── 25.png │ ├── 26.png │ ├── 27.png │ ├── 28.png │ ├── 29.png │ ├── 3.png │ ├── 30.png │ ├── 31.png │ ├── 32.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ └── 9.png ├── import-data-png.html ├── index.jade ├── js ├── futunnscreen-compute.js ├── fututhreeyear-compute.js ├── fututhreeyear-data.js └── macnnscreen-data.js ├── main.less ├── package.json └── tool.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | -------------------------------------------------------------------------------- /404.jade: -------------------------------------------------------------------------------- 1 | h1 404 2 | h3 Whoops. Looks like what you're looking for can't be found. -------------------------------------------------------------------------------- /README.html: -------------------------------------------------------------------------------- 1 | README

PxDiffFrameAnimation

1018 |

© Young 2015-12-07 15:27

1019 |

Welcome to My GitHub

1020 |

How To Use

1021 | 1027 |

Overview

1028 | 1034 |

Examples

1035 | 1038 |
1039 |

The url is to test PxDiffFrameAnimation.Sometimes if you spent a lot of time to visit the link maybe there is a problem when the client loads images.Please refresh your web application if you meet this problem.And you can not visit this link by using a mobile phone because it can canuse a memory problem.I will solve the memory problem soon please be patient.

1040 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PxDiffFrameAnimation 2 | 3 | © Young 2015-12-07 15:27 4 | 5 | Welcome to My [GitHub](https://github.com/newbieYoung) 6 | 7 | ### How To Use 8 | 9 | + run `npm install -g harp` command in your system. 10 | + run `npm install` command in the root path of this project. 11 | + run `harp server` command in the root path of this project. 12 | + visit urls to see the example or visit url `http://localhost:9000/tool.html` to use the tool. 13 | 14 | ### Overview 15 | 16 | + The file which is named `tool.html` is a tool to get the data. 17 | + The catalog which is named `examples` contains many frame animations developed by this technology. 18 | + The catalog which is named `images` contains many images which are used in the examples. 19 | + The catalog which is named `js` contains many javascript codes. -------------------------------------------------------------------------------- /_layout.jade: -------------------------------------------------------------------------------- 1 | doctype 2 | html 3 | head 4 | link(rel="stylesheet" href="/main.css") 5 | body 6 | != yield -------------------------------------------------------------------------------- /compare/three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/compare/three.png -------------------------------------------------------------------------------- /data/fututhreeyear-data-three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/data/fututhreeyear-data-three.png -------------------------------------------------------------------------------- /data/fututhreeyear-data-year.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/data/fututhreeyear-data-year.png -------------------------------------------------------------------------------- /examples/fututhreeyear.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 富途三周年动画 6 | 21 | 22 | 23 | 24 | 25 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /examples/macnnscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 富途牛牛演示操作 6 | 7 | 21 | 22 | 23 |
24 | 25 |
26 | 108 | 109 | -------------------------------------------------------------------------------- /export-data-png.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 导出数据图片 6 | 7 | 8 | 9 | 39 | 40 | -------------------------------------------------------------------------------- /images/fututhreeyear/three-final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/fututhreeyear/three-final.png -------------------------------------------------------------------------------- /images/fututhreeyear/year-final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/fututhreeyear/year-final.png -------------------------------------------------------------------------------- /images/macnnscreen/mac-final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macnnscreen/mac-final.png -------------------------------------------------------------------------------- /images/macnnscreen/mac-init.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macnnscreen/mac-init.png -------------------------------------------------------------------------------- /images/macscreen/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/0.png -------------------------------------------------------------------------------- /images/macscreen/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/1.png -------------------------------------------------------------------------------- /images/macscreen/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/10.png -------------------------------------------------------------------------------- /images/macscreen/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/11.png -------------------------------------------------------------------------------- /images/macscreen/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/12.png -------------------------------------------------------------------------------- /images/macscreen/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/13.png -------------------------------------------------------------------------------- /images/macscreen/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/14.png -------------------------------------------------------------------------------- /images/macscreen/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/15.png -------------------------------------------------------------------------------- /images/macscreen/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/16.png -------------------------------------------------------------------------------- /images/macscreen/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/17.png -------------------------------------------------------------------------------- /images/macscreen/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/18.png -------------------------------------------------------------------------------- /images/macscreen/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/19.png -------------------------------------------------------------------------------- /images/macscreen/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/2.png -------------------------------------------------------------------------------- /images/macscreen/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/20.png -------------------------------------------------------------------------------- /images/macscreen/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/3.png -------------------------------------------------------------------------------- /images/macscreen/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/4.png -------------------------------------------------------------------------------- /images/macscreen/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/5.png -------------------------------------------------------------------------------- /images/macscreen/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/6.png -------------------------------------------------------------------------------- /images/macscreen/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/7.png -------------------------------------------------------------------------------- /images/macscreen/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/8.png -------------------------------------------------------------------------------- /images/macscreen/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/9.png -------------------------------------------------------------------------------- /images/macscreen/reset20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/macscreen/reset20.png -------------------------------------------------------------------------------- /images/phonescreen/phone-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/phonescreen/phone-cover.png -------------------------------------------------------------------------------- /images/three/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/1.png -------------------------------------------------------------------------------- /images/three/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/10.png -------------------------------------------------------------------------------- /images/three/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/11.png -------------------------------------------------------------------------------- /images/three/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/12.png -------------------------------------------------------------------------------- /images/three/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/13.png -------------------------------------------------------------------------------- /images/three/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/14.png -------------------------------------------------------------------------------- /images/three/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/15.png -------------------------------------------------------------------------------- /images/three/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/16.png -------------------------------------------------------------------------------- /images/three/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/17.png -------------------------------------------------------------------------------- /images/three/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/18.png -------------------------------------------------------------------------------- /images/three/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/19.png -------------------------------------------------------------------------------- /images/three/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/2.png -------------------------------------------------------------------------------- /images/three/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/20.png -------------------------------------------------------------------------------- /images/three/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/21.png -------------------------------------------------------------------------------- /images/three/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/22.png -------------------------------------------------------------------------------- /images/three/23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/23.png -------------------------------------------------------------------------------- /images/three/24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/24.png -------------------------------------------------------------------------------- /images/three/25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/25.png -------------------------------------------------------------------------------- /images/three/26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/26.png -------------------------------------------------------------------------------- /images/three/27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/27.png -------------------------------------------------------------------------------- /images/three/28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/28.png -------------------------------------------------------------------------------- /images/three/29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/29.png -------------------------------------------------------------------------------- /images/three/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/3.png -------------------------------------------------------------------------------- /images/three/30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/30.png -------------------------------------------------------------------------------- /images/three/31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/31.png -------------------------------------------------------------------------------- /images/three/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/32.png -------------------------------------------------------------------------------- /images/three/33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/33.png -------------------------------------------------------------------------------- /images/three/34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/34.png -------------------------------------------------------------------------------- /images/three/35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/35.png -------------------------------------------------------------------------------- /images/three/36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/36.png -------------------------------------------------------------------------------- /images/three/37.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/37.png -------------------------------------------------------------------------------- /images/three/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/4.png -------------------------------------------------------------------------------- /images/three/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/5.png -------------------------------------------------------------------------------- /images/three/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/6.png -------------------------------------------------------------------------------- /images/three/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/7.png -------------------------------------------------------------------------------- /images/three/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/8.png -------------------------------------------------------------------------------- /images/three/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/9.png -------------------------------------------------------------------------------- /images/three/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/three/final.png -------------------------------------------------------------------------------- /images/year/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/1.png -------------------------------------------------------------------------------- /images/year/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/10.png -------------------------------------------------------------------------------- /images/year/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/11.png -------------------------------------------------------------------------------- /images/year/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/12.png -------------------------------------------------------------------------------- /images/year/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/13.png -------------------------------------------------------------------------------- /images/year/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/14.png -------------------------------------------------------------------------------- /images/year/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/15.png -------------------------------------------------------------------------------- /images/year/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/16.png -------------------------------------------------------------------------------- /images/year/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/17.png -------------------------------------------------------------------------------- /images/year/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/18.png -------------------------------------------------------------------------------- /images/year/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/19.png -------------------------------------------------------------------------------- /images/year/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/2.png -------------------------------------------------------------------------------- /images/year/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/20.png -------------------------------------------------------------------------------- /images/year/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/21.png -------------------------------------------------------------------------------- /images/year/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/22.png -------------------------------------------------------------------------------- /images/year/23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/23.png -------------------------------------------------------------------------------- /images/year/24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/24.png -------------------------------------------------------------------------------- /images/year/25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/25.png -------------------------------------------------------------------------------- /images/year/26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/26.png -------------------------------------------------------------------------------- /images/year/27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/27.png -------------------------------------------------------------------------------- /images/year/28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/28.png -------------------------------------------------------------------------------- /images/year/29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/29.png -------------------------------------------------------------------------------- /images/year/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/3.png -------------------------------------------------------------------------------- /images/year/30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/30.png -------------------------------------------------------------------------------- /images/year/31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/31.png -------------------------------------------------------------------------------- /images/year/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/32.png -------------------------------------------------------------------------------- /images/year/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/4.png -------------------------------------------------------------------------------- /images/year/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/5.png -------------------------------------------------------------------------------- /images/year/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/6.png -------------------------------------------------------------------------------- /images/year/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/7.png -------------------------------------------------------------------------------- /images/year/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/8.png -------------------------------------------------------------------------------- /images/year/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbieYoung/PxDiffFrameAnimation/eb3dc2cf57ddf8d5746539b73cd1b39f634339f9/images/year/9.png -------------------------------------------------------------------------------- /import-data-png.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 导入数据图片 6 | 7 | 8 | 42 | 43 | -------------------------------------------------------------------------------- /index.jade: -------------------------------------------------------------------------------- 1 | h1 Welcome to Harp. 2 | h3 This is yours to own. Enjoy. -------------------------------------------------------------------------------- /js/futunnscreen-compute.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 双向链表 3 | * 由于WebWorker脚本独立于其它脚本所以双向链表结构代码不能通过其它方式引入 4 | * young 2015/11/04 5 | */ 6 | function DoublyLinkedList() { 7 | this.length = 0; 8 | this.head = null; //头指针 9 | this.end = null; //尾指针 10 | /** 11 | * 为了实现像素差逐帧动画优化递增或者递减查找 12 | * 有时候会进行一些有规律的递增或者递减的查找操作,在进行这些有规律的递增或递减查找操作时如果能从上一次的位置开始操作,效率会更高 13 | */ 14 | this.memory = { 15 | pointer:null, 16 | no:null 17 | }; 18 | } 19 | //加入节点 20 | DoublyLinkedList.prototype.push = function(value) { 21 | //如果头指针为空,则当前节点既是头部节点也是尾部节点 22 | if (!this.head) { 23 | this.head = { 24 | value: value, 25 | previous: null, 26 | next: null 27 | }; 28 | this.end = this.head; 29 | } else { 30 | var node = { 31 | value:value, 32 | previous:this.end,//当前节点的前指针指向尾部节点 33 | next:null 34 | } 35 | this.end.next = node;//尾部节点的后指针指向当前节点 36 | this.end = node;//尾指针指向当前节点 37 | } 38 | this.length++; 39 | }; 40 | //返回元素个数 41 | DoublyLinkedList.prototype.size = function(){ 42 | return this.length; 43 | }; 44 | //判断是否为空 45 | DoublyLinkedList.prototype.isEmpty = function(){ 46 | return this.length === 0; 47 | }; 48 | /** 49 | * 获得某个位置的节点 50 | * @param {[type]} index [位置] 51 | * @param {[type]} memory [是否采用记忆查找] 52 | */ 53 | DoublyLinkedList.prototype.get = function(index,memory){ 54 | var node; 55 | var i; 56 | if(index<0||index>=this.length){ 57 | node = null; 58 | }else{ 59 | if(memory&&this.memory.pointer){//进行一些有规律的递增或者递减的查找操作 60 | node = this.memory.pointer; 61 | if(indexindex;i--){ 63 | node = node.previous; 64 | } 65 | }else if(index>this.memory.no){ 66 | for(i=this.memory.no;iindex;i--){ 81 | node = node.previous; 82 | } 83 | } 84 | } 85 | this.memory.pointer = node;//更新记录信息 86 | this.memory.no = index; 87 | } 88 | return node; 89 | }; 90 | //获得第一个节点 91 | DoublyLinkedList.prototype.getHead = function(){ 92 | return this.get(0); 93 | }; 94 | //获得最后一个节点 95 | DoublyLinkedList.prototype.getEnd = function(){ 96 | return this.get(this.length-1); 97 | }; 98 | /** 99 | * 将某个节点插入到index位置之前 100 | * @param {[type]} index [位置] 101 | * @param {[type]} value [值] 102 | * @param {[type]} memory [是否采用记忆查找] 103 | */ 104 | DoublyLinkedList.prototype.insert = function(index,value,memory){ 105 | var node = { 106 | value: value, 107 | previous: null, 108 | next: null 109 | }; 110 | var indexNode; 111 | if(index<0||index>=this.length){ 112 | node = null 113 | }else{ 114 | if(index===0){ 115 | node.next = this.head; 116 | this.head = node; 117 | }else{ 118 | indexNode = this.get(index,memory); 119 | node.next = indexNode; 120 | node.previous = indexNode.previous; 121 | indexNode.previous.next = node; 122 | indexNode.previous = node; 123 | this.memory.pointer = node;//更新记忆信息 124 | this.memory.no = index; 125 | } 126 | this.length++; 127 | } 128 | return node; 129 | }; 130 | /** 131 | * 删除某个位置的节点 132 | * @param {[type]} index [位置] 133 | * @param {[type]} memory [是否采用记忆查找] 134 | */ 135 | DoublyLinkedList.prototype.del = function(index,memory){ 136 | var node; 137 | if(index<0||index>=this.length){ 138 | node = null; 139 | }else{ 140 | node = this.get(index,memory); 141 | if(node){ 142 | var pre = node.previous; 143 | var next = node.next; 144 | if(!pre&&!next){//前指针和后指针都不存在,即清空链表 145 | this.head = null; 146 | this.end = null; 147 | this.memory.pointer = null; 148 | this.memory.no = null; 149 | }else if(pre&&!next){//存在前指针不存在后指针,即删除尾部节点 150 | node.previous = null; 151 | pre.next = null; 152 | this.end = pre; 153 | if(memory){ 154 | this.memory.pointer = this.end; 155 | this.memory.no = index-1; 156 | } 157 | }else if(!pre&&next){//不存在前指针存在后指针,即删除头部节点 158 | node.next = null; 159 | next.previous = null; 160 | this.head = next; 161 | if(memory){ 162 | this.memory.pointer = this.head; 163 | this.memory.no = index; 164 | } 165 | }else{ 166 | node.previous = null; 167 | node.next = null; 168 | pre.next = next; 169 | next.previous = pre; 170 | if(memory){ 171 | this.memory.pointer = next; 172 | this.memory.no = index; 173 | } 174 | } 175 | this.length--; 176 | } 177 | } 178 | return node; 179 | }; 180 | //监听主线程 181 | onmessage = function(e) { 182 | var resource = e.data; 183 | var emptyImageData = resource.emptyImageData; 184 | var imageData = resource.imageData; 185 | var pxImageData = resource.pxImageData; 186 | var position = resource.position; 187 | var fillLength = resource.fillLength; 188 | //还原 189 | var dataList = new DoublyLinkedList(); 190 | for(var j=0;j=0;j=j-2){ 213 | var start = position[j]; 214 | var space = position[j+1]; 215 | dataList.insert(start,new Array(space),true); 216 | } 217 | var node = dataList.getHead(); 218 | var no = 0; 219 | while(node.next){ 220 | if(node.value&&!(node.value instanceof Array)){ 221 | if(imageData.data[no]===node.value){ 222 | imageData.data[no] = 0; 223 | }else{ 224 | imageData.data[no] = node.value; 225 | } 226 | } 227 | if(node.value instanceof Array){ 228 | no+=node.value.length; 229 | }else{ 230 | no++; 231 | } 232 | node = node.next; 233 | } 234 | for(var j=0;j=this.length){ 57 | node = null; 58 | }else{ 59 | if(memory&&this.memory.pointer){//进行一些有规律的递增或者递减的查找操作 60 | node = this.memory.pointer; 61 | if(indexindex;i--){ 63 | node = node.previous; 64 | } 65 | }else if(index>this.memory.no){ 66 | for(i=this.memory.no;iindex;i--){ 81 | node = node.previous; 82 | } 83 | } 84 | } 85 | this.memory.pointer = node;//更新记录信息 86 | this.memory.no = index; 87 | } 88 | return node; 89 | }; 90 | //获得第一个节点 91 | DoublyLinkedList.prototype.getHead = function(){ 92 | return this.get(0); 93 | }; 94 | //获得最后一个节点 95 | DoublyLinkedList.prototype.getEnd = function(){ 96 | return this.get(this.length-1); 97 | }; 98 | /** 99 | * 将某个节点插入到index位置之前 100 | * @param {[type]} index [位置] 101 | * @param {[type]} value [值] 102 | * @param {[type]} memory [是否采用记忆查找] 103 | */ 104 | DoublyLinkedList.prototype.insert = function(index,value,memory){ 105 | var node = { 106 | value: value, 107 | previous: null, 108 | next: null 109 | }; 110 | var indexNode; 111 | if(index<0||index>=this.length){ 112 | node = null 113 | }else{ 114 | if(index===0){ 115 | node.next = this.head; 116 | this.head = node; 117 | }else{ 118 | indexNode = this.get(index,memory); 119 | node.next = indexNode; 120 | node.previous = indexNode.previous; 121 | indexNode.previous.next = node; 122 | indexNode.previous = node; 123 | this.memory.pointer = node;//更新记忆信息 124 | this.memory.no = index; 125 | } 126 | this.length++; 127 | } 128 | return node; 129 | }; 130 | /** 131 | * 删除某个位置的节点 132 | * @param {[type]} index [位置] 133 | * @param {[type]} memory [是否采用记忆查找] 134 | */ 135 | DoublyLinkedList.prototype.del = function(index,memory){ 136 | var node; 137 | if(index<0||index>=this.length){ 138 | node = null; 139 | }else{ 140 | node = this.get(index,memory); 141 | if(node){ 142 | var pre = node.previous; 143 | var next = node.next; 144 | if(!pre&&!next){//前指针和后指针都不存在,即清空链表 145 | this.head = null; 146 | this.end = null; 147 | this.memory.pointer = null; 148 | this.memory.no = null; 149 | }else if(pre&&!next){//存在前指针不存在后指针,即删除尾部节点 150 | node.previous = null; 151 | pre.next = null; 152 | this.end = pre; 153 | if(memory){ 154 | this.memory.pointer = this.end; 155 | this.memory.no = index-1; 156 | } 157 | }else if(!pre&&next){//不存在前指针存在后指针,即删除头部节点 158 | node.next = null; 159 | next.previous = null; 160 | this.head = next; 161 | if(memory){ 162 | this.memory.pointer = this.head; 163 | this.memory.no = index; 164 | } 165 | }else{ 166 | node.previous = null; 167 | node.next = null; 168 | pre.next = next; 169 | next.previous = pre; 170 | if(memory){ 171 | this.memory.pointer = next; 172 | this.memory.no = index; 173 | } 174 | } 175 | this.length--; 176 | } 177 | } 178 | return node; 179 | }; 180 | //监听主线程 181 | onmessage = function(e) { 182 | var resource = e.data; 183 | var startNo = resource.startNo;//开始帧序号 184 | var imageData = resource.imageData; 185 | var data = resource.data; 186 | var position = resource.position; 187 | var fillLength = resource.fillLength; 188 | var initImageData = resource.initImageData; 189 | var length = resource.length; 190 | var result = {//返回给主线程数据 191 | startNo:startNo, 192 | imageData:imageData 193 | }; 194 | for(var i=0;i=0;j=j-2){ 222 | var start = itemPosition[j]; 223 | var space = itemPosition[j+1]; 224 | dataList.insert(start,new Array(space),true); 225 | } 226 | var node = dataList.getHead(); 227 | var no = 0; 228 | while(node.next){ 229 | if(node.value&&!(node.value instanceof Array)){ 230 | if(initImageData.data[no]===node.value){ 231 | initImageData.data[no] = 0; 232 | }else{ 233 | initImageData.data[no] = node.value; 234 | } 235 | } 236 | if(node.value instanceof Array){ 237 | no+=node.value.length; 238 | }else{ 239 | no++; 240 | } 241 | node = node.next; 242 | } 243 | for(var j=0;j 2 | 3 | 4 | 5 | 像素差逐帧动画工具 6 | 7 | 25 | 26 | 27 |
28 | 颜色误差值:
29 | 截取最小长度:
30 | 此次计算的无损还原图填充255后的长度:
31 | 位置信息:
32 | 位置信息数组长度:
33 | 像素差图片高度:
34 | 前后帧相同颜色值数量:
35 | 存在数据丢失颜色值数量:(使用putImageData显示像素数据然后再使用getImageData获取像素数据会发现前后像素数据有丢失)
36 | 填充255alpha值后的像素差数据长度:
37 | 无损还原图数据丢失位数:
38 | 39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 |
47 |
48 | 495 | 496 | 497 | --------------------------------------------------------------------------------