【分享】魔兽技能冷却效果（希望能有更好的思路）

[etherdream]

预览
http://www.etherdream.com/funnyscript/WarIcon/WarIcon.html


效果很简单，但是用JS很难做。这里采用的是线条逐行扫描的方法，虽然可以实现效果，但是代码量不少。大家发挥想象力，相信肯定有更好的实现方法！

[tiancaimugua]

不错啊,学习了

[ning823]

mark,learn

[lanzhengpeng2]

3D游戏里的CD效果代码:

public ref class CoolDownImage : public vfxui::CmpImage
{
UINT m_nVertexCount;
VVertex_PT * m_Vertices;
FLOAT m_nStartAngle; //冷却的起始角度.角度为单位
FLOAT m_nEndAngle; //冷却的结束角度.角度为单位
BOOL m_bNeedUpdate; //
void __Recalc();
void __Initialize();
public:
[VictoryScript::vsAttribute,CategoryAttribute("属性"),DescriptionAttribute("冷却的起始角度.角度为单位")]
property FLOAT StartAngle
{
FLOAT get(){ return m_nStartAngle;}
void set(FLOAT fValue);
}
[VictoryScript::vsAttribute,CategoryAttribute("属性"),DescriptionAttribute("冷却的结束角度.角度为单位")]
property FLOAT EndAngle
{
FLOAT get(){ return m_nEndAngle;}
void set(FLOAT fValue);
}
};


namespace detail
{
static const FLOAT g_CoolDownCorneres[10] =
{
0.0f,
VGO_PI * 0.25f,
VGO_PI * 0.75f,
VGO_PI * 1.25f,
VGO_PI * 1.75f,
VGO_PI * 2.25f,
VGO_PI * 2.75f,
VGO_PI * 3.25f,
VGO_PI * 3.75f,
VGO_PI * 4.00f,
};

static const V3Line2 g_CoolDownLines[9] =
{
V3Line2(V3Vector2(+0.5f,+0.0f),V3Vector2(+0.0f,-0.5f)),
V3Line2(V3Vector2(+0.5f,-0.5f),V3Vector2(-1.0f,+0.0f)),
V3Line2(V3Vector2(-0.5f,-0.5f),V3Vector2(+0.0f,+1.0f)),
V3Line2(V3Vector2(-0.5f,+0.5f),V3Vector2(+1.0f,+0.0f)),
V3Line2(V3Vector2(+0.5f,+0.5f),V3Vector2(+0.0f,-1.0f)),
V3Line2(V3Vector2(+0.5f,-0.5f),V3Vector2(-1.0f,+0.0f)),
V3Line2(V3Vector2(-0.5f,-0.5f),V3Vector2(+0.0f,+1.0f)),
V3Line2(V3Vector2(-0.5f,+0.5f),V3Vector2(+1.0f,+0.0f)),
V3Line2(V3Vector2(+0.5f,+0.5f),V3Vector2(+0.0f,-0.5f)),
};
}

#define COOLDOWN_VERTEX_COUNT 8

void CoolDownImage::__Recalc()
{
using namespace detail;

FLOAT fStart,fEnd;
if(m_nStartAngle != m_nEndAngle)
{
FLOAT nStart = fmodf(fmodf(m_nStartAngle,360.0f) + 360.0f,360.0f);
FLOAT nEnd = fmodf(fmodf(m_nEndAngle,360.0f) + 360.0f,360.0f);
if(m_nStartAngle > m_nEndAngle)
std::swap(nStart,nEnd);
if(nEnd <= nStart) nEnd += 360.0f;
fStart = _2Radian(nStart);
fEnd = _2Radian(nEnd);
}
else
{
m_nVertexCount = 0;
return ;
}

UINT nStartCorner,nEndCorner;
for(nStartCorner=0; g_CoolDownCorneres[nStartCorner] <= fStart; ++nStartCorner);
for(nEndCorner=nStartCorner; g_CoolDownCorneres[nEndCorner] < fEnd; ++nEndCorner);

m_nVertexCount = 2;
for(UINT i=nStartCorner; i<nEndCorner; ++i)
{
m_Vertices[m_nVertexCount].pos.x = g_CoolDownLines[i].pos.x;
m_Vertices[m_nVertexCount].pos.y = -g_CoolDownLines[i].pos.y;
m_Vertices[m_nVertexCount].tex.x = g_CoolDownLines[i].pos.x;
m_Vertices[m_nVertexCount].tex.y = -g_CoolDownLines[i].pos.y;
++m_nVertexCount;
}

FLOAT t;
V3Line2 l_start(V3Vector2(0.0f,0.0f),V3Vector2(cosf(-fStart),sinf(-fStart)));
VERIFY(::IntersectLineLine(g_CoolDownLines[nStartCorner - 1],l_start,&t,NULL));
V3Vector2 i_start = g_CoolDownLines[nStartCorner - 1].GetPosition(t);

V3Line2 l_end(V3Vector2(0.0f,0.0f),V3Vector2(cosf(-fEnd),sinf(-fEnd)));
VERIFY(::IntersectLineLine(g_CoolDownLines[nEndCorner - 1],l_end,&t,NULL));
V3Vector2 i_end = g_CoolDownLines[nEndCorner - 1].GetPosition(t);

m_Vertices[0].pos.x = 0.0f;
m_Vertices[0].pos.y = 0.0f;
m_Vertices[0].tex.x = 0.0f;
m_Vertices[0].tex.y = 0.0f;
m_Vertices[1].pos.x = i_start.x;
m_Vertices[1].pos.y = -i_start.y;
m_Vertices[1].tex.x = i_start.x;
m_Vertices[1].tex.y = -i_start.y;
m_Vertices[m_nVertexCount].pos.x = i_end.x;
m_Vertices[m_nVertexCount].pos.y = -i_end.y;
m_Vertices[m_nVertexCount].tex.x = i_end.x;
m_Vertices[m_nVertexCount].tex.y = -i_end.y;

++m_nVertexCount;
ASSERT(m_nVertexCount <= COOLDOWN_VERTEX_COUNT);
}

void CoolDownImage::__Initialize()
{
m_Vertices = new VVertex_PT[COOLDOWN_VERTEX_COUNT];
}

支持顺时针旋转,逆时针旋转(StartAngle > EndAngle),要从300度旋转到90可设置成300,450

[modingfa]

无法访问！

[lanzhengpeng2]

IntersectLineLine
2维的线线相交测试.
2D直线方程如f(t) = p + d * t;d可标量化,也不可.通常,把t无范围限制的直线方程当作直线,t大于等于0的当做射线,0<=t<=1当作线段.
GetPosition(t)就是把t带入此方程返回一个直线上的坐标点

[crazylepus]

没看到效果。

[redboy999]

这个效果可以用到的地方还很多不错哦

[k307124620]

膜拜
牛

[antybaby]

不错的效果,学习,顶了....

[Aries2010]

这个挺好~~

[zhangyunchao]

顶一下

[loneryong]

真的很不错

[zouhaifeng2012]

学习。。收藏

[finkle_zhang]

每天回帖即可获得10分可用分！

[zjhiphop2006]

用css3的话，可以很简单的搞定！

[微甜灬呼吸]

jquery没这效果吧 `

[wengmoumou]

感觉两个差不多 没有具体看代码 顶了

[dreamzyl]

很有创意，呵呵呵

[cuixiping]

代码太长了吧，我用canvas写了一个，20多行代码就可以了。

<canvas id="canvas1" width="64" height="64"></canvas>
<script>
function MyCtx(ctx){
    this.ctx = ctx;
}
(function (map){
    for(var k in map){
        MyCtx.prototype[k] = new Function('this.ctx.'+map[k]+'.apply(this.ctx,arguments); return this;');
    }
}({
    B:'beginPath', M:'moveTo', L:'lineTo', A:'arc', Z:'closePath', f:'fill', dI:'drawImage', cR:'clearRect', clip:'clip', save:'save', restore:'restore'
}));
function init(){
    var ctx = document.getElementById("canvas1").getContext('2d');
    var mtx = new MyCtx(ctx), i=-1;
    mtx.ctx.fillStyle='rgba(0,0,0,0.6)';
    function f(){
        mtx.save().cR(0,0,64,64).dI(img,0,0).B().A(32,32,64,Math.abs(++i%720)*Math.PI/360, Math.PI*2,(i/720|0)%2).L(32,32).Z().clip().f().restore();
        setTimeout(f,20);
    }
    f();
}
var img = new Image();
img.src = 'http://www.etherdream.com/funnyscript/WarIcon/Icon1.PNG';
img.onload = init();
</script>

[cuixiping]

一不小心，挖了老坟。没仔细看日期啊，我晕