JS原生animate动画函数之动画联动
<style>#pa { width: 200px; height: 10px; border: 1px solid green; border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; }
#charge { position: absolute; width: 100%; height: 100%; background: green; }
.art { margin: 16px 0; }
.artbox p { margin: 12px 0; font: normal 1.2em/1.6em sans-serif; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<p><img id="h7" alt="" width="200" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" title="暂停" /></p>
<div id="pa" title="放电中">
<div id="charge"></div>
</div>
<div class="artbox">
<p>上面的演示，图片是火星牌高科技产品，我们姑且称之为转动器。它的运转需要其下方供电设备提供能源，就是电池。电池以绿色表示电量，每一次充满电可供火星转动器旋转 60000 毫秒即 1 分钟（相当于现实生活中的1年）。转动器工作时可以随时暂停和启动，缺电时停止工作。电池电能耗尽后，单击电池可给电池充电，秒冲。</p>
<p>转动器和电池是各自独立的动画单元，但彼此间有联动：电池电能耗尽，转动器会以缓动方式停止转动；电池一旦充满电，整体设备立刻投入工作；转动器暂停时，电池没有消耗，反之电量按预设功耗衰减。</p>
<p>此外，如前已经提到，转动器动画有缓动效果：电池满电状态时转动速度逐渐加快直至正常速度停止加速、电池即将耗尽电能时逐渐减速直至停止。</p>
<p>演示实例使用到动画的 onfinish 事件和 currentTime 属性。onfinish 事件针对非 Infinity（不停歇）运行的动画，因为只有 iterations（迭代属性，在此意为重复）设置为不是永动的情况下才会有结束的时候；currentTime 属性是动画运行的当前时间，可以利用它来判断电池的电能消耗是否已经到了某个临界从而触发转动器的减速机制。还有一个我们前面用过的属性 playState，动画运行状态，除了暂停状态（paused）、播放状态（running）外，我们的实例中还用到了结束状态（finished）。当然，使用动画运行的结束状态来判断电池是否耗完电能不是唯一的方法，例中我们在别处做同样的判断，使用的是代表电池的元素的 offsetWidth（宽度）是否大于 0 做依据。</p>
<p>演示实例完整代码：</p>
</div>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="2"> <span class="tBlue">let</span> timer = null; <span class="tGreen">//定时器运行id</span></cl-cd>
<cl-cd data-idx="3"> </cl-cd>
<cl-cd data-idx="4"> <span class="tGreen">//旋转画描述 ：一个周期旋转360度</span></cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">const</span> rot = [</cl-cd>
<cl-cd data-idx="6"> {<span class="tBlue">transform:</span> <span class="tMagenta">'rotate(0)'</span>},</cl-cd>
<cl-cd data-idx="7"> {<span class="tBlue">transform:</span> <span class="tMagenta">'rotate(360deg)'</span>}</cl-cd>
<cl-cd data-idx="8"> ];</cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10"> <span class="tGreen">//旋转动画属性列表 ：周期时长3秒、永动</span></cl-cd>
<cl-cd data-idx="11"> <span class="tBlue">const</span> rotAttr = {</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">duration:</span> 3000,</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">iterations:</span> Infinity,</cl-cd>
<cl-cd data-idx="14"> };</cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"> <span class="tGreen">//电量消耗动画描述 ：宽度从 100% 变为 0</span></cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">const</span> powergone = [</cl-cd>
<cl-cd data-idx="18"> {<span class="tBlue">width:</span> <span class="tMagenta">'100%'</span>},</cl-cd>
<cl-cd data-idx="19"> {<span class="tBlue">width:</span> <span class="tMagenta">'0'</span>}</cl-cd>
<cl-cd data-idx="20"> ];</cl-cd>
<cl-cd data-idx="21"> </cl-cd>
<cl-cd data-idx="22"> <span class="tGreen">//电量消耗动画属性列表 ：结束时保持最后动画状态、1分钟运行周期、运行一次</span></cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">const</span> powergoneAttr = {</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">fill:</span> <span class="tMagenta">'forwards'</span>,</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">duration:</span> 60000,</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">iterations:</span> 1</cl-cd>
<cl-cd data-idx="27"> };</cl-cd>
<cl-cd data-idx="28"> </cl-cd>
<cl-cd data-idx="29"> <span class="tGreen">//运行动画并获取操作入口</span></cl-cd>
<cl-cd data-idx="30"> <span class="tBlue">const</span> h7Ani = h7.animate(rot, rotAttr); <span class="tGreen">//转动器</span></cl-cd>
<cl-cd data-idx="31"> <span class="tBlue">const</span> chargeAni = charge.animate(powergone, powergoneAttr); <span class="tGreen">//电池</span></cl-cd>
<cl-cd data-idx="32"> </cl-cd>
<cl-cd data-idx="33"> <span class="tGreen">//转动器开始转动速率</span></cl-cd>
<cl-cd data-idx="34"> h7Ani.playbackRate = 0.1;</cl-cd>
<cl-cd data-idx="35"> </cl-cd>
<cl-cd data-idx="36"> <span class="tGreen">//电池耗尽事件</span></cl-cd>
<cl-cd data-idx="37"> chargeAni.onfinish = () => {</cl-cd>
<cl-cd data-idx="38"> h7Ani.pause();</cl-cd>
<cl-cd data-idx="39"> pa.title = <span class="tMagenta">'单击充电'</span>;</cl-cd>
<cl-cd data-idx="40"> h7.title = <span class="tMagenta">'缺电'</span>;</cl-cd>
<cl-cd data-idx="41"> };</cl-cd>
<cl-cd data-idx="42"> </cl-cd>
<cl-cd data-idx="43"> <span class="tGreen">//转动器速率控制函数</span></cl-cd>
<cl-cd data-idx="44"> <span class="tBlue">const</span> controller = () => {</cl-cd>
<cl-cd data-idx="45"> <span class="tGreen">//开始转动时慢速</span></cl-cd>
<cl-cd data-idx="46"> <span class="tBlue">let</span> val = <span class="tRed">Math</span>.round(h7Ani.playbackRate * 100) / 100;</cl-cd>
<cl-cd data-idx="47"> <span class="tBlue">if</span>(val < 1 && chargeAni.currentTime < 60000) h7Ani.playbackRate = val * 1.2;</cl-cd>
<cl-cd data-idx="48"> <span class="tGreen">//电池即将耗尽时减速</span></cl-cd>
<cl-cd data-idx="49"> <span class="tBlue">if</span>(chargeAni.currentTime >= 56000) h7Ani.playbackRate = val * 0.8;</cl-cd>
<cl-cd data-idx="50"> };</cl-cd>
<cl-cd data-idx="51"> </cl-cd>
<cl-cd data-idx="52"> timer = setInterval(controller, 500); <span class="tGreen">//运行定时器</span></cl-cd>
<cl-cd data-idx="53"> <span class="tGreen">//电池父元素点击事件</span></cl-cd>
<cl-cd data-idx="54"> pa.onclick = () => {</cl-cd>
<cl-cd data-idx="55"> <span class="tBlue">if</span>(charge.offsetWidth > 0) <span class="tBlue">return</span> false;</cl-cd>
<cl-cd data-idx="56"> h7Ani.playbackRate = 0.1;</cl-cd>
<cl-cd data-idx="57"> h7Ani.play();</cl-cd>
<cl-cd data-idx="58"> chargeAni.play();</cl-cd>
<cl-cd data-idx="59"> pa.title = <span class="tMagenta">'放电中'</span>;</cl-cd>
<cl-cd data-idx="60"> };</cl-cd>
<cl-cd data-idx="61"> </cl-cd>
<cl-cd data-idx="62"> <span class="tGreen">//转动器单击事件 ：依据动画运行状态决定点击功能</span></cl-cd>
<cl-cd data-idx="63"> h7.onclick = () => {</cl-cd>
<cl-cd data-idx="64"> <span class="tBlue">if</span>(chargeAni.playState === <span class="tMagenta">'finished'</span>) <span class="tBlue">return</span> false; <span class="tGreen">//缺电时单击无效</span></cl-cd>
<cl-cd data-idx="65"> <span class="tBlue">if</span>(h7Ani.playState === <span class="tMagenta">'running'</span>) { <span class="tGreen">//如果动画运行中 则</span></cl-cd>
<cl-cd data-idx="66"> h7Ani.pause(); <span class="tGreen">//暂停转动</span></cl-cd>
<cl-cd data-idx="67"> chargeAni.pause(); <span class="tGreen">//电池不损耗</span></cl-cd>
<cl-cd data-idx="68"> clearInterval(timer); <span class="tGreen">//清除定时器</span></cl-cd>
<cl-cd data-idx="69"> h7.title = <span class="tMagenta">'启动'</span>;</cl-cd>
<cl-cd data-idx="70"> }<span class="tBlue">else</span>{ <span class="tGreen">//否则 则</span></cl-cd>
<cl-cd data-idx="71"> h7Ani.play(); <span class="tGreen">//继续旋转</span></cl-cd>
<cl-cd data-idx="72"> chargeAni.play(); <span class="tGreen">//继续耗电</span></cl-cd>
<cl-cd data-idx="73"> timer = setInterval(controller, 500); <span class="tGreen">//恢复定时器</span></cl-cd>
<cl-cd data-idx="74"> h7.title = <span class="tMagenta">'暂停'</span>;</cl-cd>
<cl-cd data-idx="75"> };</cl-cd>
<cl-cd data-idx="76"> };</cl-cd>
<cl-cd data-idx="77"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
<script>
(function() {
let timer = null;
const rot = [
{transform: 'rotate(0)'},
{transform: 'rotate(360deg)'}
];
const rotAttr = {
fill: 'forwards',
duration: 3000,
iterations: Infinity,
};
const powergone = [
{width: '100%'},
{width: '0'}
];
const powergoneAttr = {
fill: 'forwards',
duration: 60000,
iterations: 1
};
const h7Ani = h7.animate(rot, rotAttr);
const chargeAni = charge.animate(powergone, powergoneAttr);
h7Ani.playbackRate = 0.1;
chargeAni.onfinish = () => {
h7Ani.pause();
pa.title = '单击充电';
h7.title = '缺电';
};
const controller = () => {
let val = Math.round(h7Ani.playbackRate * 100) / 100;
if(val < 1 && chargeAni.currentTime < 60000) h7Ani.playbackRate = val * 1.2;
if(chargeAni.currentTime >= 57000) h7Ani.playbackRate = val * 0.8;
};
timer = setInterval(controller, 500);
pa.onclick = () => {
if(charge.offsetWidth > 0) return false;
h7Ani.playbackRate = 0.1;
h7Ani.play();
chargeAni.play();
pa.title = '放电中';
};
h7.onclick = () => {
if(chargeAni.playState === 'finished') return false;
if(h7Ani.playState === 'running') {
h7Ani.pause();
chargeAni.pause();
clearInterval(timer);
h7.title = '启动';
}else{
h7Ani.play();
chargeAni.play();
timer = setInterval(controller, 500);
h7.title = '暂停';
};
};
})();
</script>
先占个沙发，没抢楼吧 绿叶清舟 发表于 2024-6-8 22:05
先占个沙发，没抢楼吧
现在楼市不好 占个位子欣赏 这个更清楚了，把电池的损耗过程都演示出来了{:4_173:} 转速越来越慢，这个变速的过程真奇妙。 小辣椒 发表于 2024-6-8 23:09
占个位子欣赏
{:4_190:} 红影 发表于 2024-6-8 23:09
这个更清楚了，把电池的损耗过程都演示出来了
主要是演示多个动画单元的联动 红影 发表于 2024-6-8 23:09
转速越来越慢，这个变速的过程真奇妙。
这个应该是上一讲的核心 马黑黑 发表于 2024-6-8 23:12
主要是演示多个动画单元的联动
每一步都有详细解说，这个特别清晰{:4_187:} 马黑黑 发表于 2024-6-8 23:12
这个应该是上一讲的核心
是的，原始动画的强大之处。 红影 发表于 2024-6-9 10:36
是的，原始动画的强大之处。
它也不是原始动画，实际上它是一个相对新的创建和管理关键帧动画的接口 红影 发表于 2024-6-9 10:34
每一步都有详细解说，这个特别清晰
{:4_190:} 马黑黑 发表于 2024-6-9 18:00
它也不是原始动画，实际上它是一个相对新的创建和管理关键帧动画的接口
这个更直接，所以把它理解成原始的根本的东西了{:4_173:} 红影 发表于 2024-6-9 19:40
这个更直接，所以把它理解成原始的根本的东西了
不是。JS不创建新的DOM功能和特性，它只是做辅助。 马黑黑 发表于 2024-6-9 20:51
不是。JS不创建新的DOM功能和特性，它只是做辅助。
嗯，它是原生的，我用错词了{:4_173:} 红影 发表于 2024-6-9 22:10
嗯，它是原生的，我用错词了
原生，就是说，不借助第三方封装，是JS已经内置的API。
关于动画，有很多第三方封装的框架和插件。大名鼎鼎的JQuery框架（论坛有用到它）就封装有一个 animate() 函数，它不是JS原生的；还有一个也非常出名的 animate.js 插件，它就是专做动画的，同时，它是利用JS开发的插件，不是JS原生的，要使用它，和JQuery一样，得先引入。 马黑黑 发表于 2024-6-9 23:23
原生，就是说，不借助第三方封装，是JS已经内置的API。
关于动画，有很多第三方封装的框架和插件。大 ...
嗯嗯，所以内置的API是最根本的。 马黑黑 发表于 2024-6-8 22:46
现在楼市不好
刚需的不好也得占个位啊 绿叶清舟 发表于 2024-6-11 20:33
刚需的不好也得占个位啊
占着好
页:
[1]
2