preface

This isn’t webpack updated again…

The development of the front end can be described as unusually fast, each big framework emerge in endlessly, every time there is a new framework, or the old framework upgrade, the comment area is always howling, learn not to move, really learn not to move.

If you can’t learn, have some fun and relax

matrixChange

I have always wanted to write an animation completely completed by myself. I finally finished typescript rewriting and improved the DEMO some time ago. Let’s see how the animation works first

You can see how different animations work together here, and you can see the actual coding on JsFiddle.

use

The browser

<script src="https://cdn.jsdelivr.net/npm/matrixchange/dist/matrixChange.js"></script>
Copy the code

npm or yarn

npm install matrixchange --save
yarn add matrixchange
Copy the code

code

import {makeMatrixChange, mode} from 'matrixchange'

let app = document.getElementById('app')
let urls = [
  'http://bgcdn.acohome.cn/100965.jpg'.'http://bgcdn.acohome.cn/1501505.jpg'.'http://bgcdn.acohome.cn/1501655.jpg'
];

This method returns an object
let move = makeMatrixChange(app, {
  images: urls,
  row: 7.col: 9
})

// Use the 0th motion mode, and the default animation effect
move.movePoint(mode[0])

Test {transfrom:scale(0); transfrom:scale(0); }
move.movePoint(mode[0] and {className: 'test'
})

// Use the zeroth motion mode and animation, such as with animation.css
// Animation needs to provide two class names, entry animation and exit animation. It also needs to mark this as an animation
move.movePoint(mode[0] and {animate: true.classNameIn: 'animated flipInX'.classNameOut: 'animated flipOutX'
})

// Animate with a specific image
// If no image is passed, a random image from the passed image list is fetched
move.movePoint(mode[0] and {animate: true.classNameIn: 'animated flipInX'.classNameOut: 'animated flipOutX'.image: urls[0]})Copy the code

The Matrixchange library has only one method and one array

  • makeMatrixChangeUsed to generate the matrix, call the return objectmovePointMethod allows the resulting matrix to move
  • modeIs an array of columns of the motion form, and the motion form ismovePointThe first argument to the method.

The second parameter to movePoint is defined as follows

typeoption = { className? :stringanimate? :booleanclassNameIn? :stringclassNameOut? :stringimage? :string
}
Copy the code

Talk about the heart

This project was completed in my spare time, from simple browser executable code at the beginning to ES6 modular approach, and finally to the current typescript version, which can be said to follow the trend of front-end development, and also have some understanding of writing projects in typescript.

Although the code refactoring took a lot of time, the structure and code composition of the project became more perfect and clear. In general, the following improvements were made

  • Style byjsGenerate, not reference separatelyscss/cssThe cost of using the library is further reduced
  • Implementation is based onanimationThe animation, combinedanimation.cssFurther reduce development costs
  • Separate the motion form and abstract it into an object that provides some data and check methods
  • To achieve the15Type of motion
  • Implement a simple event to further decouple the code
  • Use events to expose phases of program execution to facilitate injection of functions
  • usetypescriptDefine types to avoid unnecessary errors in development

The last

If you like, welcome to my Github to click a star, thanks ~~

There are only 15 forms of movement currently implemented, and Pull Request is welcome if there are other forms of movement.

Of course, if you want to learn about typescript but can’t find the right project to practice on, consider forking out the project for research. Since the code isn’t that large, it shouldn’t seem like much effort.