纯js控制css代码实现帧动画功能

原创
2017/03/18 07:50
阅读数 837

在做微信h5前段开发的时候,遇到很多动画不是代码能实现的了的,只能通过帧动画了,如果是简单的动画,可以建议用gif,但有时gif并不是万能的,因为你无法控制gif的开始,结束。

原理

其实就是跟电影院放胶带电影一样,通过快速的播放不同的照片,完成一个动画。

帧动画功能 纯js控制css代码

帧动画原理

重点

1,要设置好背景图片的background-size,这个可以简单理解成你的“底片“宽高。高度就设置成你的div高度,宽度根据你div高度等比例缩放就行了。

2,设置好div的宽度,和高度,这个其实就相当于你的“电影屏幕”。

3,js核心代码:

obj.css('background-position', 'center -'+temp + 'px');

js代码

<%@ page language="java" pageEncoding="UTF-8"%>

< script type = "text/javascript" >
	window.frameAnimation = {
		anims: (function() {
			/*
			obj=>需要执行背景动画的对象;
			maxwidth:图片的总宽度
			minwidth:一帧的宽度
			steps=>总帧数;
			eachtime=>一套完整动画需要的时间;
			times=>动画执行的次数 0表示无限反复
			ismove,是否需要同时完成其他动作,true,false
			*/
			return function(obj, maxwidth, minwidth, steps, eachtime, times, isMove, callback) {
				var runing = false;
				var handler = null; //obj,width,steps,eachtime,times定时器
				var step = 0; //当前帧
				var time = 0; //当前第几轮
				var speed = eachtime * 1000 / steps; //间隔时间
				var temp = 0;
				var top = 12;

				function _play() {
					if (step >= steps) {
						step = 0;
						time++;
					}

					if (0 == times || time < times) {
						if (minwidth < maxwidth) {
							temp = minwidth * step;
						}
						if (isMove) {
							top += 35;
							obj.css('top', top + 'px');
						}
						obj.css('background-position', 'center -' + temp + 'px');
						step++;
					} else {
						control.stop();
						callback && callback();
					}
				}

				var control = {
					start: function() {
						if (!runing) {
							runing = true;
							step = time = 0;
							handler = setInterval(_play, speed);
						}
						return this;
					},
					stop: function(restart) {
						if (runing) {
							runing = false;
							if (handler) {
								clearInterval(handler);
								handler = null;
							}
							if (restart) {
								obj.css('background-position', '0 0');
								step = 0;
								time = 0;
							}
						}
					}
					,
					dispose: function() {
						this.stop();
					}
				};
				return control;
			}

		})()
	}
< /script>

调用方法

var anim = frameAnimation.anims($('#page2 .passerby'),594.4792,99.080,6,3.8,2,true,function(){});
anim.start();

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部