简单的JavaScript动画框架

分享于 

6分钟阅读

Web开发

  繁體 雙語

介绍

本文将介绍我在JavaScript中开发的一个非常简单的动画框架。

Background

有时候是一些小事情在网站上造成了差异。 内容淡入和淡出的方式或者放置占位符的方式。

我一直在接触到我的网页中的一个,发现如果没有正确地完成,它会很烦琐和缓慢。 关键是不要让每个动画处理自己的渲染。

在动画更新自己的控件时,如果启动 3动画,动画的更新间隔为每秒 24帧,则浏览器将以每秒次重新绘制次动画。

关键是集中控制重绘,所以即使使用 100动画,每秒只有 24次重绘。

前提条件

动画框架构建在我开发的其他框架之上。 在实现动画框架之前,你必须实现以下框架:

代码

下面是动画框架。 一个实现示例将如下所示:

var uiAnimation = function(target, propertyName, from, to, valueSuffix, duration) {
 this.Target = typeof target == 'object'? target : document.getElementById('target').style;
 this.PropertyName = propertyName;
 this.From = parseInt(from, 10);
 this.To = parseInt(to, 10);
 this.ValueSuffix = valueSuffix;
 this.Duration = parseInt(duration, 10);
 this.FrameValues = new Array();
 this.CurrentFrame = 0;
 this.LastFrame = 0;
 this.Complete = new uiEvent();
 var step = (to - from)/duration;
 var cur = from + step;
 var cFrame = 0;
 var dir = to <from? 'down' : 'up';
 while ((dir == 'down' && cur> to) || (dir == 'up' && cur <to)) {
 this.FrameValues[this.FrameValues.length] = this.ValueSuffix.replace('@@', cur);
 this.LastFrame = cFrame;
 cFrame++;
 cur += step;
 }
 this.FrameValues[this.FrameValues.length - 1] = this.ValueSuffix.replace('@@', this.To);
}var uiAnimationHandler = function() {
 this.Timer = new uiTimer(1000/24);
 this.Animations = new Array();
 this.Frame = 0;
 this.NextFrame = function() {
 for (var x = 0; x <this.Animations.length; x++) {
 var a = this.Animations[x];
 if (a!= null) {
 if (a.CurrentFrame <= a.LastFrame) {
 if (a.FrameValues[a.CurrentFrame]!= null) {
 a.Target[a.PropertyName] = a.FrameValues[a.CurrentFrame];
 a.CurrentFrame++;
 if (a.CurrentFrame> a.LastFrame) {
 this.Animations[x].Complete.Fire();
 this.Animations[x] = null;
 }
 }
 }
 }
 }
 };
 this.Timer.OnTick.Register(this.NextFrame, this);
 this.Register = function(ani) { this.Animations[this.Animations.length] = ani; };
}var AnimationManager = new uiAnimationHandler();

中央动画处理程序的类型为 uiAnimationHandler。 一个实例被声明为 AnimationManager

单个动画的类型为 uiAnimation,它具有以下构造函数:

uiAnimation(targetObject, 'property', from, to, 'valueString', frameCount)
  • targetObject: 这是包含要进行动画处理的属性的对象。 在大多数情况下,这将是元素的样式对象。
  • property: 这是目标对象上的属性,要进行动画处理。
  • from: 动画的起始值。
  • to: 动画的结束值。
  • valueString: CSS值不仅仅是数字。 值字符串需要包含'@@'。 设置动画时,该值被替换为。
  • frameCount: 动画框架每秒运行 24帧。 这是你希望动画运行的帧数。

以下是将 div的位置从 100帧移动到 500帧的构造函数:

var ani = new uiAnimation(div.style, 'left', 100, 500, '@@px', 48);

这样就需要在动画管理器中注册。

AnimationManager.Register(ani);

在 run run运行时,将在 body add add add add div,然后在一个随机点上对每个动画进行动画处理,使它的在一个 800px 中指向一个。

for (var x = 0; x <300; x++) {
 var div = document.createElement('div');
 var left = Math.random() * 800;
 var top = Math.random() * 800;
 div.style.position = 'absolute';
 div.style.top = top + 'px';
 div.style.left = left + 'px';
 div.style.width = '50px';
 div.style.width = '50px';
 div.style.backgroundColor = '#a2bd30';
 div.innerHTML = ' ' document.getElementsByTagName('body')[0].appendChild(div);
 var mat = new uiAnimation(div.style, 'left', Math.random() * 800, 
 Math.random() * 800, '@@px', 40);
 AnimationManager.Register(mat);
 mat = new uiAnimation(div.style, 'top', Math.random() * 800, 
 Math.random() * 800, '@@px', 40);
 AnimationManager.Register(mat);
}

Points of Interest

我对这项工作有多好。 IE 8和 Chrome 可以轻松地呈现 300个方块,而且没有闪烁的动画。


相关文章