卡普空发了个新倒计时网页,这个倒计时效果看着很帅啊怎么做的

FrostScale-avatar

FrostScale

2022-02-05T08:53:51+00:00

倒计时动画正好停在当前剩余时间上,感觉好炫酷[s:ac:茶]
以及,我猜是逆转裁判7,因为是倒计时7天[s:ac:哭笑]

[url]https://www.capcom-games.com/countdown/[/url]

[img]https://img.nga.178.com/attachments/mon_202202/14/9aQ17k-ejkZeT3cSl8-cy.jpg.medium.jpg[/img]
𝙖𝙧𝙞𝙖-avatar

𝙖𝙧𝙞𝙖

用ppt就能做出来,细节上可能稍微差一点
SOSSBOY-avatar

SOSSBOY

看了下,是canvas画出来的,那技术上就是从大到小数字倒数绘制,在需要的数字停下就好了
Mohamed_Ahmed-avatar

Mohamed_Ahmed

是canvas绘制的. 看起来不难实现.
dk-004-avatar

dk-004

很简单吧,都是简单的动画。
GL1TCHSYNX-avatar

GL1TCHSYNX

逆转7好耶[img]https://img.nga.178.com/attachments/mon_201209/14/-47218_5052bc80140e3.png[/img]
Zerone02-avatar

Zerone02

用h5游戏引擎的话很好实现
three.js pixi.js cocos这些支持shader的都很容易做这些效果
lbenz518-avatar

lbenz518

虽然我也很期待逆转7,但这个美术风格有点像生化的,老哥放低期待一点。[s:ac:哭笑]
skoupayou-avatar

skoupayou

[img]https://img.nga.178.com/attachments/mon_202202/14/9aQ17k-es16ZeT3cSwg-136.jpeg[/img]
GoobeyGoobs-avatar

GoobeyGoobs

就是网页动画加了点渲染效果
F12可以看用到的素材 除了一个背景图片 剩下基本都是文字的透明图
EmDoubleU-avatar

EmDoubleU

[img]https://img.nga.178.com/attachments/mon_201209/14/-47218_5052bc8638067.png[/img]还行吧,感觉不难
FrostScale-avatar

FrostScale

[quote][pid=588795900,30667664,1]Reply[/pid] Post by [uid=7846476]断剑_无痕[/uid] (2022-02-14 17:32):

用h5游戏引擎的话很好实现
three.js pixi.js cocos这些支持shader的都很容易做这些效果
-----------
看了下源码,确实是用pixi.js做的,但是似乎没用shader,纯粹用Graphics画出来加个BlurFilter实现的效果[s:ac:哭笑]
[code]
function t() {
n.p8.registerPlugin(a.w),
a.w.registerPIXI(o),
o.utils.skipHello(),
([/quote]大佬牛逼啊,直接评论区撸代码[s:ac:哭笑]
GL1TCHSYNX-avatar

GL1TCHSYNX

结果不是啊喂