data:2022-11-17
author:lfp
move运动函数
dom--需要运动的对象
json--{width:100,height:100,left:100,top:100}
callback--回调函数 可调用自己 实现异步动画效果
/
//主函数
function move(dom,json,callback){
//让每一次动画都是新的开始，防止出现动画一直不停的运行
if(domtimer)clearInterval(domtimer);
var i=0;
var start=0;
//在对象中增加timer 便于控制他停止
domtimer=setInterval(function(){
i++;
//循环每一个目标属性添加动画方法
for(var attr in json){
//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替
var cur=getStyle(dom,attr);
if(i==1)start=cur;
//拿到该属性的目标值
var target=json[attr];
//设置分成10次增加增量 你可以根据需要修改
var speed=(target-start)/10;
consolelog(speed+"====="+cur)
//如果没有达到目标值就一直加
if(Mathabs(cur-target)>1){
domstyle[attr]=cur+speed+"px";
}else{
//达到目标值了就停止或者其他情况也停止
clearInterval(domtimer);
//等停止了动画再回调函数进行另外的 *** 作
if(callback)callbackcall(dom);
};
};
},45);
};
//配套函数
function getStyle(dom,attr){
var value="";
if(windowgetComputedStyle){
value=windowgetComputedStyle(dom,false)[attr];
}else{
value=domcurrentStyle[attr];
};
value=parseInt(value);
return value || 0;//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充
};
function $(id){
//return documentgetElementById(id);
return documentquerySelector("#"+id);
};上一篇文章写了星星生成的逻辑，详情请看 Cocos Creator开发游戏消灭星星——星星生成
星星消除是发生在用户点击之后，所以需要处理用户触摸 *** 作。在上一篇制作星星预制时有提及，在脚本组件 starCtrjs 的start函数里监听触摸。
消除星星是消除上下左右相连的星星，所以需要根据用户点击的星星找到其他相连的星星。在Utils中增加方法needRemoveList：
现在来完成触摸处理逻辑：
通过用户点击的星星坐标找到与其相连的星星们，然后发射delete_stars事件，通知地图消除星星。关于监听和发射时间参考官方文档 监听和发射事件 。
在matrixCtrjs的onLoad方法中添加事件监听
先添加几个属性来记录消除数据
在回调函数中处理消除逻辑
上一篇 说过，动画和特效主要放在节点 ActionRoot 中处理。如图，combo特效就在combNode节点中播放。
asset、atlasAsset分别存储骨骼动画资源，combName中存储骨骼动画的名字，和资源数组一一对应，_anim是dragonBones组件。
playComb即是播放特效的方法。
combCtr是脚本组件matrixCtr中的属性，即是场景中ActionRoot节点的脚本组件。
将需要消除的星星对应的坐标清空（赋值-1）
按规则星星是一个一个消除的，所以bomb会递归调用，直到所有星星都消除。在消除星星的同时，有分数计算和动画逻辑。
星星的移除是在方法 bombStar 中处理的，在创建星星的时候使用了对象池，所以移除时把它重新放入对象池。
在移除星星的同时，伴随有星星爆炸的特效。 starParticle 是一个预制，层级很简单，在一个空节点中，添加Particle System组件和脚本组件particleCtr。
Particle System组件设置自动移除，在属性检查器中勾选 Auto Remove On Finish 选项。
我们知道一次消除星星方块越多，得分越高。
分数动画有几种：
动画在actionCtrjs中处理：
因为分数也会被频繁的创建和移除，所以也使用了对象池，分数的预制制作后面介绍。
与单个方块的分数动画一样，消除总得分动画：
层级结构很简单，都是空节点下加一个Label节点。父节点上都有一个脚本组件partScore、totalScore。
脚本也很简单，setScore方法给Label赋值。
与单个分数不同的，总得分的Label动画使用Creator的Animation编辑器制作。所以，预制中需要在节点label中添加Animation组件，在这里我们在添加一个脚本组件totalScoreLabel，这个脚本主要处理Animation动画的事件回调方法。pause{
animation-play-state:paused;
}
插入animation-play-state:paused;样式
js:
documentgetElementById("xxx")className="pause";
jquery:
$("#cc")addClass("pause");
chrome v43 测试可以停止动画
当我们给元素添加Animation后，动画总是现在元素的初始位置显示一下，然后再跳到动画的起始位置播放，这样的话会很难看。
解决方法：
使用animation-fill-mode:forwards属性
forwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的最后一帧定义的位置
backwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的第一帧定义的位置
上边样式的将变现为，class为phone的元素会在加载完成后，从它的定义位置靠下5rem开始动画。
js中赋值nimation-fill-mode:forwards的方法：
object styleanimationFillMode=none | forwards | backwards | both;
threejs animationclip怎么播放可以试试移除动画的类再重新给节点添加动画的类
下面这个demo是执行一次动画，2s后再重新执行一遍
（因为是demo，我就没有考虑兼容性问题，没有添加css前缀）
1
<div class="dot anm" id="anm"></div>
dot {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border-radius: 50%;
background: #000;
}
anm {
animation: move 1s forwards;
}
@keyframes move
{
from {
left:0px;
}
to {
left:200px;
}
setTimeout(function() {
var dom = documentgetElementById('anm');
domclassName = 'dot';
setTimeout(function() {
domclassName = 'dot anm';
}, 10);
}, 2000);<html>
<head>
<style>
@keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-moz-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-webkit-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-o-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
#animator {
width: 100px;
height: 100px;
background: red;
}
animation {
animation: longer 05s;
-moz-animation: longer 05s;
-webkit-animation: longer 05s;
-o-animation: longer 05s;
}
</style>
</head>
<body>
<div id="animator" class="animation"></div>
<script>
var animator = documentgetElementById('animator');
animatoraddEventListener('animationend', endHandler);
function endHandler() {
animatorremoveEventListener('animationend', endHandler);
animatorclassName = '';
setTimeout(function () {
animatorclassName = 'animation';
}, 0);
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）