当前位置：Gxlcms > JavaScript > JSTween颜色渐变_javascript技巧

JSTween颜色渐变_javascript技巧

时间：2021-07-01 10:21:17 帮助过：3人阅读

有31中缓动算法，实现了颜色的自动转换（#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式，最后返回#ff0000格式）、px单位的自动转换。
调用接口：
/**
* 对外接口
* Tween的示例
* @param startProps 开始属性，单个属性或者数组
* @param endProps 结束属性，单个属性或者数组
* @param timeSeconds 运动消耗时间，单位秒
* @param animType 动作类型，字符串型，内部自己转换算子
* @param delay 延迟时间，多长时间后开始运动，单位秒
*/
window.rtween = function(startProps, endProps, timeSeconds, animType, delay)
{
var tw = new Tween();
tw.start(startProps, endProps, timeSeconds, animType, delay);
return tw;
}
示例如下：
http://img.jb51.net/online/Tween.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 
transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js" type="text/javascript"></ script> 
<script src="http://img.jb51.net/jslib/jquery/rtween.js" type="text/javascript"></ script>

</head> 
<body> 
<div> 
    <input type="button" value="alpha2" onclick="alpha2()" /> 
    <input type="button" value="color2" onclick="color2()" /> 
    <input type="button" value="bgcolor2" onclick="bgcolor2()" /> 
    <input type="button" value="width2" onclick="width2()" /> 
    <input type="button" value="left2" onclick="left2()"/> 
    <select size="1" id="tweentypeSelect" name="select"></select> 
</div> 
<div id='t' style='width:500px;height:500px;background-color:#00f;color:#ccc;position:absolute;'> 
    function alpha2() 
    { 
        var t = rtween(1,0,1,type); 
        t.run = function(ps) 
        { 
            $('#t').css('opacity',ps); 
        } 
        t.complete = function() 
        { 
            rtween(0,1,1,type).run = function(ps) 
            { 
                $('#t').css('opacity',ps); 
            } 
        } 
    } 
</div> 
<script> 
    // 
    var t = rtween(0,0,0.1); 
    var typeshtml = ''; 
    // 
    for(var i in t.animTypes) 
    { 
        typeshtml+='<option>'+i+'</option>'; 
    } 
    $('#tweentypeSelect').html(typeshtml); 
    // 
    var tag = $('#tweentypeSelect')[0]; 
    var type = tag.options[tag.selectedIndex].text; 
    $('#tweentypeSelect').change(function(){ 
        type = tag.options[tag.selectedIndex].text; 
    }); 
    // 
    function alpha2() 
    { 
        var t = rtween(1,0,1,type); 
        t.run = function(ps) 
        { 
            $('#t').css('opacity',ps); 
        } 
        t.complete = function() 
        { 
            rtween(0,1,1,type).run = function(ps) 
            { 
                $('#t').css('opacity',ps); 
            } 
        } 
    } 
    function color2() 
    { 
        var t=rtween($('#t').css('color'),'#ff0000',1,type); 
        t.run = function(ps) 
        { 
            $('#t').css('color',ps); 
        } 
        t.complete = function() 
        { 
            rtween($('#t').css('color'),'#ccc',1,type).run = function(ps) 
            { 
                $('#t').css('color',ps); 
            } 
        } 
    } 
    function bgcolor2() 
    { 
        var t=rtween($('#t').css('backgroundColor'),'#ff0000',1,type); 
        t.run = function(ps) 
        { 
            $('#t').css('backgroundColor',ps); 
        } 
        t.complete = function() 
        { 
            rtween($('#t').css('backgroundColor'),'#0000ff',1,type).run = function(ps) 
            { 
                $('#t').css('backgroundColor',ps); 
            } 
        } 
    } 
    function width2() 
    { 
        var t = rtween($('#t').css('width'),'200px',1,type); 
        t.run = function(ps) 
        { 
            $('#t').css('width',ps); 
        } 
        t.complete = function() 
        { 
            rtween($('#t').css('width'),'500px',1,type).run = function(ps) 
            { 
                $('#t').css('width',ps); 
            } 
        } 
    } 
    function left2() 
    { 
        var t = rtween($('#t').offset().left+'px','500px',1,type); 
        t.run = function(ps) 
        { 
            $('#t').css('left',ps); 
        } 
        t.complete = function() 
        { 
            rtween($('#t').css('left'),'10px',1,type).run = function(ps) 
            { 
                $('#t').css('left',ps); 
            } 
        } 
    } 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

选择列表里面的缓动算法，点前面的按钮，就会以想对的缓动算法运动

源代码： http://img.jb51.net/jslib/jquery/rtween.js
核心代码:
function Tween()
{
this._frame=20;
//
this._animType = linear;
this._delay = 0;
//
this.run = function(){}
this.complete = function(){}
}
//
Tween.prototype.getValue = function(prop)
{
this._valueType = ”;
if(prop.constructor == Array) return prop;
//
if(typeof(prop) == 'string')
{
if(isColor(prop))
{
this._valueType = ‘color';
return c2a(prop);
}
if(prop.split('px').length>1)
{
this._valueType = ‘px';
return [prop.split('px')[0]];
}
}
return [prop];
}
Tween.prototype.setValue = function(prop)
{
if(this._valueType == ‘color')return a2c(prop);
if(this._valueType == ‘px')return prop[0]+'px';
return prop;
}
Tween.prototype.start = function(startProps, endProps, timeSeconds, animType, delay)
{
if(animType != undefined)this._animType = this.animTypes[animType];
if(delay != undefined)this._delay = delay;
//
this._timeSeconds = timeSeconds;
this._startTimer = new Date().getTime() + this._delay * 1000;
//
this._endProps = this.getValue(endProps);
this._startProps = this.getValue(startProps);
this._currentProps = [];
//
var $this = this;
clearInterval(this._runID);
this._runID = setInterval(
function(){$this._run();}
,this._frame);
}
Tween.prototype.stop = function(state)
{
for(var i in this._startProps)
{
if(Number(state)>0)
this._currentProps[i] = this._endProps[i];
else if(Number(state)<0)
this._currentProps[i] = this._startProps[i];
}
this.callListener();
this.complete();
//
clearInterval(this._runID);
}
Tween.prototype.callListener = function()
{
this.run(this.setValue(this._currentProps));
}
Tween.prototype._run = function()
{
if ( new Date().getTime()- this._startTimer< 0) return;
var isEnd = false;
//
for(var i in this._startProps)
{
this._currentProps[i] = this._animType( new Date().getTime()-this._startTimer,Number(this._startProps[i]),Number(this._endProps[i])-Number(this._startProps[i]),this._timeSeconds * 1000);
//
if(this._startTimer + (this._timeSeconds * 1000) <= new Date().getTime())
{
this._currentProps[i] = this._endProps[i];
isEnd = true;
}
}
//
if(isEnd)this.stop();
else this.callListener();
}

JSTween颜色渐变_javascript技巧

人气教程排行