data:2022-11-17
author:lfp
move运动函数
dom--需要运动的对象
json--{width:100,height:100,left:100,top:100}
callback--回调函数 可调用自己 实现异步动画效果
*/
//主函数
function move(dom,json,callback){
//让每一次动画都是新的开始，防止出现动画一直不停的运行
if(dom.timer)clearInterval(dom.timer)
var i=0
var start=0
//在对象中增加timer 便于控制他停止
dom.timer=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
console.log(speed+"====="+cur)
//如果没有达到目标值就一直加
if(Math.abs(cur-target)>1){
dom.style[attr]=cur+speed+"px"
}else{
//达到目标值了就停止或者其他情况也停止
clearInterval(dom.timer)
//等停止了动画再回调函数进行另外的操作
if(callback)callback.call(dom)
}
}
},45)
}
//配套函数
function getStyle(dom,attr){
var value=""
if(window.getComputedStyle){
value=window.getComputedStyle(dom,false)[attr]
}else{
value=dom.currentStyle[attr]
}
value=parseInt(value)
return value || 0//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充
}
function $(id){
//return document.getElementById(id)
return document.querySelector("#"+id)
}
PPT如何制作钟表动画第一步、画一大一小两个圆，大的用蓝色填充、置于底层，小的用白色填充，然后把两个圆同心叠放，选择组合。
第二步、在幻灯片上插入文本框，添加时间字体。再ctrl+a全选，右键选择组合。
第三步、在自选图形中的“箭头总汇”中的“上箭头”做为表针，并更改填充颜色。将该箭头复制1个，并按图中位置放置，两个箭头一起选中，右键，组合在一起。
第四步、选中下面的箭头，双击设置最下的箭头，填充色设置为“无填充颜色”，线条颜色设置为“无线条颜色”，这样我们的时针就做好了。
第五步、将做好的时针放到表盘的`中间。
第六步、选中时针，选择“自定义动画”，添加“动作效果”为：强调-->陀螺旋。
第七步、右键点击动画列表的“组合25”，选中“效果选项”
第八步、在计时标签下，设置如下：
开始：之前
延时：0秒
速度：12:00:00秒 (此处手动输入，注意冒号为英文输入法下面的符号)
重复：直到下一次点击
第九步、按上面同样的方法，用箭头分别作出分针和秒针，并叠放在一起，注意层次(钟面最底层，接着秒针，再分针，最上面时针)分针和秒针设置同样的动画，但分针效果选项下的速度输入“01:00:00秒”，秒针速度输入“01:00秒”，其他设置跟时针一样。
第十步、最终运行效果：
