├── README.md ├── css ├── img │ ├── Go2.png │ ├── filename.gif │ └── screen.png └── style.css ├── index.html └── workLog.md /README.md: -------------------------------------------------------------------------------- 1 | https://cqxg.github.io/animation-editor/ 2 | This app for creating animations and drawings by CQXG. 3 | 4 | With this application, you can easily create a variety of animations from the simplest to very complex and save them in .png format as well as drawings as images. 5 | ![Alt text](http://images.vfl.ru/ii/1574019157/e38f8722/28595489.png) 6 | 7 | ![Alt text](http://images.vfl.ru/ii/1574090171/71d530d8/28604282.gif) 8 | 9 | -------------------------------------------------------------------------------- /css/img/Go2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cqxg/animation-editor/a0676b0952977668b571eb6c0da8f752f3269c5e/css/img/Go2.png -------------------------------------------------------------------------------- /css/img/filename.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cqxg/animation-editor/a0676b0952977668b571eb6c0da8f752f3269c5e/css/img/filename.gif -------------------------------------------------------------------------------- /css/img/screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cqxg/animation-editor/a0676b0952977668b571eb6c0da8f752f3269c5e/css/img/screen.png -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(0, 0, 0); 3 | } 4 | 5 | main { 6 | display: flex; 7 | flex-direction: row; 8 | min-height: calc(100vh - 100px); 9 | } 10 | 11 | .content { 12 | width: 70%; 13 | text-align: center; 14 | } 15 | 16 | .sub { 17 | font-size: 30px; 18 | border-radius: 5px; 19 | border: 1px solid rgb(0, 0, 0); 20 | background-color: rgb(255, 255, 255); 21 | } 22 | 23 | .sub, 24 | .desc, 25 | .img, 26 | .btn, 27 | .screen { 28 | margin: 15px 15px; 29 | } 30 | 31 | .screen_img { 32 | border-radius: 5px; 33 | border: 3px solid rgb(65, 65, 65); 34 | } 35 | 36 | .desc_text, 37 | .ex { 38 | font-size: 25px; 39 | border-radius: 5px; 40 | border: 1px solid rgb(50, 50, 50); 41 | background-color: rgb(255, 255, 255); 42 | } 43 | 44 | .content, 45 | .image, 46 | .img { 47 | margin: 5px 5px; 48 | border-radius: 5px; 49 | color: rgb(0, 0, 0); 50 | border: 3px solid rgb(55, 55, 55); 51 | background-color: rgb(170, 170, 170); 52 | } 53 | 54 | .image { 55 | display: flex; 56 | flex-direction: column; 57 | width: 30%; 58 | height: 450px; 59 | } 60 | 61 | .img { 62 | height: 450px; 63 | background-image: url('./img/filename.gif'); 64 | } 65 | 66 | h1, footer { 67 | font-size: 20px; 68 | border-radius: 5px; 69 | text-align: center; 70 | color: rgb(255, 255, 255); 71 | background-color: rgb(90, 90, 90); 72 | border: 3px solid rgb(55, 55, 55); 73 | } 74 | 75 | .cqxg { 76 | text-decoration: none; 77 | color: rgb(255, 255, 255); 78 | } 79 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Free online animation editor 10 | 11 | 12 | 13 | 14 |
15 |

Online animation editor

16 |
17 | 18 |
19 |
20 |
21 | This is a free online editor for animated sprites & art 22 |
23 | 24 | With this application, you can easily create a variety of animations 25 | from the simplest to very complex and save them in .png format as well as 26 | drawings as images. 27 | 28 |
29 | 30 |
31 |
32 | 33 | 34 | 35 |
36 |
37 |
38 |
39 | Create animations in your browser ! 40 |
41 |
42 |
43 |
44 |
45 | 46 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /workLog.md: -------------------------------------------------------------------------------- 1 | | Start time | End time | time spent | feature | 2 | |:----------:|:--------:|:----------:|:------------------------------------------------------------------------------------------------------------:| 3 | | Jun 23 | Jun 24 | 7h | The basic structure has been developed, HTML markup and CSS styles have been made. | 4 | | Jun 24 | Jun 25 | 5h | Developed webpack assembly and basic class structure. | 5 | | Jun 25 | Jun 26 | 12h | Add the ability to draw. And implemented the feature to add, copy, delete the frame. | 6 | | Jun 26 | Jun 27 | 12h | Add the ability to play and stop the animation, the feature to use fullscreen. Started work on the toolkit. | 7 | | Jun 27 | Jun 28 | 12h | Add tools: circle, rectangle, selection of pen size, eraser, color selection. | 8 | | Jun 28 | Jun 29 | 8h | Fixed / improved the work of many tools. Implemented paint-bucket, fill-background tool. | 9 | | Jun 29 | Jun 30 | 14h | Fix fill-background tool. Add transformation tools. Implemented landing-page. | 10 | | Jun 30 | Jun 30 | 8h | ------------------------------------------------------------------------------?? | --------------------------------------------------------------------------------