<!-- 新成立一个 animation.html (放在 dist 文件夹内里) --> <style> .box { width: 100px; height: 100px; background-color: aqua; } </style> <body> <div></div> <script src="https://www.jb51.net/article/main.js"></script> </body>
然后我们也不消 main.js 了，别的成立一个 animation-demo.js 来实现我们的动画挪用。这样我们就不需要和我们的 carousel 混搅在一起了。
// 在根目次成立一个 `animation-demo.js` import { Timeline, Animation } from './animation.js'; let tl = new Timeline(); tl.start(); tl.add( new Animation( { set a(a) { console.log(a); }, }, 'property', 0, 100, 1000, null ) );
因为我们修改了我们页面利用的 js 进口文件。所以这里我们需要去 webpack.config.js 把 entry 改为 animation-demo.js。
module.exports = { entry: './animation-demo.js', mode: 'development', devServer: { contentBase: './dist', }, module: { rules: [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'createElement' }]], }, }, }, ], }, };
今朝我们的 JavaScript 中是一个模仿的动画输出。接下来我们实验给动画可以哄骗一个元素的本领。
我们先给元素加一个 id="el"，利便我们在剧本中获取到这个元素。
<div></div>
然后我们就可以对这个原形进动作画的操纵了。首先我们需要回到 animation-demo.js，把 Animation 实例化的第一个参数改为 document.querySelector('#el').style。
然后第二个参数的属性就改为 "transform"。可是这里要留意，后头的开始时间和竣事时间是无法用于 transform 这个属性的。
所以我们需要有一个转换的 template（模版），通过利用这个模版来转换时间成 transform 对应的值。
这里的 template 值就直接写成一个函数：
v => `translate(${$v}px)`;
最后我们的代码就是这样的：
tl.add( new Animation( document.querySelector('#el').style, 'transform', 0, 100, 1000, 0, null, v => `translate(${v}px)` ) );
这部门调解好之后，我们需要去到 animation.js 中去做对应的调解。
首先是给 Animation 类的 constructor 插手 template 参数的吸收。与其他属性一样，在 constructor 中只是做一个存储的操纵。
然后在 Animation 中的 run 要领，在 this.object[this.property] 这内里的值就应该挪用 template 要领来生成属性值。而不是之前那样直接赋值给某一个属性了。
export class Animation { constructor( object, property, startValue, endValue, duration, delay, timingFunction, template ) { this.object = object; this.property = property; this.startValue = startValue; this.endValue = endValue; this.duration = duration; this.timingFunction = timingFunction; this.delay = delay; this.template = template; } run(time) { let range = this.endValue - this.startValue; this.object[this.property] = this.template( this.startValue + (range * time) / this.duration ); } }
最后结果如下：
我们发明，已经可以用我们的 Animation 库来节制元素的动画了。
首先我们来调解一下这些动画的参数，让开始到竣事位置改为 0 到 500，然后动画的时间长改为 2000 毫秒。这样的配置，有利于我们调试后头的成果。
tl.add( new Animation( document.querySelector('#el').style, 'transform', 0, 500, 2000, 0, null, v => `translate(${v}px)` ) );
好，接下来我们一起去加一个 Pause 按钮。
<body> <div></div> <button>Pause</button> <script src="https://www.jb51.net/article/main.js"></script> </body>
然后我们回到 animation-demo.js 内里去绑定这个元素。而且让他执行我们 Timeline 中的 pause 要领。
document.querySelector('#pause-btn').addEventListener( 'click', () => tl.pause() );
我们可以看到，此刻 pause 成果是可以的了，可是我们应该怎么去让这个动画继承播下去呢？也就是要实现一个 resume 的成果。
在实现这个 resume 成果的逻辑之前，我们先用同样的方法成立一个 resume 的按钮。而且让这个按钮挪用我们 Timeline 内里的 resume() 要领。