时间:2021-05-26
程序源码
复制代码 代码如下:
function Animate(el, prop, opts) {
this.el = el;
this.prop = prop;
this.from = opts.from;
this.to = opts.to;
this.time = opts.time;
this.callback = opts.callback;
this.animDiff = this.to - this.from;
}
Animate.prototype._setStyle = function(val) {
switch(this.prop) {
case 'opacity':
this.el.style[this.prop] = val;
this.el.style.filter = 'alpha(opacity=' + val * 100 + ')';
break;
default:
this.el.style[this.prop] = val + 'px';
break;
}
}
Animate.prototype._animate = function() {
var that = this;
this.now = new Date();
this.diff = this.now - this.startTime;
if (this.diff > this.time) {
this._setStyle(this.to);
if (this.callback) {
this.callback.call(this);
}
clearInterval(this.timer);
return;
}
this.percentage = (Math.floor((this.diff / this.time) * 100) / 100);
this.val = (this.animDiff * this.percentage) + this.from;
this._setStyle(this.val);
}
Animate.prototype.start = function() {
var that = this;
this.startTime = new Date();
clearInterval(this.timer);
this.timer = setInterval(function() {
that._animate.call(that);
}, 4);
}
Animate.canTransition = function() {
var el = document.createElement('foo');
el.style.cssText = '-webkit-transition: all .5s linear;';
return !!el.style.webkitTransitionProperty;
}();
使用方法
复制代码 代码如下:
// 透明度渐变
function changeOpacity() {
// 透明度渐变 从1 - 0 渐变时间1000ms
var fx = 'opacity', from = 1, to = 0, time = 1000;
// 渐变完毕执行的回调函数
var callback = function() {
from = 0; to = 1;
new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton}).start();
}
// 实例化渐变函数
new Animate(demo, fx, {
from: from,
to: to,
time: time,
callback: callback
}).start();
}
演示代码:
new document [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了Android动画之渐变动画(TweenAnimation)。分享给大家供大家参考,具体如下:Android平台提供了两类动画。一类是Tween动
本文向大家介绍一个javascript实现的动画。点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动。请看下面代码:javascript
Android平台提供了两类动画。一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转、平移、放缩和渐变)。下面就讲一下TweeneA
前言之前说过了在Android中,动画Animation的实现有两种方式:TweenAnimation(渐变动画)和FrameAnimation(帧动画)。渐变
动画类型Android的animation由四种类型组成XML中alpha渐变透明度动画效果scale渐变尺寸伸缩动画效果translate画面转换位置移动动画