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

etherdream 2010-08-17 04:28:27
加精
预览
http://www.etherdream.com/funnyscript/WarIcon/WarIcon.html


效果很简单，但是用JS很难做。这里采用的是线条逐行扫描的方法，虽然可以实现效果，但是代码量不少。大家发挥想象力，相信肯定有更好的实现方法！
...全文
8439 249 打赏 收藏 转发到动态 举报
写回复
用AI写文章
249 条回复
切换为时间正序
请发表友善的回复…
发表回复
cuixiping 2012-05-14
  • 打赏
  • 举报
 回复
一不小心，挖了老坟。没仔细看日期啊，我晕
cuixiping 2012-05-14
  • 打赏
  • 举报
 回复
代码太长了吧，我用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>


dreamzyl 2011-06-01
  • 打赏
  • 举报
 回复
很有创意，呵呵呵
wengmoumou 2011-04-14
  • 打赏
  • 举报
 回复
感觉两个差不多 没有具体看代码 顶了
微甜灬呼吸 2011-01-05
  • 打赏
  • 举报
 回复
jquery没这效果吧 `
zjhiphop2006 2010-09-30
  • 打赏
  • 举报
 回复
用css3的话，可以很简单的搞定！
finkle_zhang 2010-09-27
  • 打赏
  • 举报
 回复
每天回帖即可获得10分可用分！
zouhaifeng2012 2010-09-03
  • 打赏
  • 举报
 回复
学习。。收藏
loneryong 2010-08-26
  • 打赏
  • 举报
 回复
真的很不错
zhangyunchao 2010-08-26
  • 打赏
  • 举报
 回复
顶一下
Aries2010 2010-08-26
  • 打赏
  • 举报
 回复
这个挺好~~
antybaby 2010-08-26
  • 打赏
  • 举报
 回复
不错的效果,学习,顶了....
k307124620 2010-08-26
  • 打赏
  • 举报
 回复
膜拜
牛
redboy999 2010-08-26
  • 打赏
  • 举报
 回复
这个效果可以用到的地方还很多不错哦
crazylepus 2010-08-26
  • 打赏
  • 举报
 回复
没看到效果。
lanzhengpeng2 2010-08-26
  • 打赏
  • 举报
 回复
IntersectLineLine
2维的线线相交测试.
2D直线方程如f(t) = p + d * t;d可标量化,也不可.通常,把t无范围限制的直线方程当作直线,t大于等于0的当做射线,0<=t<=1当作线段.
GetPosition(t)就是把t带入此方程返回一个直线上的坐标点
modingfa 2010-08-26
  • 打赏
  • 举报
 回复
无法访问！
lanzhengpeng2 2010-08-26
  • 打赏
  • 举报
 回复
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
ning823 2010-08-26
  • 打赏
  • 举报
 回复
mark,learn
tiancaimugua 2010-08-26
  • 打赏
  • 举报
 回复
不错啊,学习了
加载更多回复（209）
Lua与c++交互实战基础篇
本课程从实战角度讲解了流行的高性能脚本Lua与c++的联合开发，这套方案已经被大量的对性能由要求的系统使用，成为了高性能脚本的唯一方案，像大量的游戏在使用lua，比如魔兽世界、博德之门、仙剑奇侠传五等，高性能的视频应用也在用lua&c++（比如笔者的公司），还有近击败了韩国围棋的AlphaGo也是使用了 c++&lua;的方案。
Silverlight 游戏开发小技巧：技能冷却效果1（Cooldown）
到目前为止，大家都非常推崇魔兽的技能冷却效果，就是这样的，我记得群里还对这个效果展开过探讨，其实实现起来并不难，关键是思路是否正确，这部分我得谢谢猪笨无罪，是他先想出的解决方案，他不愿意写博客，也就只好我来代劳了，哈哈，后面提供源代码和预览，不要错过。 那么我们开始制作，第一步建立工程，如果你是在自己的项目中应用，直接进入第二步创建图标， 把一张图标文件放进来，这样看起来更加直观，此时将S...
Canvas编程练习：20几行js代码实现雷达扫描动画效果
灵感源于一不小心挖了一个陈年老贴etherdream发的《【分享】魔兽技能冷却效果（希望能有更好的思路）》的坟，看他的代码太长（约200行），于是自己动手写了一个，也就20多行代码，效果也还不错，点这里看DEMO(1)。 etherdream的原理是使用borderWidth的动态改变，可兼容非HTML5浏览器，缺点是代码较多，需要新增DOM节点，而且只能用纯色遮罩，不能实现用图片做遮罩。
Silverlight 游戏开发小“.NET研究”技巧：技能冷却效果（Cooldown）
　　到目前为止，大家都非常推崇魔兽的技能冷却效果，就是这样的，我记得群里还对这个效果展开过探讨，其实实现起来并不难，关键是思路是否正确，这部分我得谢谢猪笨无罪，是他先想出的解决方案，他不愿意写博客，也就只好我来代劳了，哈哈，后面提供源代码和预览，不要错过。 　　那么我们开始制作，第一步建立工程，如果你是在自己的项目中应用，直接进入第二步创建图标。 　　把一张图标文件放进来，这样看起来更加直观，此时...
一起谈.NET技术，Silverlight 游戏开发小技巧：技能冷却效果（Cooldown）
　　到目前为止，大家都非常推崇魔兽的技能冷却效果，就是这样的，我记得群里还对这个效果展开过探讨，其实实现起来并不难，关键是思路是否正确，这部分我得谢谢猪笨无罪，是他先想出的解决方案，他不愿意写博客，也就只好我来代劳了，哈哈，后面提供源代码和预览，不要错过。 　　那么我们开始制作，第一步建立工程，如果你是在自己的项目中应用，直接进入第二步创建图标。 　　把一张图标文件放进来，这样看起来更加直观，此时...
JavaScript

87,914

社区成员

224,620

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章