JS Tween 색상 그라데이션_javascript 기술

색상 자동 변환(#f00 #ff0000 rgb(255,0,0) 형식을 색상 계산 형식으로, 최종적으로 #ff0000 형식으로 반환) 및 px 단위 자동 변환을 실현하는 31가지 여유 알고리즘이 있습니다.
호출 인터페이스:
/**
* 외부 인터페이스
* Tween의 예
* @param startProps 시작 속성, 단일 속성 또는 배열
* @param endProps 끝 속성, 단일 속성 또는 배열
* @param timeSeconds 이동 소비 시간, 단위초
* @param animType 동작 유형, 문자열 유형, 내부 변환 연산자
* @param 지연 지연 시간, 이동을 시작할 시간, 단위초
*/
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

<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;"> </div> 함수 alpha2() { var t = rtween(1,0,1,type); t.run = 함수(ps) { $('#t').css('불투명도',ps); } t.complete = 함수() { rtween(0,1,1,type).run = 함수(ps) { $('#t').css('불투명도',ps); } } }

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]<script> // var t = rtween(0,0,0.1); var typeshtml = ''; // for(var i in t.animTypes) { typeshtml+='<option>'+i+''; } $('#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>
목록에서 이징 알고리즘을 선택하고 앞에 있는 버튼을 클릭하면 원하는 이징 알고리즘에 따라 움직임이 발생합니다.

소스 코드: http://img.jb51 .net /jslib/jquery/rtween.js
핵심 코드:
function Tween()
{
this._frame=20
//
this._animType = 선형 ;
this._delay = 0;
//
this.run = function(){}
this.complete = function(){}
}
//
Tween.prototype.getValue = function(prop)
{
this._valueType = ”;
if(prop.constructor == Array) return prop; (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; .start = function(startProps, endProps, timeSeconds, animType, Delay)
{
if(animType != undefine)this._animType = this.animTypes[animType]
if(delay != undefine) this._delay = 지연;
//
this._timeSeconds;
this._startTimer() this._delay * 1000; ._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); 프로토타입.stop = 함수(상태)
{
for(var i in this._startProps)
{
if(Number(state)>0)
this._currentProps[i] = this ._endProps[i];
else if(Number(state)this._currentProps[i] = this._startProps[i];
this.callListener( );
this.complete();
//
clearInterval(this._runID)
}
Tween.prototype.callListener = function()
{
.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._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) {
this._currentProps[i] = this._endProps[i] ;
isEnd = true;
}
}
//
if(isEnd)this.stop()
else this.callListener();