脚本宝典收集整理的这篇文章主要介绍了学不动了,来点有趣的吧,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
这不 webpack
又升级了。。。
前端的发展可谓是异常的迅速,各大框架层出不穷,每当有新框架出现,或是老框架升级,评论区总是哀嚎遍野,学不动了,真的学不动了。
学不动了,那就来点有趣的~~
matrixChange
本着折腾的性格,一直想写一个完全由我个人完成的动画,终于在前段时间完成了 tyPEscript
的重写,并完善了 DEMO
,先看看动画效果如何
可以在这里查看不同动画组合成的效果,也可以在jsfiddle上查看具体的代码编写。
使用
浏览器
<script src="https://cdn.jsdelivr.net/npm/matrixchange/dist/matrixChange.js"></script>
npm or yarn
npm install matrixchange --save
yarn add matrixchange
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'
];
// 该方法返回一个对象
let move = makeMatrixChange(app, {
images: urls,
row: 7,
col: 9
})
// 使用第 0 种运动方式,和默认的动画效果
move.movePoint(mode[0])
// 使用第 0 种运动方式,和 transition 过渡,提供类名即可,eg: .test{transfrom:scale(0);}
move.movePoint(mode[0], {
classname: 'test'
})
// 使用第 0 种运动方式,和 animation 动画,比如配合 animation.css 动画库
// animation 需要提供两个类名,进场动画和出场动画,同时需要标记这个是 animation 动画
move.movePoint(mode[0], {
aniMATE: true,
classNamein: 'animated flipInX',
classNameOut: 'animated flIPOutX'
})
// 使用特定的图片进行动画
// 不传 image 则随机取传入的图片列表中的一张图片
move.movePoint(mode[0], {
animate: true,
classNameIn: 'animated flipInX',
classNameOut: 'animated flipOutX',
image: urls[0]
})
matrixchange
库只拥有一个方法和一个数组
movePoint
的第二个参数具体定义如下
type option = {
className?: string
animate?: boolean
classNameIn?: string
classNameOut?: string
image?: string
}
谈谈心得
该项目在业余时间完成,由最开始的单纯浏览器可执行代码到 ES6
的模块化方式,最终到现在的 typescript
版本,可以说是顺应了前端的发展潮流,也对使用 typescript
编写项目有了一定的了解。
代码重构虽然耗费了大量的时间,但是项目的结构和代码组成也更加的完美和清晰,总的来说做了如下改进
- 样式通过
js
生成,而不在单独引用 scss/css
文件,使用该库的成本进一步降低
- 实现基于
animation
的动画,结合 animation.css
进一步降低开发成本
- 将运动形式独立出去,抽象成一个对象,该对象提供一些数据和检查方法
- 实现了
15
种运动形式
- 实现简单的事件机制,将代码进一步解耦
- 使用事件暴露程序执行过程中的一些阶段,方便注入函数
- 使用
typescript
定义类型,避免开发中的一些不必要的错误
最后
喜欢的话,欢迎大家到我的 github点个 star
,感谢~~
目前实现的运动形式只有 15
种,如果有其他的运动形式也欢迎 Pull request
。
当然如果你想了解 typescript
但又找不到合适的项目练手,可以考虑把该项目 fork
一份用于研究,由于代码量不是很大,看起来应该也不会费劲。
以上是脚本宝典为你收集整理的学不动了,来点有趣的吧全部内容,希望文章能够帮你解决学不动了,来点有趣的吧所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。