使用JavaScript 实现时间轴与动画效果的示例代码(7)

<!-- 新建立一个 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 实现时间轴与动画效果的示例代码

目前我们的 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 ); } }

最后效果如下:

使用JavaScript 实现时间轴与动画效果的示例代码

我们发现,已经可以用我们的 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() );

使用JavaScript 实现时间轴与动画效果的示例代码

我们可以看到,现在 pause 功能是可以的了,但是我们应该怎么去让这个动画继续播下去呢?也就是要实现一个 resume 的功能。

在实现这个 resume 功能的逻辑之前,我们先用同样的方式建立一个 resume 的按钮。并且让这个按钮调用我们 Timeline 里面的 resume() 方法。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsdgjx.html